آموزش کامپوننت ها در ریکت قسمت دوم برای طراحی فرانت سایت

راه اندازی یک محیط React

1. برای راه اندازی ریکت ابتدا وارد سایت nodejs.org شوید 
2. node.js نصب میکنیم .نکته مهم این است که ما به خود nodejs نیاز نداریم ما به پکیج منیجری که با آن نصب میشود نیاز داریم
3.  پیشنهاد میشود ورژن LTS را دانلود کنید و با چندتا next ساده , نصب انجام میشود
4. cmd خود را باز کنید و به فولدر که میخواهید پروژه در آن قرار بگیرد بروید 
5. npx create-react-app my-react-app
6. به واسطه npx تمام پکیج ها و dependency ها با اخرین ورژن موجود نصب میشود
7. با دستور cd my-react-app وارد فولدر مربوطه میشویم
8. برای استارت پروژه کد npm start  را میزنیم

به این صورت به پکیج ریکت دسترسی پیدا میکنیم  

زمانی که به این قسمت از طراحی سایت با  ریکت میرسیم قاعدتا شما باید با اصطلاحاتی مانند ES6 و کاربردهای آن آشنا شده باشید

component در ریکت

 کامپوننت ها بخش بسیار مهمی از اپلیکیشن ریکت هستند که باعث میشوند

1.  کد هارو قابل تکرار میکنند یا به اصطلاح reusable میشوند
2. کد ها خواناتر و تمیزتر میشود 
3. دیباگ کردن کدها بسیار راحتتر میشود

روش های تعریف کامپوننت ها

1. class component
2. function component 

یکی از تفاوت های آنها این است که در class based component حتما باید از react.component ارث بری کند 

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

البته  از ریکت ۱۶.۸ ویژگی جدیدی به اسم هوک بوجود آمد که میتوانیم از state ها به شیوه ای استفاده کنیم

یکی از مزایای استفاده از stste ها این است که با تغییر آنها باعث rerender شدن کامپوننت میشوند .

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

تعریف props در ریکت

اولین مبحث بعد از کار با کامپوننت ها استفاده از props است

زمانیکه داده ای را برای یک کامپوننت ارسال میکنیم در آن کامپوننت باید از طریق props آن را دریافت کنیم

React Props مانند آرگومان های تابع در جاوا اسکریپت و ویژگی ها در HTML هستند.