آموزش شروع کار با React Router

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

این کلاس به شما می‌آموزد که اجزای وب‌سایت پویا و   برنامه‌های هم‌زمان   را با React.js بسازید.

===============موضوعات==========================

1. مقدمه ای برای React: شروع به کار -  
2. مقدمه ای برای واکنش: اصول را بیاموزید - قسمت 1 -  
3. مقدمه ای برای واکنش: اصول را بیاموزید - قسمت 2 - 
4. با React.js یک تایمر شمارش معکوس بسازید -  
5. فهرست کارهای ساده با استفاده از React و HTML5 Localstorage -  
6. React، Node.js - ایجاد یک تولید کننده نقل قول با یک API آرامش بخش -  
7. با React، Bootstrap و HTML5 LocalStorage یک برنامه هواشناسی بسازید -  
8. آموزش React Redux در کمتر از 1 ساعت -  
9. شروع به کار با React Router -  
10. معرفی React Hooks -  
11. ساختن یک برنامه FullStack با MERN - قسمت 1 -  
12. با MERN یک برنامه FullStack بسازید - قسمت 2 - 

============================================== ====

React   یک کتابخانه جاوا اسکریپت است که در سال 2013 توسط جردن واک از فیس بوک توسعه یافته است. متوجه خواهید شد که React هم بسیار محبوب است (این پنجمین کتابخانه پر ستاره JS در GitHub است) و هم در سایت‌های اصلی از جمله فیس‌بوک، نتفلیکس و آکادمی خان استفاده می‌شود.

از انعطاف‌پذیری استفاده از React با فناوری‌های وب مورد علاقه‌تان (به جز jQuery!) لذت خواهید برد و این مسیر شما را از اصول اولیه تا ساخت برنامه‌های کامل با استایل سفارشی می‌برد. با این کلاس، A-Z React را یاد بگیرید:

•   مبانی و مبانی   با درس‌های ویدئویی اندازه‌ی میان‌وعده. از ساده تا پیچیده، آموزش‌ها و تمرین‌ها به شما کمک می‌کنند تا با   مفاهیم اصلی توسعه وب   با react.js
سریع به سرعت برسید.
• درک   React Components   (مولفه‌های بدون حالت و حالت)
• نوشتن و نمایش داده ها با JSX
• شبکه سازی با   درخواست های HTTP و API های RESTFul ناهمزمان
• وضعیت برنامه خود را حفظ کنید
• ارسال داده های پویا با اشیاء props
• چرخه عمر کامپوننت (componentDidMount، componentDidUpdate)
• ارتباط بین اجزا
• رویدادها و اتصال رویداد
• کار با State و   HTML5 LocalStorage
• ایجاد کد قابل نگهداری با ماژول های جاوا اسکریپت
• ماندگاری داده با   Redux
• مسیریابی با React Router 4
• بهره گیری از ویژگی های جدید ES6
•   React Hook (useState، useEffect)
• + خیلی بیشتر

چه چیزی را با هم خواهیم ساخت؟

• یک برنامه هم‌زمان و تک صفحه -   تایمر شمارش معکوس   - که بیان می‌کند چند روز، ساعت و دقیقه تا این رویداد شگفت‌انگیز که منتظر آن هستید باقی مانده است. p>

• نمونه   کلاسیک فهرست کارها   برای سریع‌تر شدن با اصول و مفاهیم اصلی در مدت زمان کوتاه

• یک   - چک لیست تعاملی -   که با کتابخانه بوت استرپ، نمادهای فونت عالی و فضای ذخیره‌سازی محلی HTML5 توسعه یافته است

• نمونه جلو به پشت با   MERN (MongoDB، Express.js، React.js و Node.js)

• یک ابزارک   آب و هوا   با Restful API openweathermap(dot)org

• + خیلی بیشتر

این کلاس برای چه کسانی است؟

• هرکسی که مایل به یادگیری و ایجاد مهارت های ظاهری قوی است

• توسعه دهندگانی که مایل به رشد و تقویت مهارت های جاوا اسکریپت خود هستند

این بخش از یک سری چند قسمتی، تنظیمات اولیه و الزامات فنی برای تکمیل درس ها را بررسی می کند

============ الزامات فنی و راه اندازی =============

1- Node.js & Npm

Node.js یک محیط زمان اجرا جاوا اسکریپت است که به ما امکان می دهد کدهای جالب React را کامپایل کنیم!

اول از همه، اجازه دهید مطمئن شویم که Node.js را نصب کرده اید.

گره --نسخه npm --نسخه

اگر نه، می‌توانید آن را از اینجا دانلود کنید:  

Node.js یک زمان اجرا جاوا اسکریپت است که اجرای جاوا اسکریپت را در خارج از مرورگر ممکن می کند. مدیر بسته گره اصلی (NPM) برای نصب چارچوب ها و کتابخانه ها، مانند React.js، در پروژه شما در خط فرمان استفاده می شود.

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

• گره --نسخه
• npm --نسخه

2- IDE: Visual Code Studio

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

به وب سایت رسمی     بروید و نسخه اخیر VS Code را دانلود کنید.

3- create-react-app

ما از   create-react-app   از Facebook برای داربست برنامه خود استفاده خواهیم کرد. این محبوب ترین راه برای تنظیم محیط و شروع کدنویسی است. همراه با بسیاری از ابزارهای مورد نیاز داخلی است که به ما کمک می کند تا بسیاری از تصمیمات را حذف کنیم.

برای نصب create-react-app به صورت جهانی:

npm i -g create-react-app

سپس اولین اجرای پروژه خود را داربست:

create-react-app react-intro

همین! اکنون برای شروع برنامه:

cd react-intro

شروع npm

============= خلاصه دوره =============

1. مقدمه ای بر
2. react-router-dom
3. ساخت یک برنامه کاربردی چند جزئی