React

React ile programlamaya giriş

Neden React

React Kullanımı

Online olarak:

üzerinden çalışabilirsin

Bilgisayarın üzerinden çalıştırmak için:

kurulumunu gerektirir
React'i basit olarak kurmak için bakabilirsin
npm init react-app my-app

Temel Kavramlar

Component Kavramı

Tüm classlar React.Component'i extends etmek zorundadır
render(<html>) ile html yorumlanır
- return edilen html metni ekrana basılır
- HTML verileri <div> arasında olmak zorundadır
Oluşturulduklarında constructer metodları çalışır
Css atama işlemlerinde class yerine className özelliği kullanılır
React'e özgü özelliklerde camelCase yazım formatı vardır
- Örn: className, onClick
Javascript verileri {<js>} arasında kullanılır
onClick metodu {() => <func>} şeklinde javascript fonksiyonları ile kullanılır
- {<func>()} şeklinde kullanılırsa fonksiyon tıklanmadan, direkt olarak çalıştırılır
state'i olmayan props'lar üzerinden çalışan componentlere controlled component denir

State Kavramı

Class component'e özgü verilerdir
Private veriler olarak ele alınır
Constructer içerisinde super'den sonra kullanılır
- super olmak zorundadır
setState({<key>: <value>}) ile güncellenirler

class Square extends React.Component {  constructor(props) {    super(props);    this.state = {      value: null    };  }  render() {    return (      <button className="square" onClick={() => this.setState({ value: "X" })}>        {this.state.value}      </button>    );  }}

Props Kavramı

<Square value={i} />; ile aktarılan veriler props verileridir
this.props şeklinde kullanılır
Constructer'a ihtiyaç duymaz
- super default olarak tanımlanır

class Square extends React.Component {  render() {    return (      <button className="square" onClick={() => alert("click")}>        {this.props.value}      </button>    );  }}

Function Components ve Function Kavramı

Fonksiyonlar html döndüren objelerdir
return ile tek satır döndürülüyorsa paranteze gerek yoktur
return çok satırlı dönüş değerleri için () içerisine yazılır
state değişkeni olmadığından component'e göre daha kolay oluşturulur
onClick kullanımı component'lere göre daha farklıdır
- this deyimine ve () => <func>() yapısna gerek duymaz

function Square(props) {  return (    <button className="square" onClick={props.onClick}>      {props.value}    </button>  );}renderSquare(i) {    return <Square value={this.state.squares[i]} />;}renderSquare(i) {    return (        <Square        value={this.state.squares[i]}        onClick={() => this.handleClick(i)}        />    );}

Function Component Örnekleri

Eğer js işlemi yoksa {} yerine () kullanılır
- Bu sayede return işlemine gerek kalmaz
- İçerisine yazılan direkt olarak return edilir

const Navigation = ({ authUser }) => (  <div>{authUser ? <NavigationAuth /> : <NavigationNonAuth />}</div>);

State'lerde Immutable (Değişmezlik) Yapısı

State'ler değişmeyen veriler barındırır ve fonksiyonlarda slice() işlemi ile kopyaları oluşturulup, onlar değiştirilir.

Karmaşıklığı ortadan kaldırır, geri alma işlemlerinde eski veriye erişim kolay olur
Değişikliği tespit etmesi kolaydır, kopyalanma işlemi değişkenin adresini değiştirecektir
Tekrardan render edilme zamanı çok daha rahat belirlenir

React ile Programlama Yapısı

En alt birimden kodlamaya başlanır
Duruma göre component'in state'leri bir üst birime aktarılır
component'teki state'ler props ile yenilenir
Bu işlem olabilidiğince devam eder

Faydalı Metodlar

<arr>.push ile ekleme işlemi orjinal diziyi değiştirir (immutable olması bozulur)

For veya Map Döngüsü İşlemleri

Döngüsel işlemlerde react hangi objenin değiştiğine karar veremez
Ayırt ediciliğin oluşması için key değeri verilir
key değerinin global olarak eşsiz olmasına gerek yoktur, local olarak olması kafi
key değerine this.props.key gibi işlemlerle erişilemez, rezerve edilmiş bir kelimedir
key={i} ataması sağlıklı değildir, indekslerdeki kayıp durumunda sorun çıkarır

const moves = history.map((step, move) => {  const desc = move ? "Go to move #" + move : "Go to game start";  return (    <li key={move}>      {" "}      {}      <button onClick={() => this.jumpTo(move)}>{desc}</button>    </li>  );});

Hook Yapısı (useSatate)

React v16.8 ile gelen bir özelliktir
Class componentler de olan ama function componentlerde olmayan state yapısı için:
- useState kodu kullanılır
- const [<state>, <handler>] = useState(<value>) formatında kullanımı vardır
- Bu sayede function componentlerde de state'ler kullanılabilir hale gelmekte

Github Üzerinde Yayınlama

package.json dosyasına "homepage":"https://yourusername.github.io/repository-name" alnını ekleyin
npm install --save gh-pages ile gh-pages'i yükleyin
package.json'daki scripts'lere alttakileri ekleyin:
- "predeploy": "npm run build",
- "deploy": "gh-pages -d build"
npm run deploy ile gh-pages'e aktarabilirsiniz 🚀

React Bilgileri

React'ta dom komutları çalışır

SVG alımı

Svg dosyası oluşturulup içine svg ekleniir
- <svg> <g> ...
jsx dosyasından import edilir
img src={svg} şeklinde kullanılır

HTML Gösterme

const html = "HTML verisi";<section>  <article dangerouslySetInnerHTML={{ __html: html }} /></section>;

Ücretsiz React Çalışma Yerleri

Görsel Kaynaklar

- Codesanbox üzerinden deneyebilirsin
- Upload butonu da vardır
- npm install mdbreact

Admin Paneli (Dashboard)

✨ React ile CSS Oluşturma

Oluşturulan stili style = {myStyle} şeklinde kullanabiliriz.

const myStyle = {  fontSize: 19,  color: ...}const myStyle = StyleSheed.create({  fontSize: 19,  color: ...})

Tam Ekran Arkaplan Ayarlama

const imgUrl = "images/bg.jpg"const yStyle = {  backgroundImage: `url(${imgUrl})`,  backgroundPosition: "center",  backgroundSize: "cover",  backgroundRepeat: "no-repeat",  WebkitTransition: "all",   msTransition: "all" }

.ystyle {  background: url(images/bg.jpg) no-repeat center center fixed;   -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}

Transparan Arkaplan

backgroundColor: 'rgba(52, 52, 52, 0.0)' backgroundColor: 'transparent'backgroundColor: '#00000000'

Faydalı Bağlantılar

PreviousNPM NextHeroku

Last updated 1 year ago

Was this helpful?