یادگیری ری اکت را از کجا شروع کنیم؟

توسعه وب یک رشته جذاب برای کاوش و یادگیری است. به عنوان یک زبان آموز، کتابخانه ها و چارچوب های زیادی دارید که می توانند به شما در توسعه پروژه های وب کمک کنند. حتی ممکن است گاهی اوقات انتخاب یکی و شروع کار دشوار باشد اما وقتی نوبت به یادگیری ReactJS می رسد، نباید تصمیم گیری سخت نیست.

ReactJS یا React یک کتابخانه رابط کاربری مبتنی بر جاوا اسکریپت منبع باز است. امروزه در جوامع توسعه وب بسیار محبوب است. React Native در بین توسعه دهندگان اپلیکیشن موبایل به همان اندازه محبوب است.

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

چرا برای یادگیری React به نقشه راه نیاز دارید؟

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

اگر نقشه یا راهنمای داشته باشید که به شما بفهماند «اگر ابتدا A را یاد بگیرید، سپس B آن گاه C را بسیار راحت تر یاد خواهید گرفت»، همه چیز برای شما بسیار روان تر خواهد بود. همچنین ممکن است به شما در تصمیم گیری در مورد مسیرهای جایگزین، میزان مسافت در یک مسیر و زمان توقف کمک کند.

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

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

من این نقشه راه را بر اساس تجربه کاری بیش از 6 سال با ReactJS ایجاد کرده ام. بنابراین اگر شما با چیزهایی مخالف هستید، با کمال احترام آن را می پذیریم.

از آنجایی که ReactJS بسیار محبوب است، ممکن است در اینجا شباهت هایی با بسیاری از نقشه های راه پیشنهادی دیگر پیدا کنید. اما، آن ها دقیقا یکسان نیستند.

تقسیم نقشه راه به مراحل

کل نقشه راه را به چهار مرحله تقسیم می کنیم که به ترتیب زیر خواهند بود:

پیش از React چه چیزی یاد بگیریم؟
به عنوان یک مبتدی چه چیزی را باید یاد بگیریم؟
چگونه از یک توسعه دهنده مبتدی به یک توسعه دهنده متوسط React تبدیل شویم؟
چگونه از یک توسعه دهنده متوسط به یک توسعه دهنده پیشرفته React تبدیل شویم؟

پیش از React چه چیزی یاد بگیریم؟

ReactJS مبتنی بر جاوا اسکریپت است. برای تسریع در یادگیری React با سرعت کامل، باید با چند چیز (به غیر از دانش پایه جاوا اسکریپت) آشنا باشید.

کنترل ورژن Git (Git Version Control)

Git یک ابزار کنترل ورژن است که به شما کمک می کند کد منبع خود را بهتر مدیریت کنید. ارتباط مستقیمی با ReactJS ندارد. اما اگر کاربردهای اساسی آن را بیاموزید کمک می کند تا بتوانید از مزیت اکوسیستم توسعه استفاده کنید. وقتی روی چند چیز اساسی تمرکز می کنید، یادگیری Git آسان است،

نحوه راه اندازی یک ریپازیتوری (repository)
چگونه تغییرات خود را stage/unstage صحنه سازی کنید
چگونه تغییرات خود را در ریپازیتوری انجام دهید
نحوه push کردن به یک ریموت ریپازیتوری
چگونگی حل تضادهای merge

همراه با Git، هم چنین باید بدانید که چگونه از یک سرویس مدیریت ریپازیتوری مبتنی بر Git مانند GitHub استفاده کنید. می‌توانید همه چیز درباره Git و GitHub را در این نشانی ببینید.

HTML

HTML ساختار یک صفحه وب را فراهم می کند. هنگام کدنویسی در ReactJS از ساختار HTML در یک دستور جدید به نام JSX استفاده خواهید کرد. لازم نیست همه چیز را در مورد HTML بدانید. اما شما باید دانش اولیه ای از تگ ها داشته باشید. برای یادگیری آن می توانید به این نشانی سر بزنید:

آموزش ویدئویی HTML

CSS

وقتی صحبت از CSS به میان می آید، دامنه یادگیری آن بسیار بزرگ است. با این حال، روی موضوعاتی که در زیر آمده است تمرکز کنید:

انتخابگرها یا سلکتورهای پایه (Basic Selectors)
شبه کلاس ها (Pseudo-classes)
مدل جعبه ای (Box Model)
فلکس باکس (Flexbox)
گرید (Grid)
موقعیت یابی (relative, absolute)
واحدها (px ،em ،rem، ...)

چه چیز دیگری؟

اگر موارد بالا را بدانیم، 80 درصد css را یاد گرفته ایم، 20% بقیه جستجو در گوگل است. هیچکس همه ویژگی ها را به یاد نمی آورد. شما می توانید در سایت روکسو چیزهای زیادی در مورد CSS بیاموزید، و در لینک زیر یک آموزش مبتنی بر پروژه به شما کمک می کند تا مفاهیم اولیه CSS را عملی کنید:

آموزش HTML و CSS از صفر تا صد + پروژه محور

JavaScript

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

تعریف متغیر ها (let و const)
قالب های الگو (Template Literals)
توابع معمولی و توابع پیکانی (Arrow Functions)
ساختارشکنی یک شی (Object Destrucuring)
عملگرهای Spread و Rest
import و export ماژول
Promise ها و برنامه نویسی ناهمزمان (Async)

اکوسیستم NPM

شما باید از نحوه استفاده از npm، yarn و مدیر نسخه نود (nvm) برای کمک به اجرای و آزمایش برنامه ReactJs آگاه باشید.دانستن این که چگونه آن ها در سطح بالا کار می کنند همیشه برای رفع اشکال محیط شما در صورت مواجهه با مشکلات مفید است. در اینجا منبعی برای کمک به شما برای شروع سریع همه این موارد وجود دارد: Node.js install, npm, yarn, nvm

نحوه استقرار (Deploy)، میزبانی (Host) و انتشار برنامه خود

اگر چیز جالبی با ReactJS ایجاد کرده باشید و نتوانید آن را در جهان به نمایش بگذارید، چندان جالب نخواهد بود. بنابراین، شما باید بدانید که چگونه برنامه را اجرا کنید و آن را برای دسترسی عمومی در دسترس قرار دهید.

ابزارهایی مانند Vercel یا Netlify اجرای برنامه React خود را با چند کلیک آسان می کنند.

به عنوان یک مبتدی چه چیزی را باید یاد بگیریم؟

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

یاد بگیرید React چیست؟

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

آموزش ری اکت (React) و Redux + پروژه فروشگاه اینترنتی (دوره غیر رایگان و ویدئویی)
آموزش ری اکت در 153 درس (دوره رایگان و متنی)

یاد بگیرید چگونه محیط توسعه خود را راه اندازی کنید

راه های مختلفی برای راه اندازی یک محیط توسعه برای React وجود دارد. ساده ترین راه، استفاده فایل اسکریپت از توزیع CDN است.

این رویکرد برای شروع خوب است اما پایدار نیست. به عنوان یک مبتدی، ممکن است نخواهید زمان زیادی را در پیکربندی های مرتبط با Babel یا Webpack برای پروژه های خود صرف کنید.

هوشمندانه‌ترین و سریع‌ترین راه برای شروع کار با محیط توسعه ReactJS، استفاده از Create React App است.

با JSX آشنا شوید

ReactJS به منطق رابط کاربری اجازه می دهد تا با منطق رندر، رویدادها، مدیریت تغییرهای state و موارد دیگر همراه شود.

JSX دارای سینتکسی همانند HTML است اما قدرت جاوا اسکریپت را نیز دارد. این نحو به توسعه دهندگان کمک می کند تا منطق UI را با تمام عناصر لازم مانند واکشی داده ها، شرایط، حلقه ها، عبارات و غیره بنویسند.

توجه داشته باشید که می‌توانید یک برنامه ReactJS را بدون استفاده از دستور JSX بنویسید اما تجربه توسعه به خوبی نخواهد بود.

با کامپوننت های React آشنا شوید

کامپوننت ها قلب برنامه های ReactJs هستند. ما کامپوننت های مستقلی را ایجاد می کنیم که قابل استفاده دوباره، مستقل و ایزوله هستند. یک کامپوننت قرار است یک کار را به درستی انجام دهد. چندین کامپوننت ها در کنار هم قرار می گیرند تا برنامه را بسازند.

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

state در React

state داده خصوصی برای کامپوننت شما است. ما state ها را در بین کامپوننت به اشتراک نمی گذاریم. از "state" کامپوننت برای رندر کردن اطلاعات و اصلاح آن ها استفاده می کنیم.

Propها در React

در برنامه نویسی دنیای واقعی، شما به کامپوننت هایی نیاز دارید که با یکدیگر تعامل کنند. state ها برای یک کامپوننت خصوصی هستند، اما شما باید داده ها را بین کامپوننت ها منتقل کنید. این جایی است که Prop ها وارد عمل می شود. توجه داشته باشید که Prop ها فقط خواندنی هستند.

لیست ها و کلیدها در React

ما از لیست برای رندر کردن لیستی از آیتم ها در کامپوننت های React استفاده می کنیم. فهرست کردن کاربران، کارهای TODO و نمونه هایی از استفاده از لیست ها هستند. از تابع map برای حلقه زدن روی لیست و رندر کردن نتایج استفاده می کنیم.

کلیدها به شناسایی مواردی از لیست کمک می‌کنند تا به React اطلاع دهند تا دوباره ارائه شود. اگر فراموش کنید کلیدهای یک لیست را ذکر کنید، ReactJS هشدار می دهد.

متدهای چرخه زندگی (lifecycle methods) در React

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

اگر در React تازه کار هستید، باید مدیریت چرخه زندگی کامپوننت های تابعی را بفهمید. می توانید این کار را با استفاده از هوک های داخلی مانند useState، useEffect و غیره انجام دهید.

چگونه از یک توسعه دهنده مبتدی به یک توسعه دهنده متوسط React تبدیل شویم؟

اکنون بیایید بفهمیم که برای حرکت از سطح مبتدی به سطح متوسط چه چیزی لازم است.در این مرحله، شما بیش تر به تمرکز بر روی کامل بودن برنامه ها خواهید کرد. در پایان این مرحله، می‌توانید بیش تر چالش‌های ReactJs را بپذیرید و از انجام آن‌ها لذت ببرید.

استایل دهی در React

همه ما می خواهیم که برنامه های ما از نظر زیبایی شناسی دلپذیر به نظر برسند. می توانید از CSS قدیمی ساده برای استایل دادن به برنامه ReactJS خود استفاده کنید. یا می توانید از Sass یا سایر کتابخانه های کامپوننت مبتنی بر CSS مانندTailwindCSS ، ChakraUI ،react-bootstrap یا MUI استفاده کنید. این انتخاب به شما وابسته است.

مدیریت فرم در React

رسیدگی به فرم ها یک نیاز ضروری در برنامه های کاربردی وب است. شما باید بدانید که چگونه المنت های فرم را به روش React مدیریت کنید.

به عنوان مثال، می توانید از کتابخانه react-hook-form برای ساخت آسان فرم ها استفاده کنید.

مدیریت داده ها در React

این بخش مهمی از توسعه اپلیکیشن است. شما باید یاد بگیرید که چگونه از fetch API یا کتابخانه هایی مانند node-fetch و axios برای تعامل با API ها و مدیریت داده ها در کامپوننت های خود استفاده کنید.

فرآیند آشتی (Reconciliation) در React

React از Virtual DOM یا DOM مجازی و الگوریتم diffing استفاده می کند تا تصمیم بگیرد چه زمانی و چه چیزی در DOM واقعی برای رندر به روز شود. دانستن نحوه عملکرد آن در زیر پوسته به شما در رفع اشکال کمک می کند.

هوک های React

امیدوارم وقتی در مورد چرخه زندگی یاد می گیرید، کمی در مورد برخی از هوک های داخلی مانند useState useEffect یاد گرفته باشید. هوک های داخلی مفید دیگری وجود دارد که بهتر است آن ها را یاد بگیرید. مطمئن شوید که آن ها را نادیده نمی گیرید.

هوک های سفارشی (ساخته شده توسط برنامه نویس) در React

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

کانتکس در React

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

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

چگونه از یک توسعه دهنده متوسط به یک توسعه دهنده پیشرفته React تبدیل شویم؟

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

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

Lazy Loading در React

React از تقسیم کد پشتیبانی می کند. این راهی برای بارگذاری Lazy آن چه شما نیاز دارید توسط کاربر فعلی است. هم چنین از ساخت یک باندل بزرگ جلوگیری می کند. ویژگی import پویا بهترین راه برای گنجاندن تقسیم کد در برنامه React است.

پورتال ها در React

هنگام کار با مدال ها، dialog ها یا tooltip ها با مدیریت بهتر رویداد، ممکن است مجبور شوید از پورتال ها استفاده کنید. خارج از جعبه در ReactJS پشتیبانی می شود.

مدیریت state در React

در یک برنامه بزرگتر، باید اطلاعات را بین اجزا به اشتراک بگذارید. گاهی اوقات، پشتیبانی پیش‌فرض Props و Context ممکن است کافی نباشد.

در این موارد، ممکن است به یک راه حل مدیریت state مانند Redux یا MobX در این موارد نیاز داشته باشید.

مسیریابی (Routing) در React

مسیریابی برای برنامه های چند صفحه ای مورد نیاز است. همچنین نشانه گذاری یک صفحه خاص یا پیمایش رفت و برگشت در برنامه با استفاده از دکمه برگشت مرورگر مفید است.

React Router محبوب ترین راه حل مسیریابی است که به مسیریابی تعریفی کمک می کند.

تم بندی در React

تم بندی یک ویژگی مدرن در برنامه های وب است. ما باید به کاربران این امکان را بدهیم که تم مورد نظرشان را انتخاب کنند مانند روشن یا تاریک تا از آن استفاده کنند و در هنگام استفاده از سایت یا برنامه شما احساس راحتی بیش تری کنند.

حتی می توانید تم های سفارشی خود را در برخی از برنامه ها ایجاد کرده و آنها را اعمال کنید. راه های مختلفی وجود دارد که می توانید یک برنامه React را تم بندی کنید.

الگوها در React

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

یادگیری این الگوها کمک قابل توجهی به شما می کند. برای یافتن پرکاربردترین الگوهای React مستند شده با مثال، این سایت را بررسی کنید.

پادالگوها در React

Anti-Pattern ها یا پادالگو ها روش هایی هستند که باید از آنها در برنامه های React استفاده نکنید. شما باید آن ها را همراه با الگوهای مفیدی که باید استفاده کنید یاد بگیرید.

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

بنابراین، چگونه کار با React را شروع کنیم؟

این پرسش هوشمندانه ای است. منابع بسیار خوبی (کتاب، مقاله، فیلم) برای کمک به شما در موضوع های بالا وجود دارد که بسیاری از آن ها در هر بخش پیوند داده شده اند. بنابراین، شما می توانید آن هایی را پیدا کنید که مناسب شما هستند.

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

سایت رسمی React
دوره آموزشی front-end development library course
فیلم آموزشی موجود در این لینک

2022 است، آیا هنوز باید React را یاد بگیرم؟

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

هم چنین، React یک فریم ورک پایه برای بسیاری از فریمورک های محبوب دیگر مانند Next.js ،GatsbyJS و اخیرا Remix است.

در این جا React را با فریم ورک های Angular ،Vue یا Svelte مقایسه نمی کنیم. همه آن ها عالی هستند، مانند این React که یک کتابخانه عالی برای توسعه رابط کاربری است.