آموزش React-آموزش State های ReactJS

سلام انشالله همه سلامت باشید و این ویروس هم به زودی ریشه کن شود

در قسمتهای قبل :

در قسمت اول : آموزش React با کاربرد آن آشنا شدیم

در قسمت دوم : نصب ReactJS را یاد دادیم و یک پروژه انجام دادیم

در قسمت سوم : JSX در ReactJS را فرا گرفتیم

در قسمت چهارم : با کامپوننت ها در React آشنا شدیم

حال با قسمت 5 آموزش Reactjs با ما همراه باشید

حالت(State) های ReactJS:

حالت State مکانی است که داده ها از آن سرچشمه می گیرند. همواره بهتر است تا حد امکان حالت خود را ساده در نظر بگیریم و تعداد اجزای حالت دار را به حداقل برسانیم. مثلا اگر ده جزء داشته باشیم که داده هایی را از حالتی نیاز دارند، بهتر است یک جزء نگهدارنده را ایجاد کنیم که این حالت را برای تمامی این اجزا نگهداری کند.

استفاده از Props در ReactJS

در نمونه کد زیر چگونگی ایجاد یک جزء حالت دار با استفاده از سینتکس EcmaScript2016 نشان داده شده است.
App.jsx

import React from 'react';

class App extends React.Component {

   constructor(props) {

      super(props);

      this.state = {

         header: &quotHeader from state...&quot,

         content: &quotContent from state...&quot

      }

   }

   render() {

      return (

         < div >

            < h1 >{this.state.header}< /h1 >

            < h2 >{this.state.content}< /h2 >

         < /div >

      );

   }

}

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

این کار باعث می شود نتیجه ی زیر نمایش داده شود.

پایان قسمت پنجم آموزش Reactjs

این آموزش تصویری ادامه دارد