آموزش ReactJS – فصل چهارم: کامپوننت ها (Components)

علاوه بر خوانایی بیشتر کد ها و قابلیت استفاده چندباره از کامپوننت ها، برنامه نویسی با کامپوننت ها به شما کمک می کند تا بتوانید به یک کامپوننت را ویرایش کنید بدون اینکه بر روی سایر قطعات یک صفحه تاثیری داشته باشد.

در این فصل به طور کامل شرح خواهیم داد که چگونه می توانید یک کامپوننت ایجاد کنید و از کامپوننت ها در کد های مختلف استفاده کنید.

ما در اینجا دو نوع مثال را پیش خواهیم رفت، یکی از نوع Stateless (بدون استیت) و یکی از نوع Satefull که در آینده در مورد آن ها بیشتر خواهید آموخت. در حال حاضر فقط کافی است بدانید که State مکانی برای ذخیره داده است.

مثال Stateless

اولین کامپوننت در مثال زیر App است. این کامپوننت حاوی Header و Content است. ما این دو کامپوننت را جداگانه ساخته ایم. ساختن این کامپوننت ها با اضافه کردن کد آنها زیر کلاس App انجام شده است.

در مثال زیر فقط باید کامپوننت App اکسپورت شود (این کد ها را در فایل App.jsx ذخیره کنید):

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

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;

کد زیر را درون فایل index.js کپی کنید:

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

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

مثال بالا نتیجه ای مشابه تصویر زیر خواهد داشت:

مثال Statefull

در این مثال ما state را برای کلاس اصلی که App نام دارد، ست خواهیم کرد.

کلاس header نسبت به کلاس قبلی تغییری نخواهد داشت زیرا از state استفاده نمی کند.

این بار به جای قرار دادن اطلاعات در تگ content ما یک table دارای tbody ایجاد می کنیم. با TableRow ها دیتا را از state گرفته و در ردیف های جدول چاپ می کنیم.  

نشان => که ما در مثال زیر استفاده کرده ایم کد سینتکس EcmaScript 2015 است که از سینتکس اصلی جاوا اسکریپت تمیز تر به نظر می رسد. این روش کمک می کند ما با کد های کمتری به خواسته خود برسیم. این روش مخصوصا در زمانی که لیستی از آیتم ها داریم که می خواهیم کاری با آن ها انجام دهیم کارامد است.

فایل زیر 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;

کد زیر هم که فایل index.js است که دست نخورده نسبت به مثال قبلی:

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

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

توجه: اگر دقت کرده باشید ما از فانکشن key = {i} inside map() استفاده کردیم. این فانکشن به ری اکت کمک می کند که فقط اطلاعات المان های خاص را تغییر دهد نه اینکه کل المان را از اول بسازد. این روش بسیار سریع تر عملیات را انجام می دهد.

تصویر زیر نشان می دهد که کد های بالا چگونه چاپ خواهند شد: