ری اکت (React) کتابخانه‌ی جاوا اسکریپت (JavaScript) معروف اوبر (Uber) است که این روزها به هرجا نگاه کنید آن را می‌بینید. با یادگیری ری اکت، با روش‌های بسیار جدیدی برای ساخت تجربه‌های فرانت-اند (Front-end Experience) مختلف مثل وب‌سایت‌ها، اپلیکیشن‌های موبایل و غیره آشنا می‌شوید.

با معرفی ری اکت، تغییرات بسیاری صورت گرفت و حالا زمانی مناسب برای ملحق شدن به ارتش ری اکت است. ری اکت کامل است و در فضای وب مختلفی مثل فیسبوک (Facebook)، اینستاگرام (Instagram)، ایر‌بی‌ان‌بی (Airbnb)، اوبر (Uber) و موارد بسیار زیاد دیگری از آن استفاده شده است. بیایید شروع کنیم!

دوره های مرتبط در فرانش

 

ری اکت (React) چیست؟

ری اکت یک کتابخانه‌ی UI (رابط کاربری) است و فیسبوک آن را عرضه کرده است. React این امکان را برایمان فراهم می‌کند که به صورت منطقی درباره‌ی سایت‌ها و اپلیکیشن‌هایمان فکر کنیم.

ری اکت هم‌چنین روشی جالب و سریع برای ساخت پروژه‌هایی است که در خواب می‌بینیم.

ری اکت به ما اجازه‌ی نوشتن اپلیکیشن‌هایی را می‌دهد که:

  • سریع ساخته می‌شوند.
  • قابل فهم هستند.
  • به ما این امکان را می‌دهند که جریان داده (Data Flow) را به صورت منطقی ببینیم.
  • مقیاس‌پذیری بالایی برای تیم‌های برنامه‌نویسی بزرگ و کوچک دارد.
  • دانشِ اپلیکیشن‌های دسکتاپ (Desktop apps) را به اپلیکیشن‌های موبایلی منتقل می‌کند.
  • ری اکت به ما این اجازه را می‌دهد که UIهای تعاملی را به صورت اعلانی (Declarative) بنویسیم. یکی از بزرگ‌ترین توانایی‌های React این است که می‌تواند با هر بار تغییر داده‌هایمان، به صورت خودکار UIمان را نیز به روز‌رسانی کند.

 

در این مقاله‌ی پایه، تمامی ویژگی‌های جذاب و هیجان‌انگیز ری اکت را بررسی می‌کنیم. اپلیکیشن‌هایی می‌نویسیم و تکنیک‌های کاربردی بسیاری را یاد می‌گیریم.
این مقاله برای هر کسی، که می‌خواهد React را از پایه و به روشی مناسب و آرام یاد بگیرد، مناسب است.
به خواندن این مقاله ادامه دهید و به این ترتیب، تمامی دانش لازم را برای استفاده از React به‌دست ‌آورید.

پیشنهاد فرانش به شما
بهترین زبان‌‌ های برنامه نویسی در ۲۰۱۹: ۱۰ زبان برتر برای یادگیری

 

دانش پیشنهادی برای یادگیری ری اکت React (چیزهایی که باید بدانید)

برای نوشتن برنامه‌های ری اکت به اطلاعات پایه‌ی کمی نیاز دارید.
این یکی از بهترین مزایای استفاده از ری اکت است! اگر پس‌زمینه‌ی HTML/CSS/JS دارید، راه‌اندازی و استفاده از React برایتان بسیار آسان می‌شود.

پیشنهاد می‌کنیم که:

  • درباره‌ی HTML و CSS بدانید.
  • درباره‌ی جاوا اسکریپت و ES6 بدانید.
  • کمی درباره‌ی DOM بدانید.
  • کمی درباره‌ی Node و nmp بدانید ( و آنها را نصب کنید.)

در این مقاله‌ی پایه، بیایید فقط ببینیم که چطور می‌توانیم از React استفاده کنیم. بعداً می‌توانیم نگاهی عمیق‌تر به اطلاعات پایه‌ای، که باید بدانیم، داشته باشیم.

پیشنهاد فرانش به شما
اینفوگرافیک: تفاوت ‏HTML‏ و ‏CSS‏ چیست؟

 

بدون ‌معطلی از React استفاده کنید

روش‌های بسیاری برای استفاده از ری اکت در پروژه‌مان در اختیار داریم.
این نیز یکی از مزایای استفاده از React است که خیلی خود را درگیر چگونگی استفاده از آن نمی‌کند. دو روش اصلیِ استفاده از ری اکت به صورت زیر است:

  • React را به وب ‌سایتی که در حال حاضر ساخته‌اید، اضافه کنید.
  • از ری اکت برای نوشتن یک اپلیکیشن کامل تک صفحه‌ای (Single Page App (SPA)) استفاده کنید.

برای اینکه در این مقاله بتوانیم بدون معطلی از ری اکت استفاده کنیم، از CodePen استفاده می‌کنیم.
CodePen مثل یک زمین‌بازی آنلاین برای برنامه‌نویسی است که در آن می‌توانید خیلی ساده و در مرورگر خودتان با کدهای HTML/CSS/JS بازی کنید.
در این مقاله به سراغ جزئیات نصب React نمی‌رویم و از همین ابزار آنلاین استفاده می‌کنیم.

راه‌اندازی یک CodePen

از قبل یک CodePen برای این مقاله ایجاد کرده‌ایم.

React Starter CodePen

وقتی این CodePen را باز کنید، صفحه‌ی زیر را می‌بینید:

توجه: باکس‌های ادیتور (Editor Box) شما می‌توانند در بالای یا گوشه‌های صفحه باشند. می‌توانید مکان‌شان را با استفاده از دکمه‌ی Change View عوض کنید.

گام‌های ساخت این Starter CodePen

برای درک بیشتر، می‌خواهیم تمام کارهایی را، که برای ساخت این React Starter CodePen انجام دادیم، توضیح دهیم. تنها سه گام کوچک (اگر مرحله‌ی Create a CodePen را حساب نکنیم، دو گام):

  1. یک CodePen جدید بسازید (Create a new CodePen)
  2. اسکریپت‌های (script) ری اکت و react-dom را اضافه کنید (روی آیکون تنظیمات در ادیتور JS کلیک کنید)
  3. JS processor را به Babel تغییر دهید، چون در اینجا از ES6 code استفاده می‌کنیم و Babel کد ما را به ES5، transpile (کامپایل سورس به سورس) می‌کند.

هسته‌ی اصلی React در اسکریپت react.js بنا شده است. بقیه‌ی چیزهایی، که ری اکت به آنها برای کار در یک مرورگر نیاز دارد، در react-dom.js قرار دارند.
دلیل جدا شدن این‌ها از هم این است که می‌توانیم از React در فضاهای دیگری به جز یک مررورگر استفاده کنیم. مثلاً ری اکت نیتیو (React Native).

پیشنهاد فرانش به شما
آموزش ری اکت نیتیو برای برنامه نویسی اپلیکیشن iOS با جاوا اسکریپت

همین بود! اینطور این Starter CodePen را ساختیم. صفحه‌ی تنظیمات JSتان باید مثل شکل زیر باشد:

خُب، بیایید ادامه دهیم و کم‌کم از React استفاده کنیم.

 

یک برنامه‌ی React کوچولو!

ری اکت چگونه کار می‌کند؟

ری اکت یک HTML div را می‌گیرد و جاوا اسکریپت را در آن قرار می‌دهد. React تمام کدهای جاوا اسکریپت را در همین بخش از سایت قرار می‌دهد.

افزودن یک HTML div

اول باید یک HTML div بسازیم و بعد می‌توانیم از ری اکت استفاده کنیم. در پنل html، یک div با نام root یا app بسازید.
در دنیای React، نام‌گذاری این div به یکی از این دو نام، نام‌گذاری استاندارد محسوب می‌شود، چون این همان div اصلی است که برنامه‌ی ری اکت‌مان در آن قرار می‌گیرد.

در بخش HTML صفحه‌ی CodePen کد زیر را اضافه کنید:

<div id="root"></div>

این تمام کدی است که در فابل HTML به آن نیاز داریم!

المنت‌های React

حالا که یک div در اختیار داریم، می‌توانیم (بالاخره!) جاوا اسکریپت و اولین قسمت از کد ری اکت‌مان را بنویسیم.

چون فعلاً به قسمت های HTML/CSS نیازی نداریم، می‌توانید آنها را ببندید.

کد زیر را در بخش جاوا اسکریپت بنویسید:

ReactDOM.render(
  <h1>I AM HERE!</h1>,
  document.getElementById('root')
);

حالا چیزی شبیه شکل زیر دارید:

با اضافه کردن اسکریپت‌های react.js و react-dom.js، حالا به اشیاء جاوا اسکریپت React و ReactDOM دسترسی داریم.

ReactDOM.render() دو پارامتر می‌گیرد:

  • المنت (یا کامپوننت که در ادامه می‌بینیم.)
  • المنت HTML که ری اکت در آن چیزهایی را قرار می‌دهد.
پیشنهاد فرانش به شما
ایجاد وب سرور با صفحه HTML به کمک ESP8266

داده در ری اکت

حالا این اپلیکیشن کاربردی‌ای نیست، چون به سایتی نیاز ندارید که همیشه می‌گوید I AM HERE.

بیایید کمی داده برداریم و ببنیم چطور می‌توانیم آن را به اپلیکیشن ری اکت‌مان اضافه کنیم.

در JavaScript، یک متغیر با نام message  بسازیم و آن را نمایش دهیم:

const message = 'i am here to save the day!';

حالا می‌توانیم این متغیر را در ReactDOM.render نمایش دهیم:

const message = 'i am here to save the day!';

ReactDOM.render(
  <h1>my message is: {message}</h1>,
  document.getElementById('root')
);

حالا شکل زیر را داریم:

 

توضیحی مختصر درباره‌ی کامپوننت‌ها (Component) در آموزش ری اکت

تا اینجا یک المنت ری اکت ساختیم و آن را در سایت‌مان نمایش دادیم.
در ادامه می‌خواهیم کامپوننت‌های React بسازیم. کامپوننت‌ها یکی از ابزارهای React هستند که از المنت‌هایی مثل
<h1> و <div> و غیره تشکیل شده‌اند.

یک کامپوننت دقیقاً چیست؟

اگر بخواهیم ساده بگوییم، یک کامپوننت از اجزای زیر تشکیل شده است:

اگر سایت‌ها و اپلیکیشن‌ها را به کامپوننت‌ها تقسیم کنیم، آن وقت می‌توانیم UIمان را به بخش‌های مختلف تقسیم کنیم و به صورت جداگانه با آنها کار کنیم.
با ری اکت ساختن یک کامپوننت به سادگی ساخت یک تابع جاوااسکریپت (Function) است.

با داشتن کامپوننت‌های زیاد، می‌توانیم آنها را به هم وصل کنیم و به هر تعداد که می‌خواهیم، صفحات سایت یا ترکیبی از آنها را بسازیم.
وب‌ سایت‌ها و اپلیکیشن‌ها از کامپوننت‌ها تشکیل شده‌اند.
به سایت‌های
فیسبوک، گوگل و توئیتر نگاهی بیندازید و ببینید آیا می‌توانید کامپوننت‌ها را در آنها تشخیص دهید.

در ادامه می‌خواهیم با هم یک کامپوننت React بسازیم. این کار خیلی ساده است!

 

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

حالا شاید با خود فکر کنید که مثال آخر به چه دردی می‌خورد؟ حالا یک متغیر داریم و آن را با استفاده از ری اکت نمایش دادیم.

خب، چرا این کار را با خود HTML انجام ندهیم؟

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

  • پایگاه داده‌ی خودتان
  • API خودتان
  • از یک API شخص سوم مثل APIهای فیسبوک، گوگل و توئیتر
  • داده‌هایی که در حافظه‌ی مرورگر، مثل localStorage ذخیره شده‌اند

بدون داشتن یک کتابخانه‌ی UI مثل ری اکت، مدیریت داده از چندین منبع مختلف مثل منابع بالا مشکل است. مزیت دیگر استفاده از React این است که وقتی داده‌ی موردنظر را از این منابع بگیریم، می‌توانیم UI را بدون نوشتن کد اضافه به صورت خودکار به‌روز رسانی کنیم. خیلی زود متوجه این جمله می‌شوید.

اگر بخواهیم UI را در HTML ساده به‌روز رسانی کنیم، باید صفحه را ری‌لود (Reload) کنیم.
این مسئله موجب می‌شود کاربرانمان تجربه‌ی کاربری (User Interface) بدی داشته باشند. فرض کنید فیسبوک یا توئیتر مجبور می‌شدند با هربار رسیدن داده‌ی جدید، خود را آپدیت کنند!

آموزش ساخت کامپوننت ری اکت

خب حالا بیایید متغیر message ای که قبلاً ساختیم را حذف کنیم و با استفاده از یک کلاس جاوا اسکریپت یک کامپوننت React بسازیم. در زیر کامپوننت را می‌بینید:

function App() {
  // my component goes here
}

این کد شاید به نظرتان آشنا باشد. حتماً به این دلیل است که این دستور، همان تعریفِ ساده‌ی تابع در جاوا اسکریپت است.

توجه: استانداردهای استایل می‌گوید که نام‌گذاری کامپوننت‌ها باید به صورت PascalCase باشد. اگر یک کامپوننت داشته باشید و بخواهید نام آن را site header بگذارید، باید به صورت SiteHeader نوشته شود.

ما اولین کامپوننت ری اکت‌مان را ساختیم، اما این کامپوننت هنوز کاری برایمان انجام نمی‌دهد. همان‌طور که قبلاً هم گفتیم، کامپوننت‌های ما ترکیبی از جاوا اسکریپت و یک تمپلت (Template) هستند. در React، تمپلت‌ها را با استفاده از JSX می‌نویسیم.

JSX یک syntax extension برای جاوا اسکریپت است، اما در این مقاله، آن را “HTML درون جاوا اسکریپت” در نظر بگیرید.

نکته‌ای درباره‌ی JSX

JSX یک زبان templating است که ری اکت از آن استفاده می‌کند. یادگیری آن برای بسیاری از کسانی، که قصد یادگیری React را دارند، کمی مشکل است.

JSX ترسناک نیست. فقط برنامه‌نویسانی که قبلاً HTML کار کرده‌اند، نمی‌توانند به سینتکس آن عادت کنند.

قضاوت نکنید. اجازه دهید اول چیزهایی را با استفاده از JSX بسازیم و خودتان می‌بینید که آنقدرها هم ترسناک نیست.

اضافه کردن یک تملپت به کامپوننت‌مان

بیایید به سراغ کامپوننت برویم و یک تمپلت به آن اضافه کنیم.

حالا که function یک کامپوننت است، کد جاوا اسکریپت را کجا قرار دهیم و تمپلت را کجا؟ در کامپوننت‌هایِ تابعیِ ری اکت، تمپلت را از کامپوننت return می‌کنیم:

function App() {
  // javascript stuff goes here

  return (
    // template goes here
  );
}

حالا که فهمیدیم تمپلت کجا قرار می‌گیرد، بیایید یک <h1> اضافه کنیم:

function App() {
  // javascript stuff goes here

  return (
    <h1>im in a fancy component now!</h1>
  );
}

حالا که این کامپوننت را داریم، باید به React بگوییم از آن استفاده کند.

پیشنهاد فرانش به شما
۵ دلیل برای یاد گرفتن HTML

 

از کامپوننت جدیدمان استفاده کنیم

در React، با ساخت یک کامپوننت، می‌توانیم از آن مثل یک تگ HTML استفاده کنیم.

مثلاً، در کد زیر App را ساختیم و حالا می‌توانیم در ری اکت مثل <App /> از آن استفاده کنیم. دقت کنید که با یک “/” بسته می‌شود. هنگام استفاده از کامپوننت‌های React باید آنها را با استفاده از نوعی تگ‌های closing ببندیم.

<App />

// or 
<App></App>

برگردیم به سراغ ReactDOM.render() و از آن استفاده کنیم:

function App() {
  // javascript stuff goes here

  return (
    <h1>im in a fancy component now!</h1>
  );
}

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

 

کامپوننت‌ها قابلیت استفاده‌ی مجدد (Reusable) دارند

یکی از مزایای طراحی‌های مبتنی بر کامپوننت این است که می‌توانیم کد را DRY (خودت را تکرار نکن (dont-repeat-yourself)) نگه داریم. می‌توانیم چندین بار از کامپوننت <App /> استفاده کنیم.

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

توجه: در ری اکت، وقتی یک تمپلت تعریف می‌کنید، تنها به یک المنت پدر نیاز دارید. به همین دلیل همه چیز را در یک <div> قرار دادیم.

کامپوننت‌ها ابزارهایی قدرتمند برای ساخت وب سایت و اپلیکیشن هستند. این روزها به هر جای دنیای توسعه‌ی تحت وب نگاه کنید، معماری کامپوننت را می‌بینید.
کامپوننت‌ها در وب کامپوننت‌ها، ری اکت، Vue، انگولار (Angular) و بسیاری از فریمورک‌های دیگر، روشی منطقی برای تقسیم برنامه به قسمت‌های کوچک‌تر هستند.

بیایید به بخش بعدی آموزش برویم و با داده‌ها کار کنیم.

پیشنهاد فرانش به شما
آموزش رایگان انگولار ۸ Angular پروژه محور

 

نمایش داده‌ها

در مثال قبلی و قبل از اینکه از کامپوننت استفاده کنیم، یک متغیر با نام message ساختیم. برای ساخت داده در کامپوننت‌ها گزینه‌های مختلفی داریم:

  • یک متغیر بسازیم (مثل مثال قبل)
  • یک متغیر state بسازیم

ساخت یک متغیر ساده

با روش زیر می‌توانیم مثال قبلی را دوباره بسازیم. مشکل این رویکرد این است که با آپدیت کردن message، تمپلت برای نشان دادن تغییرات آپدیت نمی‌شود.

function App() {
  const message = 'javascript is so cool';

  return (
    <h1>{message}</h1>
  );
}

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

مشکل استفاده از یک متغیر ساده این است که ری اکت با هر بار تغییر دوباره رندر (Render) نمی‌گیرد.
برای اینکه ۱۰۰% از آپدیت شدن تمپلت مطمئن باشیم، از مفهومی به نام
React state استفاده می‌کنیم.

استفاده از React State برای نمایش یک متغیر

وقتی می‌خواهیم به‌روز رسانی خودکارِ متغیرها را در تمپلت داشته باشیم، از state ری اکت استفاده می‌کنیم.
بیایید مثال قبل را تغییر دهیم و از
state React استفاده کنیم.
در این صورت با هر بار تغییر دادن متغیر
message، ری اکت برای نمایش تغییرات از تمپلت دوباره رندر می‌گیرد.

بیایید اول کل کد را بنویسیم و بعد درباره‌اش توضیح دهیم. در کد زیر دستوراتی از جاوا اسکریپت می‌بینید که ممکن است برایتان آشنا نباشد. به آنها array destructuring می‌گوییم.

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  return (
    <h1>{message}</h1>
  );
}

به خط کدی که، useState در آن است، توجه کنید.

const [message, setMessage] = React.useState('javascript is so cool');

به آن array destructuring می‌گوییم.

React.useState دو بخش بهمان می‌دهد:

  • متغیری که آن را message نامیدیم.
  • تابعی برای مقداردهی متغیر که نامش را setMessage گذاشتیم.

می‌توانید هر نامی که دوست دارید برای متغیر و تابع انتخاب کنید. ما نام‌های message و setMessage را انتخاب کردیم، چون می‌خواستیم این نام‌ها را داشته باشند.

درون useState() می‌توانیم مقدار پیش‌فرض متغیر message را تعیین کنیم.

اساساً سه کار انجام دادیم:

  1. یک متغیر message ساختیم.
  2. روشی برای آپدیت کردن متغیر message ایجاد کردیم (setMessage).
  3. مقدرای پیش‌فرض برای message تعیین کردیم.

بیایید حالا مطمئن شویم که تابع setMessage به خوبی کار می‌کند.

پیشنهاد فرانش به شما
تفاوت Angular و React

 

مدیریت تعاملات کاربر (رخدادها Event))

حالا که داده‌هایی را نمایش دادیم، گام بعدی این است که در برنامه منتظر (Listen) ورودی‌های کاربر باشیم و بر اساس آنها کاری انجام دهیم.
می‌خواهیم منتظر (Listen) رخدادی (Event) مثل یک Button Click باشیم.

بیایید یک کار ساده انجام دهیم.

  • یک button می‌سازیم.
  • منتظر یک کلیک می‌مانیم (Listen for a click).
  • با استفاده از تابع setMessage پیغام را به‌روز رسانی می‌کنیم.

ساخت یک Button

دکمه‌ی next را به <h1> اضافه می‌کنیم.
دقت کنید که ری اکت
همیشه یک المنت پدر می‌‌خواهد. همه را در یک المنت <div> قرار می‌دهیم تا تنها یک المنت پدر داشته باشیم.

بیایید buttonای بسازیم که با کلیک روی آن پیغام‌مان آپدیت شود. کامپوننت App را به صورت زیر تغییر دهید تا یک button داشته باشد که با کلیک روی آن تابعی را می‌گیرد:

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  return (
    <div>
      <h1>{message}</h1>
      <button>
        Update the Message!
      </button>
    </div>
  );
}

 

listening for clicks

هر المنت در HTML می‌تواند رخدادهایی مانند click، mouseover، keypress و غیره داشته باشد.

برای listen کردنِ وقوع یک رخداد برای یک المنت React، ابتدای نام رخداد on می‌گذاریم. مثلا اگر منتظر وقوع رخداد click روی یک button باشیم، شناسه‌ای برای onClick اضافه می‌کنیم:

<button onClick={}>Click Me!</button>

در onClick، از {} استفاده می‌کنیم تا به JSX بگوییم که می‌خواهیم هر چیزی را، که در این {} قرار می‌گیرد، بررسی کنیم. 

بیایید یک تابع به onClick اضافه کنیم تا مطمئن شویم که با استفاده از setMessage پیغام‌مان آپدیت می‌شود:

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('my new message')}>
        Update the Message!
      </button>
    </div>
  );
}

بیایید کمی به handler onClick دقت کنیم. در JSX، هر بار بخواهیم که React چیزی را با استفاده از جاوا اسکریپت بررسی کند، از {} استفاده می‌کنیم. چون می‌خواهیم با کلیک روی دکمه تابعی اجرا شود، از {} استفاده کردیم و به آن تابعی دادیم.

می توانستیم همین کار را با نوشتن تابعی در بیرون تمپلت نیز انجام دهیم. کد زیر عملکردی مشابه دارد، اما کد تمپلت را تمیزتر نگه می‌دارد.

function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  function handleClick() {
    setMessage('my new message')
  }

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleClick}>
        Update the Message!
      </button>
    </div>
  );
}

حالا روی دکمه کلیک کنید و ببینید که پیغام به صورت خودکار به‌روز رسانی می‌شود!

با استفاده از state ری اکت، به سادگی می‌توانیم متغیرها را آپدیت و کاری کنیم که ری اکت viewها را به‌روز رسانی کند!

 

مروری بر مطالب

بیایید مروری داشته باشیم بر تمامی مطالبی که در این مقاله بررسی کردیم:

  • با استفاده از react.js و react-dom.js یک اپلیکیشن React نوشتیم.
  • با استفاده از ReactDOM.render از ری اکت در یک HTML div رندر گرفتیم.
  • داده‌های React را نمایش دادیم.
  • عمل listening را روی رخدادهای React انجام دادیم.
  • از state ری اکت استفاده کردیم.
  • متغیرها را آپدیت کردیم و ری اکت، UI را برای ‌ما به‌روز رسانی کرد.

بسیاری از مطالب اصلی را در این مقاله پوشش دادیم. این مفاهیم در هر اپلیکیشن ری اکتی که در آینده می‌سازید، استفاده خواهند شد!

 

نتیجه‌گیری

در این آموزش تنها به مطالب پایه‌ی ری اکت پرداختیم. مفاهیم بسیار دیگری نیز هستند که باید یاد بگیرید:

  • ساختن اپلیکیشن‌های ری اکت به روش‌های مختلف
  • آشنایی بیشتر با کامپوننت‌ها
  • اپلیکیشن‌های Routing
  • فرم‌ها و اعتبارسنجی آنها (Validation)
  • Redux
  • استایل کامپوننت‌ها با استفاده از Sass و CSS-in-JS
  • انیمیشن‌ها

دوره های مرتبط در فرانش

 

ویدیو آموزش React :

در صورتی که مطلب یادگیری ری اکت React برای شما مفید بوده است:

برای یادگیری بیشتر دوره های آنلاین آموزش React را مشاهده نمایید.