­čžČ React

React ├╝zerine ├žal─▒┼čmalar─▒m ve bilgilerim.

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:

  • ÔÇőCodeSandbox ├╝zerinden ├žal─▒┼čabilirsin

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 Component
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
ÔÇő
// Function
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

// Buradaki authUser props'dan gelen anlam─▒na gelir.
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

Method

A├ž─▒klama

Array<num>.fill(<value>)

Dizi tan─▒mlamas─▒

<arr>.slice()

Diziyi kopyalama

<arr>.concat([{}])

Diziye obje dizisi ekleme (immutable)

<arr>.map((<val>, <i>) => {<code>})

Dizideki t├╝m elemanlara i┼člem yapma

<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}>
{" "}
{/* Key kullan─▒m─▒ gerekir */}
<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: ...
}
// Eski y├Ântem
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", // note the capital 'W' here
msTransition: "all" // 'ms' is the only lowercase vendor prefix
}
.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)' // 0.0 opakl─▒k de─čeridir
backgroundColor: 'transparent'
backgroundColor: '#00000000' // ##rrggbbaa hex codes

ÔÇőTransparan arkaplanÔÇő

Faydal─▒ Ba─člant─▒lar