Bu yazimda React nedir nasil kullanilir kisaca ondan bahsedecegim.
React bir framework degil bir kutuphanedir. Uygulamalarin UI kismini tasarlamak icin Facebook tarafindan tasarlanmistir. MVC'nin View kismina denk gelir. Virtual DOM uzerinden calisir. Bu sekilde de performans sorununu asmis olur. JS icinde Html kod yazmamizi saglar. Bunu saglayan yapi JSX dir. Facebook u dusunelim. Mesajlasirken sayfayi yenilemeye gerek olmadan mesajlar bize gelir ya da kisi listemizdeki online olan kisileri anlik olarak sag taraftan gorebiliriz. Bunlari sayfayi yenilemeden yapariz. Yani sadece sayfada degisiklik olan kisimlar yeniden render edilir. Bunlari goz onune alinca React'in calisma mantigini anlamak bir nebze daha kolay olabilir.
Virtual DOM Nedir?
Gercek DOM'un bir kopyasi olusturulur. Yapilan degisiklikler VirtualDOM uzerinde yapilir. Daha sonra gercek DOM ile karsilastirilir ve sadece farklilik olan kisimlar gercek DOM'da yeniden render edilir. Bu sekilde tum sayfa yeniden render edilmedigi icin, sadece degisiklik olan kisim yeniden render edilir, performans sorunu olmaz.
- React component yapisini kullanir.
Component Nedir?
Tasarimda var olan birbirinden bagimsiz yapilardir. Idempotent dir. Yani diyelim sayfada birbirninin aynisi tasarimda sadece icerigi degisecek kisimlar var. Bunlari yapmak icin ayni kodu kopyala yapistir yapmak yerine component yapisini kullaniriz. 2 tip component vardir: Functional component ve class component. Bunlari asagida anlatiyor olacagim.
Component icinde render() fonksiyonu cagrilir ve icinde return edilir.
- React props kullanir.
Props Nedir?
Props icerigi sabit datalardir. Component icinde kullanacagimiz degiskenlerimiz ana component den degerleri setlenmis olarak gonderilir. Biz componentimizde sadece kullaniriz, modify edemeyiz.
this.props.*** diyerek degerine erisebiliriz.
Ornek kullanim:
Ana component de su sekilde setleyelim:
const prop_sabiti = "Prop sabiti";
<XComponent ilk_prop={prop_sabiti} />
Daha sonra XComponent e gectigimizde, props degerini kullanacagimiz component, degere su sekilde erisiriz.
{this.props.ilk_prop}ana component:
<Person name="Gamze"/>
Person Component inde ise su sekilde yazariz:
import React from 'react';
export class Person extends React.Component{
render(){
return(
<div>
Merhaba {this.props.name}
</div>
);
}
}
}
- React'ta state kullanilir.
State Nedir?
Icerigi degisebilen datalardir.
Asagida bir ornekle gorelim. Butona tiklandikca gosterilen degeri arttiran bir counter yazalim.
class App extends Component {
constructor(){
super();
this.state = { counter : 0};
this.increment = this.increment.bind(this);
}
increment(){
this.setState({counter : this.state.counter +1});
}
render(){
return (
<div>
<button onClick={this.increment}>Arttir</button>
<h3>Deger: {this.state.counter}</h3>
</div>
);
}
- React'ta JSX kullanilir.
JSX Nedir?
Javascript icine html kodlari yazmamizi saglar. Render icine yazilan kodlardir. Ancak statik html kodlari ayni sekilde burda calismayabilir.
Ornegin:
<div class="style">....
Bu koddan anladigimiz style.css adinda bir dosyamiz var div css leri bu dosyadan okuyacak. Ancak JSX de bu kod calismaz. Ve su sekilde hata verir:
index.js:1 Warning: Invalid DOM property `class`. Did you mean `className`?
Zaten hata mesaji da aciklayici. Bunun yerine
<div className="style">
seklinde yazmamiz gerekir.
- Inline style vermek icinse asagidaki gibi kullanabiliriz.
<h3 style={{color:"red", fontSize:"20px"}}>Yeni deger :
{this.props.sayi}</h3>
Functional Component Nedir?
Bu zamana kadar kullandigimiz componentlar class idi.class olarak olusturup React.Component dan extend ediyorduk. Bunlar render icinde return ediyorlardi.
Functional component ise sadece JSX return edecek, render olmayacak. Navbar adinda bir component olsuturalim ve bunun icinde sadece bir baslik yazsin.
Bu zamana kadar kullandigimiz componentlar class idi.class olarak olusturup React.Component dan extend ediyorduk. Bunlar render icinde return ediyorlardi.
Functional component ise sadece JSX return edecek, render olmayacak. Navbar adinda bir component olsuturalim ve bunun icinde sadece bir baslik yazsin.
import React from 'react';
export default function navbar() {
return (
<div>
<h3>Your Navbar</h3>
</div>
);
}
Bu sekilde olusturup export ettik. Kullanimi ise import ederken {} olmayacak.
import Navbar from './components/navbar';
seklinde olacak.
<Navbar />
diyerek sayfamizda yaziyi gosterecegiz. Bu functional component olusturmayi lambda ile su sekilde de yapabiliriz.
import React from 'react';
const navbar = () => {
return (
<div>
<h3>Your Navbar</h3>
</div>
);
}
export default navbar;
Functional Component Props Kullanimi
Functional componentlerde props kullanmak icin celebrity adli functional componentimizi olusturalim.
export default function celebrity() {
return (
<div>
<ul>
<li>Name : Monica Geller</li>
<li>Movie : Friends</li>
<li>Age : 28 </li>
</ul>
</div>
)
}
Burada gordugumuz gibi bilgiler statik yaziyor. Biz bu bilglerin ana component ten gonderilmesini istiyoruz. Bunu props kullanarak yapacagiz.
export default function celebrity(props) {
return (
<div>
<ul>
<li>Name : {props.name}</li>
<li>Movie : {props.movie}</li>
<li>Age : {props.age} </li>
</ul>
</div>
)
}
Celebrity componentimizi yukardaki gibi guncelledik. Simdi de main componentimize gecelim.
<Celebrity name="Monica Geller" movie="Friends" age="28"/>
Bu sekilde de ayni islemi yaptik. Birden fazla celebrity compentini ayni sayfada gosterebiliriz artik.
Bir de desctructing objects kullanarak bu isi daha kisa halledebiliriz. Cunku eger cok fazla props olursa tek tek yazmakla ugrasmamiz gerekir.
Bunu da asagidaki sekilde yapariz.
export default function celebrity(props) {
const {name, movie, age} = props;
return (
<div>
<ul>
<li>Name : {name}</li>
<li>Movie : {movie}</li>
<li>Age : {age} </li>
</ul>
</div>
)
}
PROP TYPES
Proplar icin type belirtebiliriz. Ornegin navbar component uzerinden gidelim. Gelecek olan title props u string olmali ve mutlaka gonderilmeli. O halde su sekilde guncelleyelim.
import React from 'react';
import PropTypes from 'prop-types';
const navbar = (props) => {
return (
<div>
<h3>{props.title}</h3>
</div>
);
}
export default navbar;
navbar.propTypes = {
title : PropTypes.string.isRequired
}
Main component ten title props unu gondermezsek ekranda bir sey yazmayacaktir.
Eger bir sey gonderilmezse default bir deger kullanmak istiyorsak =>
navbar.defaultProps = {
title : "Navbar"
}
bu sekilde yazmamiz yeterli olacaktir.
Celebrity componentini class component e cevirdim. Default degerleri ilk basta statik olarak da atayabiliriz. Asagidaki ornekten gorebilirsiniz.
import React from 'react'
import PropTypes from 'prop-types';
export default class celebrity extends React.Component {
static defaultProps = {
name : "NA",
movie : "NA",
age : "NA"
}
render(){
const {name, movie, age} = this.props;
return (
<div>
<ul>
<li>Name : {name}</li>
<li>Movie : {movie}</li>
<li>Age : {age} </li>
</ul>
</div>
)
}
}
celebrity.prototypes = {
name : PropTypes.string.isRequired,
movie : PropTypes.string.isRequired,
age : PropTypes.string.isRequired
}
