آموزش ReactJS

ReactJS – کامپوننت ها

در این آموزش نحوه ی ترکیب کامپوننت ها، را برای ارتقای قابلیت نگهداری برنامه، یاد میگیرین.  این رویکرد این امکان را به شما میده تا بتوانید بدون این روی بقیه صفحه تأثیر بذارین،  کامپوننت ها را تغییر بدین و بروزرسانی کنین.

مثال بدون وضعیت (Stateless)

اولین کامپوننت ما در مثالِ زیر، App است. این کامپوننت مربوط به Header (عنوان) و Content (محتوا) است. Header و Content را هم بصورت جداگانه ایجاد می کنیم و به JSX tree، در کامپوننتِ App اضافه می کنیم. فقط کامپوننتِ App، نیاز به export شدن داره.

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;

برای اینکه این کد را روی صفحه رِندر (render) کنیم، باید در فایلِ main.js، آن را import کنیم و reactDOM.render() را فراخوانی کنیم. همانطور که مشاهده کردین، پیش تر، هنگام انجام تنظیمات محیط، این کار را انجام دادیم.

main.js

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

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

خروجی کد بالا، بصورت زیر خواهد بود:

react components stateless

مثالِ با وضعیت (Stateful)

در این مثال وضعیتِ (state) مالک کامپوننت (App) را تنظیم می کنیم. از آن جایی که کامپوننتِ Header نیازی به وضعیت (state) نداره، آن را همانند مثال قبلی اضافه می کنیم. بجای تگِ content، عناصرِ table و tbody را در جایی که برای هر شیءِ آرایه ی data، TableRow را بصورت پویا اضافه کردیم، ایجاد می کنیم. همان طور که میبینین از دستورِ EcmaScript 2015 arrow(⇒) که نسبت به دستور جاوا اسکریپت واضح ترِه استفاده کردیم. این دستور کمک می کنه تا عناصر را با کدهای کمتری ایجاد کنیم. همچنین این کد زمانیکه بخوایم لیستی را که تعداد زیادی آیتم داره، ایجاد کنیم، بسیار مفید خواهد بود.

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'));

نکته

توجه کنین که از key = {i} در تابعِ map() استفاده کردیم. این کار به React کمک می کنه تا هنگام تغییرات، بجای رِندِرِ مجددِ (re-render) تمام لیست، فقط عناصر مورد نیاز را به روز رسانی کنه. این قابلیت زمانی که تعداد عناصر ایجاد شده بصورت داینامیک زیاد باشه، به طرز قابل توجهی باعث بهبود کارایی میشه.

react components statefull

 

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

سلام.. دستورات کپی نمیشن.. میشه این مشکل رو برطرف کنید..
ممنونم سحر پنجشنبه ۲ شهریور ۹۶
سلام.. دستورات کپی نمیشن.. میشه این مشکل رو برطرف کنید.. ممنونم
سافت اسکیل سافت اسکیل

سلام. روزتون بخیر. مشکل مربوط به این بخش حل شد و در حال حاضر وقتی روی بخش کدها قرار بگیرید، دکمه copy در کنار اونها ظاهر میشه که با زدن اون دکمه میتونید کدها رو کپی کنید. ممنون از توجه و اطلاع رسانیتون

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...