React

Ahmet  DENİZ

React Nedir ?

Facebook tarafından geliştirilen kullanıcı arayüzü oluşturmayı kolaylaştiran bir JavaScript kütüphanesidir.

Tarihçe

Facebook 2013 yılında instagram'ı satın aldığında instagram'ın bir web sitesi yoktu. Instagram'a bir web sitesi yapmak için React facebook codebase'inden ayrılarak opensource bir kütüphane olarak yayınlandı.

Kullanılan Yerler

React'in Avantajları

• Verinin zaman içerisinde değiştiği büyük uygulamaları basit ve hızlı bir şekilde geliştirmeye olanak sağlar.

• Herşeyin Component olması.

• Saf javascript'e yakın olması

• Öğrenmenin kolay olması.

Verinin Zaman İçerisinde Değiştiği Uygulamalar

React data her değiştiğinde componentde bizim yerimize F5 yapar.

Peki React bunu nasıl yapıyor ?

React Consepti

Virtual DOM(Document Object Model )

React her bir elemanı javascript objesinde saklar.

Bir değişiklik olduğunda objelerin bulunduğu arrayleri karşılaştırır.

Farklılıkları eski arayüze entegre eder.

Component

Bir web sayfasının en küçük yapı birimidir.

Legolar gibilerdir bir araya gelerek yapıları oluştururlar.

Lifecycle

Hello World

import React from 'react';
import ReactDOM from 'react-dom';

export default class About extends React.Component {
  render(){
    return(
      <div>
        Hello World
      </div>
    )
  }
}

ReactDOM.render(<About />, document.getElementById('app'))

React.createElement("div", null , "Hello World")

JSX

Click Me !

import React from 'react';

export default class Click extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      clicked: false
    }
  }
  handleClick(){
    this.setState({clicked : true})
  }
  render(){
    return(
      <div onClick={this.handleClick.bind(this)}>
        {this.state.clicked ? 'Clicked!' : 'Click Me'}
      </div>
    )
  }
}

Sayaç

import React from 'react';

export default class Sayac extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      sayac : 0
    }
  }
  artir(){
    this.setState({sayac : this.state.sayac + 1})
  }
  render(){
    return(
      <div className="container">
        Sayaca {this.state.sayac} kez tıkladınız.
        <button onClick={this.artir.bind(this)}>Artir</button>
      </div>
    )
  }
}

Todo

import React from 'react';

export default class Click extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      list:[]
    }
  }
  handleClick(){
    var item = this.refs.todo.value;
    this.state.list.push(item);
    item = [];
    this.setState({list:this.state.list})
  }
  render(){
    return(
      <div>
        <input ref="todo" />
        <button onClick={this.handleClick.bind(this)}> Add </button>
        <ul>
          {
             this.state.list.map(function(item, index){
                return (<li key={index}>{item}</li>)
              })

          }
        </ul>
      </div>
    )
  }
}