Links

⚛️ React

React ile programlamaya giriş

Neden React

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

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

Last modified 2yr ago