در حال بارگذاری ...

آموزش React Js

آموزش React JS

طراحی صفحات وب با React JS

امروزه برنامه های وبی که بتوانند پس از بارگذاری به درخواست‌ های کاربر جواب دهند و نیازی به بارگذاری دوباره برای به‌ روز رسانی صفحه نداشته باشند اهمیت زیادی دارند. در این بین فریمورک ها و کتابخانه‌ های زیادی مثل: AngularJS ,Ember.js ,Vue.js وجود دارند که این کار را انجام می‌دهند. React JS کتابخانه‌ ای است که توسط فیسبوک گسترش داده می‌ شود و با رویکردی متفاوت نسبت به فریمورک ها و کتابخانه‌ ها معرفی شده در بالا، کار پاسخ دادن به اکشن‌ های کاربر را انجام می‌ دهد و صفحه را به‌ روز رسانی می‌ کند.

React‌ علاوه بر این که یک کتابخانه کوچک است در واقع یک اکوسیستم است که می‌ توانید با آن برنامه‌ های تحت وب و برنامه‌ های Native موبایل یا دستگاه هایی با حافظه کم را بنویسید. در حال حاضر شرکت‌ های بزرگی در دنیا و ایران از این تکنولوژی استفاده می‌ کنند که برای مثال می‌ توان به شرکت‌ های Facebook ,Twitter, Airbnb و شرکت Atialisan‌ در برنامه Trello اشاره کرد. در ایران نیز شرکت‌ های بزرگی همچون: دیجی کالا (Digikala) از این تکنولوژی استفاده می‌ کند. در این آموزش پروژه محور ما مروری سریع بر React داریم و یک برنامه ساده To-Do را با این کتابخانه می نویسیم.

درباره REACT JS

React‌ علاوه بر این که یک کتابخانه کوچک است در واقع یک اکوسیستم است که می‌ توانید با آن برنامه‌ های تحت وب و برنامه‌ های Native موبایل یا دستگاه هایی با حافظه کم را بنویسید. در حال حاضر شرکت‌ های بزرگی در دنیا و ایران از این تکنولوژی استفاده می‌ کنند که برای مثال می‌ توان به شرکت‌ های Facebook ,Twitter, Airbnb و شرکت Atialisan‌ در برنامه Trello اشاره کرد. در ایران نیز شرکت‌ های بزرگی همچون: دیجی کالا (Digikala) از این تکنولوژی استفاده می‌ کند. در این آموزش پروژه محور ما مروری سریع بر React داریم و یک برنامه ساده To-Do را با این کتابخانه می نویسیم.

سرفصل ها

درس اول: معرفی

درس دوم: نصب پیش نیازها

نصب و معرفی Node.js

معرفی و نصب npm و Yarn برای مدیریت بسته‌ ها

نصب Visual Studio Code به عنوان ویرایشگر متن

معرفی Babel.js به عنوان یک Transpiler جاوا اسکریپت (JavaScript)

معرفی Webpack

نصب React Developer Tools

درس سوم: ساخت برنامه To-Do

بررسی یک پروژه React

معرفی JSX و ساخت ظاهر کاربری برنامه و اضافه کردن CSS ها

ساخت کامپوننت To-Do سفارشی و بررسی تابع Render

معرفی State ها

ساخت چند آیتم از To-Do در State و نمایش آن در تابع Render و بررسی تابع Map در جاوا اسکریپت

ساخت یک فرم برای ورود اطلاعت و دریافت اطلاعات از کاربر و اضافه کردن آن به State

اضافه کردن دکمه Remove برای حذف آیتم‌ ها و بررسی تابع Filter در جاوا اسکریپت

اضافه کردن Checkbox انجام شده برای To-Do

اضافه کردن متن های نمایش همه آیتم‌ها – آیتم‌ های انجام شده – آیتم های انجام نشده

درس چهارم: ساخت پروژه نهایی برای قرار دادن در سرور