⚛️ React

Neden React

  • Sanal bir DOM oluşturarak DOM üzerinden değişiklik olduğunda tüm kod sanal DOM'a aktarılır ardından sadece değişen kısımları DOM'a aktarır.

  • DOM'a sadece değişenler aktarıldıkları için daha hızlı ve daha senkronize işlem yapılır

React Kullanımı

Online olarak:

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

  • Nodejs kurulumunu gerektirir

  • React'i basit olarak kurmak için buraya bakabilirsin

  • npm init react-app my-app

React IDE

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 🚀

Netlify üzerinden yayınlar isen daha fazla avataja sahipsin 🎈

React Bilgileri

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

Kaynaklar için buradaki makeleye bakmanda fayda var

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: ...})

CSS Oluşturma Teknikleri

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'

Transparan arkaplan

Faydalı Bağlantılar