⚛️ React
React ile programlamaya giriş
Online olarak:
Bilgisayarın üzerinden çalıştırmak için:
- Tüm classlar
React.Component'i extends etmek zorundadır render(<html>)ile html yorumlanırreturnedilen html metni ekrana basılır- HTML verileri
<div>arasında olmak zorundadır
- Oluşturulduklarında
constructermetodları çalışır - Css atama işlemlerinde
classyerineclassNameö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 onClickmetodu{() => <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 olmayanprops'lar üzerinden çalışan componentlere controlled component denir
- Class component'e özgü verilerdir
- Private veriler olarak ele alınır
- Constructer içerisinde
super'den sonra kullanılırsuperolmak 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> ); }}
<Square value={i} />;ile aktarılan veriler props verileridirthis.propsşeklinde kullanılır- Constructer'a ihtiyaç duymaz
superdefault olarak tanımlanır
class Square extends React.Component { render() { return ( <button className="square" onClick={() => alert("click")}> {this.props.value} </button> ); }}
- Fonksiyonlar html döndüren objelerdir
returnile tek satır döndürülüyorsa paranteze gerek yokturreturnçok satırlı dönüş değerleri için()içerisine yazılırstatedeğişkeni olmadığından component'e göre daha kolay oluşturuluronClickkullanımı component'lere göre daha farklıdırthisdeyimine 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)} /> );}
- Eğer js işlemi yoksa
{}yerine()kullanılır- Bu sayede
returnişlemine gerek kalmaz - İçerisine yazılan direkt olarak return edilir
const Navigation = ({ authUser }) => ( <div>{authUser ? <NavigationAuth /> : <NavigationNonAuth />}</div>);
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
- 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
<arr>.pushile ekleme işlemi orjinal diziyi değiştirir (immutable olması bozulur)
- Döngüsel işlemlerde react hangi objenin değiştiğine karar veremez
- Ayırt ediciliğin oluşması için
keydeğeri verilir keydeğerinin global olarak eşsiz olmasına gerek yoktur, local olarak olması kafikeydeğerinethis.props.keygibi işlemlerle erişilemez, rezerve edilmiş bir kelimedirkey={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> );});
- React v16.8 ile gelen bir özelliktir
- Class componentler de olan ama function componentlerde olmayan state yapısı için:
useStatekodu kullanılırconst [<state>, <handler>] = useState(<value>)formatında kullanımı vardır- Bu sayede function componentlerde de state'ler kullanılabilir hale gelmekte
package.jsondosyasına"homepage":"https://yourusername.github.io/repository-name"alnını ekleyinnpm install --save gh-pagesile gh-pages'i yükleyinpackage.json'daki scripts'lere alttakileri ekleyin:"predeploy": "npm run build","deploy": "gh-pages -d build"
npm run deployile gh-pages'e aktarabilirsiniz 🚀
- React'ta dom komutları çalışır
- Svg dosyası oluşturulup içine svg ekleniir
<svg> <g> ...
jsxdosyasındanimportedilirimg src={svg}şeklinde kullanılır
const html = "HTML verisi";<section> <article dangerouslySetInnerHTML={{ __html: html }} /></section>;
- Codesanbox üzerinden deneyebilirsin
- Upload butonu da vardır
npm install mdbreact
Oluşturulan stili
style = {myStyle} şeklinde kullanabiliriz.const myStyle = { fontSize: 19, color: ...}const myStyle = StyleSheed.create({ fontSize: 19, color: ...})
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;}
backgroundColor: 'rgba(52, 52, 52, 0.0)' backgroundColor: 'transparent'backgroundColor: '#00000000'
Last modified 2yr ago