ReactJS - Bileşenler

Bu bölümde, uygulamanın bakımını kolaylaştırmak için bileşenleri nasıl birleştireceğimizi öğreneceğiz. Bu yaklaşım, sayfanın geri kalanını etkilemeden bileşenlerinizi güncellemenize ve değiştirmenize olanak tanır.

Vatansız Örnek

Aşağıdaki örnekteki ilk bileşenimiz App. Bu bileşenin sahibiHeader ve Content. Biz yaratıyoruzHeader ve Content ayrı ayrı ve sadece JSX ağacımızın içine ekleyerek Appbileşen. Bir tekApp bileşenin dışa aktarılması gerekiyor.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

Bunu sayfada oluşturabilmek için içeri aktarmamız gerekiyor main.js dosyala ve ara reactDOM.render(). Bunu ortamı ayarlarken zaten yaptık.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

Yukarıdaki kod aşağıdaki sonucu üretecektir.

Durum Bilgili Örnek

Bu örnekte, sahip bileşeni için durumu ayarlayacağız (App). Headerherhangi bir duruma ihtiyacı olmadığı için bileşen son örnekteki gibi eklenmiştir. İçerik etiketi yerine oluşturuyoruztable ve tbody dinamik olarak ekleyeceğimiz öğeler TableRow her nesne için data dizi.

Eski JavaScript sözdiziminden çok daha temiz görünen EcmaScript 2015 ok sözdizimini (=>) kullandığımız görülebilir. Bu, öğelerimizi daha az kod satırı ile oluşturmamıza yardımcı olacaktır. Çok sayıda öğe içeren bir liste oluşturmamız gerektiğinde özellikle yararlıdır.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

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

Note - Kullandığımıza dikkat edin key = {i} inside map()işlevi. Bu, React'in bir şey değiştiğinde tüm listeyi yeniden oluşturmak yerine yalnızca gerekli öğeleri güncellemesine yardımcı olacaktır. Dinamik olarak oluşturulan çok sayıda öğe için büyük bir performans artışı sağlar.