⚛️React

React ile programlamaya giriş

Neden React

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

​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

PreviousNPMNextHeroku

Last updated

© 2024 ~ Yunus Emre Ak ~ yEmreAk