سلام. تو این آموزش میخوایم یه نگاه سریع به مفاهیم پایه ای کتابخانه react بندازیم. و یه اپ خیلی ساده بسازیم. در پایان این آموزش شما شناخت کلی در مورد نحوه کار با React پیدا میکنید و میتونید بصورت جدی تر یادگیری اون رو شروع کنید. برای شروع ما انتظار داریم شما:

  • برنامه نویس باشید
  • HTML بلد باشید
  • جاوا اسکریپت بلد باشید
  • و برای یادگیری React اومده باشید ))

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

شروع کار

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

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
    /* 
    ADD REACT CODE HERE 
    */
    
    </script>
</body>
</html>

همونطور که میبینید ما از CDN به نام unpkg فایل های مورد نیازمون رو import کردیم که شامل React و babel هست. babel رو به این خاطر اضافه کردیم که هم کدهای ما تو مرورگرهای قدیمی تر اجرا بشن هم کدهای JSX برای مرورگر قابل فهم باشه چون ما تو کدها از JSX استفاده میکنیم. هرچند امکانش هست که از JSX استفاده نکنیم اما کارمون یکم سخت میشه. در این رابطه میتونید React without JSX رو و همچنین توضیحات مربوط به JSX رو مطالعه کنید.

همچنین دو نکته دیگه هم تو کد بالا هست که عبارت اند از:

  1. ما به المنت DIV شناسه #root دادیم که از این شناسه برای شروع کردن اپ ریکت نیاز داریم یعنی محتوای داخل #root اپ ریکت ما رو تشکیل میده.
  2. المنت <script type="text/babel"> در داخل المنت body جاییه که میتونیم توش کدهای React رو بنویسیم.

کامپوننت ها Components

کامپوننت معمولا به عناصری گفته میشه که مجزا از برنامه هستن و ساخته میشن تا بارها در برنامه مورد استفاده قرار بگیرن(reusability) بدون اینکه نیاز باشه کدهای تکراری بنویسیم و خودمون رو تکرار کنیم. مثلا یه input یا یه دیالوگ که پیام های مختلف نشون میده، یه دکمه، select و... اما تو React، این کامپوننت ها هستند که اپ شما رو تشکیل میدن یعنی همه چیز کامپوننت هست. نحوه ساخت کامپوننت هم خیلی ساده با extend کردن کلاس component انجم میشه. به این شکل:

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

شما میتونید متدهای مورد نیازتون رو برای کامپوننت خودتون بسازید. اما ما برای شروع فقط یه متد به نام render داریم. داخل متد render شما باید هر چیزی که باید درخروجی نمایش داده بشه return کنید. تو این مثال ما یه کد ساده برای نمایش رشته hello world در داخل تگ h1 گذاشتیم. حالا برای استفاده از این کامپوننت باید به شکل زیر عمل کرد:

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

اطلاعات بیشتر در مورد render

کد ما تا به اینجا:

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
		
		class Hello extends React.Component {
		    render() {
		        return <h1>Hello world!</h1>;
		    }
		}
	
		ReactDOM.render(
		    <Hello />, 
		    document.getElementById("root")
		);

    </script>
</body>
</html>

بعد از اجرای برنامه باید پیام مورد نظر رو در مرورگر ببینید:

تا اینجا که اصلا چیز خاصی نبود درسته؟ از این به بعدم همینه! البته همونطور که گفتم تو این پست آموزشی فقط هدف ما آشنایی مقدماتی با React هست و مباحث پیشرفته تر رو اینجا پوشش نمیدیم.

کنترل داده ها در React

ما دو نوع داده در ریکت داریم: props(مخفف Properties) و state. این دو تقریبا مشابه هم هستن با این تفاوت که props از خارج از کامپوننت مقدار رو میگیرهو در داخل قابل تغییر نیست اما state از داخل کامپوننت قابل تغییر و تعریف هست.

Props

همونطور که میبینید الان کامپوننت hello خیلی ساده و استاتیک هست. یعنی قابل چیزی توش تغییر نمیکنه. هر بار که این کامپوننت رو رندر میکنیم همین پیام کلیشه ای hello world رو نشون میده. اما حالا میخوایم این رو کمی بهتر و داینامیک کنیم تا بشه به افراد مختلف سلام کرد! برای اینکار از props استفاده میکنیم. نحوه تعریفش هم بسیار سادست. تکه کدی که برای رندر کردن استفاده میکردیم رو میشه به این صورت تغییر داد و یه props به نام message به کامپوننت hello اضافه کرد:

ReactDOM.render(
    <Hello message="my friend" />, 
    document.getElementById("root")
);

اما هنوز کامپوننت ما داینامیک نشده ما نیاز داریم تا مقدار prop رو در داخل کامپوننت hello بگیریم. message که اینجا prop ما هست به این صورت قابل دسترسیه: this.props.message حالا برای ادامه ما کامپوننت hello رو به این شکل تغییر میدیم:

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

اگر اپ رواجرا کنید تو صفحه شما این پیام نشون داده میشه:

توجه کنید که ما عبارت this.props.message رو داخل curly brace ({...})گذاشتیم. این کار باعث میشه که JSX بدونه این یه عبارت معنی داره اگر اینارو نذارید دقیقا همون عبارت رو بصورت plain چاپ میکنه.

خوب حالا میشه گفت ما یه کامپوننت واقعی ساختیم! ایول!!

State

خوب بعد از props میرسیم به state که راه دیگه ای برای ذخیره اطلاعات تو React هست. با این تفاوت که میشه State رو در داخل کامپوننت تغییر داد. مثل متغیرهای داخل یک تابع.

مقداردهی State

برای تعریف state فقط نیازه که this.state رو داخل متد constructor() ست کنیم. پس به کد بالا متد constructor() رو اضافه میکنیم:

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
    }
    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

متد super() که یه متد جاوا اسکریپت هست، برای کار کردن this.state در اینجا لازمه که باعث میشه prop های کلاس والد که extend شده داخل کلاس فعلی قابل دستیابی باشه. اطلاعات بیشتر در What does calling super() in a React constructor do? .

تغییر State

تغییر یه State هم بسیار سادست که با this.setState() انجام میشه. برای تست اینجا ما یه دکمه میذاریم برای تغییر دادن State و عملیات تغییر State رو توی یه متد به نام updateMessage انجام میدیم:

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }

    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }    

    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

برای اینکه this توی متد updateMessage کار کنه باید اون رو بایند کنیم به متد که این کار رو توی لاین ۸ انجام دادیم:

this.updateMessage = this.updateMessage.bind(this);

و آخرین گام اضافه کردن دکمه برای تغییر State و اجرای رویداد هست. پس بیاین متد render رو به این شکل تغییر بدیم:

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>   
  )
}

حالا وقتی اپ رو اجرا کنید و روی دکمه کلیک کنید باید رویداد اجرا بشه و با تغییر State متن پیام تغییر کنه.

کل کد ما این شد:

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
		
		class Hello extends React.Component {
		    
		    constructor(){
		        super();
		        this.state = {
		            message: "my friend (from state)!"
		        };
		        
		        this.updateMessage = this.updateMessage.bind(this);
		        
		   }
		
		    updateMessage() {
				
		        this.setState({
		            message: "my friend (from changed state)!"
		        });
		    }    
		
			render() {
			  return (
			     <div>
			       <h1>Hello {this.state.message}!</h1>
			       <button onClick={ this.updateMessage}>Change State</button>
			     </div>   
			  )
			}
		}
	
		ReactDOM.render(
		    <Hello />, 
		    document.getElementById("root")
		);

    </script>
</body>

تبریک میگم! شما یه اپ ساده تو React ساختید و با اصلی ترین مفاهیم React آشنا شدید. برای یادگیری بیشتر میتونید به صفحه پروژه به آدرس reactjs.org مراجعه کنید. لطفا اگر اشتباهی پیدا کردید اطلاع بدید تا اصلاح بشه. اگر براتون مفید بود این رو به بقیه هم معرفی کنید