مقدمه ای برای React: اصول اولیه برای مبتدیان

Summarize this content to 400 words in Persian Lang
سلام به همه! 👋 من مارکو هستم، دانشجوی مهندسی کامپیوتر، و می‌خواهم به شما در این دوره مینی React خوشامد بگویم.

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

React چیست؟

بیایید از ابتدا شروع کنیم: React چیست؟ 🤔

React یک کتابخانه جاوا اسکریپت است که توسط فیس بوک در سال 2013 برای ایجاد رابط های کاربری، به ویژه برای برنامه های کاربردی وب تک صفحه ای (SPA) ایجاد شد. یعنی React به ما اجازه می دهد تا اجزای قابل استفاده مجدد بسازیم که اساس برنامه های وب ما را تشکیل می دهند. اگر تا به حال به این فکر کرده اید که اپلیکیشن های بزرگی مانند فیس بوک یا اینستاگرام چقدر سریع و تعاملی هستند، React بخشی از جادوی پشت آن است!

تاریخچه و تکامل React

اگرچه React در سال 2013 متولد شد، اما داستان آن کمی زودتر آغاز می شود، زمانی که مهندسان فیس بوک به دنبال راه حلی برای بهبود عملکرد و تجربه کاربری در پلتفرم خود بودند. React پاسخ آن‌ها به این چالش‌ها بود و از آن زمان به بعد دائماً تکامل یافته و محبوبیت پیدا کرده و به یکی از پرکاربردترین فناوری‌ها در توسعه وب تبدیل شده است.

از زمان راه‌اندازی، React با یک جامعه پر جنب و جوش و فعال که دائماً در بهبود آن نقش دارد، رشد کرده و قوی‌تر شده است. و اکنون، شما نیز بخشی از این جامعه هستید!

مزایای استفاده از React

چرا React اینقدر محبوب شده است؟ خوب، چندین دلیل وجود دارد که React را به یک انتخاب عالی برای توسعه برنامه های کاربردی وب مدرن تبدیل می کند:

اجزای قابل استفاده مجدد: در React همه چیز بر اساس کامپوننت است. این بدان معنی است که شما می توانید بلوک های کوچکی از کد ایجاد کنید که می توانند در بخش های مختلف برنامه خود مجددا استفاده شوند. کار کمتر، کارایی بیشتر!
DOM مجازی: React از مفهومی به نام Virtual DOM استفاده می‌کند تا فقط بخش‌هایی از رابط را که تغییر کرده‌اند به‌روزرسانی کند، نه اینکه کل صفحه را بارگذاری مجدد کند. این باعث می شود برنامه های React بسیار سریع باشند.
جامعه و اکوسیستم بزرگ: React یک جامعه توسعه دهندگان بزرگ دارد، به این معنی که منابع، کتابخانه ها و ابزارهای زیادی برای آسان کردن کار شما در دسترس است.
یادگیری آسان: اگر از قبل جاوا اسکریپت را می‌دانید، یادگیری React نسبتا آسان است. به علاوه، زمانی که React را یاد بگیرید، پایه محکمی برای یادگیری سایر فناوری‌های مرتبط مانند Next.js خواهید داشت.

نصب و پیکربندی محیط

وقت آن است که دستمان را کثیف کنیم! 🛠️

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

Node.js را نصب کنید: ابتدا باید Node.js را روی دستگاه خود نصب کنید. Node.js یک محیط اجرایی برای جاوا اسکریپت است که به ما امکان می دهد از ابزارهایی مانند npm (مدیر بسته نود) یا yarn برای مدیریت وابستگی های خود استفاده کنیم. Node.js را می توانید از سایت رسمی آن دانلود کنید.
یک برنامه React جدید ایجاد کنید: هنگامی که Node.js را نصب کردید، ترمینال یا خط فرمان خود را باز کرده و دستور زیر را اجرا می کنید:

npx create-react-app my-first-react-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

با این کار یک پوشه جدید به نام my-first-react-app با تمام فایل های مورد نیاز برای شروع کار بر روی اولین برنامه React ایجاد می شود.

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

cd my-first-react-app
npm start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و بس! پنجره ای در مرورگر شما باز می شود که اولین برنامه React شما در حال اجرا است. 🎉

اولین کامپوننت React

بیایید اولین کامپوننت خود را در React ایجاد کنیم. آیا شما آماده اید؟ بیا بریم اونجا!

در React، کامپوننت ها مانند بلوک های سازنده هستند. می توانید آنها را به عنوان قطعات کوچک لگو در نظر بگیرید که در کنار هم یک برنامه کامل را تشکیل می دهند. بیایید یک جزء فوق العاده اساسی ایجاد کنیم که به سادگی می گوید “سلام، جهان!”

فایل را باز کنید src/App.js در ویرایشگر متن مورد علاقه شما

محتوایی را که از قبل وجود دارد حذف کنید و این کد را جایگزین آن کنید:

import React from ‘react’;

function App() {
return (
div>
h1>¡Hola, Mundo!h1>
div>
);
}

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فایل را ذخیره کنید و مرورگر خود را تماشا کنید که به طور خودکار به روز می شود تا پیام “Hello, World!”

تبریک می گویم! شما به تازگی اولین کامپوننت React خود را ایجاد کرده اید. 🎉

JSX: چیست و چگونه کار می کند

اگر به کد بالا نگاه کردید و تعجب کردید که “این HTML با جاوا اسکریپت ترکیب شده چیست؟”، نگران نباشید، آن JSX است.

JSX یک پسوند جاوا اسکریپت است که به ما اجازه می دهد کدی شبیه به HTML اما در داخل فایل های جاوا اسکریپت بنویسیم. نکته مهم در مورد JSX این است که خواندن و نوشتن آن بسیار ساده تر از کد جاوا اسکریپت خالص برای تولید عناصر HTML است. اگرچه شبیه به HTML است، اما در واقع جاوا اسکریپت زیر سرپوش است.

مثلا به جای نوشتن:

React.createElement(‘h1’, null, ‘¡Hola, Mundo!’);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

می توانیم آن را به صورت زیر بنویسیم:

h1>¡Hola, Mundo!h1>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

خیلی ساده تر، درست است؟

لوازم و حالت: مقدمه

برای پایان دادن به این مقدمه، ذکر دو مفهوم کلیدی در React مهم است: Props و State.

لوازم (خواص): پروپ ها مانند آرگومان هایی هستند که به یک تابع ارسال می کنیم، اما به جای توابع، آنها را به کامپوننت ها منتقل می کنیم. Props به یک کامپوننت اجازه می دهد تا داده ها را از مؤلفه اصلی خود دریافت کند و از آن در داخل خود استفاده کند.
حالت: دولت مانند “حافظه” یک جزء است. این یک شی است که می تواند حاوی داده هایی باشد که در طول زمان می توانند تغییر کنند، و هر بار که وضعیت تغییر می کند، React کامپوننت را مجدداً نمایش می دهد تا داده های جدید را منعکس کند.

در چند پست بعدی، قصد داریم بیشتر به این مفاهیم بپردازیم و ببینیم که آنها در عمل چگونه عمل می کنند.

و این همه برای امروز است! امیدوارم این مقدمه برای React برای شما مفید بوده باشد و برای اتفاقات آینده هیجان زده باشید. در پست بعدی به نحوه کار با کامپوننت ها، Props و State در React خواهیم پرداخت. دفعه بعد می بینمت! 🚀

npx create-react-app my-first-react-app

cd my-first-react-app
npm start

import React from 'react';

function App() {
  return (
    div>
      h1>¡Hola, Mundo!h1>
    div>
  );
}

export default App;

React.createElement('h1', null, '¡Hola, Mundo!');

h1>¡Hola, Mundo!h1>