پرش به محتوا
React.js & Redux

درباره دوره


React JS؛ کتابخانه محبوب جاوا اسکریپت برای طراحی UI

می‌توان گفت اکثر ویژگی‌های جذاب بیشتر وب‌سایت‌ها را مدیون وجود جاوا اسکریپت هستیم. زبان برنامه‌نویسی که نمی‌توان دیگر وب را بدون وجود آن تصور کرد. جاوا اسکریپت زبان برنامه نویسی است که برای توسعه هر دو سمت فرانت-اند و بک-اند مورد استفاده قرار می‌گیرد. به لطف محبوبیت این زبان برنامه نویسی کتابخانه‌ها و فریمورک‌های مختلفی توسط اشخاص و تیم‌های مختلف توسعه یافته‌است که استفاده از قابلیت‌های خارق‌العاده آن را آسان‌تر کرده است. یکی از این کتابخانه‌ها محبوب ری‌اکت (React) نام دارد که توسط فیسبوک و عده‌ای از برنامه نویسان توسعه یافته است. به کمک react می‌توانید با زبان JavaScript قسمت فرانت-اند یا سمت کاربر (Client Side) وب‌سایت خود طراحی کنید.

 

 

دلایل استفاده از REACT

تعداد زیادی کتابخونه و فریمورک open-source برای ساختن فرانت اند وب اپلیکیشن‌ها مانند انگولار وجود دارد که خیلی ساده تر از React هستند. خیلی سخت است که زمانی را به یاد گرفتن فریمورک های جدید اختصاص بدهیم به خصوص که عمر خیلی از این فریمورک ها بسیار کوتاه است و فرصت ریسک کردن را نداریم. بنابراین اگر شما به دنبال یک تکنولوژی هستید که جز بهترین‌های حوزه خودش باشد و ارزش ریسک را داشته باشد.

 

 سادگی

درک کردن مفاهیم React بسیار ساده است. رویکرد مبتنی بر کامپوننت،lifecycle  هایی که به بهترین نحو تعریف شده که کاملا مشخص و واضح هستند و استفاده از جاوا اسکریپت React را برای یادگیری و ساخت وب اپلیکیشن‌های حرفه‌ای آسان می کند. React از یک syntax ویژه با نام JSX  استفاده می‌کند که اجازه می‌دهد HTML و جاوا اسکریپت را ترکیب کنید. لازم نیست که حتما از JSX برای templating  استفاده کنید و برنامه نویس هنوز هم میتواند از جاوا اسکریپت برای این کار استفاده کند ولی اگر با JSX این کار را انجام دهید، دیگر به هیچ عنوان از جاوا اسکریپت برای templating استفاده نخواهید کرد.

 

یادگیری راحت

هر کسی با داشتن پیش زمینه ای از برنامه نویسی به راحتی می تواند React را یاد بگیرد در حالی که Angular و Ember از یک “Domain specific Language” استفاده می‌کنند که یادگیری آن بسیار سخت است. برای یادگیری React شما باید یک دانش مختصر در مورد HTML , CSS و جاوا اسکریپت داشته باشید.

 

رویکرد Native

همانطور که در ابتدای مقاله گفتیم React Native بر پایه جاوا اسکریپت و React است. پس تمام ویژگی‌هایی که برای React بیان کردیم در  React Native هم صدق می‌کند. به علاوه کد‌های بین دو پلتفرم Android و IOS مشترک است و کامپوننت‌هایی که می نویسید میتونید در چندین پروژه از آنها استفاده کنید.

 

عملکرد

هیچ container از پیش ساخته شده برای dependency ندارد. و می توانید از ماژول‌های Browserify, Require JS, EcmaScript 6 با استفاده از Babel استفاده کنید که به طور خودکار به  dependencies اضافه می شود.

 

تست پذیری

برنامه های ReactJS فوق العاده آسان میتوان آنها را تست کرد. بنابراین می‌توانیم توابع و کامپوننت های خودمون رو با پاس دادن پارامترها و state ها و خروجی‌ها رو چک کنیم.

 

جمع‌بندی

به علت اینکه ری‌اکت یک کتابخانه واقعی UI است برای یادگیری این حوزه انتخاب صحیحی می‌باشد. از دلایل دیگر یادگیری این کتابخانه پیشنهادات خوب بازار کار در این حوزه است. به دلیل روند رو به رشد گرایش طراحان و برنامه نویسان فرانت اندبه فریم ورک هایی نظیر react.js ما تصمیم گرفتیم دوره آموزش ری اکت را در مرکز آموزش بین الملل برگزار کنیم.

 

قدم‌های آموزش React.js در مرکز آموزش بین الملل

قدم اول: آموزش React

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

قدم دوم: آموزش Redux

Redux یک ابزار مدیریت State در React محسوب می‌شود و به شما این اجازه را می‌دهد که در پروژه‌های متوسط و بزرگ از پیچیده شدن کار با state ها جلوگیری کنید. مدیریت داده‌ها و وضعیت‌ها بصورت متمرکز باعث می‌شود که شما بتوانید بهتر آن‌ها را مدیریت کنید. به همین دلیل بهتر است Redux را به خوبی یاد بگیرید.

قدم سوم: آموزش Next.js

در فرایند یادگیری ری‌اکت با مبحث SSR یا Server-Side-Rendering آشنا خواهید شد. حال ممکن است خیلی با این قضیه آشنایی نداشته باشید اما باید بگویم که بسیار یادگیری آن برای‌تان ضروری خواهد بود. در این قدم (آموزش Next.js) شما ابتدا با این مفهوم به خوبی آشنا خواهید شد و سپس با استفاده از فریمورک مربوطه آن را پیاده‌سازی می‌کنید.

قدم چهارم: آموزش پروژه محور React Native

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

پیش نیازه های دوره


تسلط کامل به مباحث HTML - CSS - JavaScript

دستاورد های شما پس از گذراندن دوره


توسعه وب برای ساخت عناصر تعاملی در وب سایت

مخاطب هدف دوره


برنامه نویسان فرانت اند

سوالات متداول

چرا React JS اینقدر محبوب است؟

زمانی که یک موسسه یا شرکت عظیم با طرفداران فوق‌العاده زیاد، عهده‌دار نگهداری و توسعه یک کتابخانه جاوا اسکریپتی می‌شود، دیگر نباید شکی به این کتابخانه داشت. امروزه همه ما از Facebook و Instagram استفاده می‌کنیم و می‌دانیم که چقدر این دو شبکه اجتماعی از نگاه فنی کم اشکال و قابل اطمینان هستند و در سطح بالایی قرار دارند. حال در نظر بگیرید که این شرکت بزرگ عهده‌دار توسعه چنین کتابخانه مهمی بوده که از آن در ایجاد یک رابط کاربری زیبا و عام پسند استفاده کرده است. بنابراین، طراحان سایت و توسعه دهندگان وب، خیلی زود سراغ React رفتند. React کتابخانه‌ای است که با استفاده از آن تمام جنبه‌های ظاهری یا همان بخش View در طراحی سایت یا توسعه اپلیکیشن موبایل را به عهده می‌گیرد. با استفاده از React، بسیاری از پیچیدگی‌ها و درگیری‌های مختلف برنامه نویسی از روی دوش شما برداشته می‌شود.

تفاوت react با react native چیست؟

ری اکت زبانی است که برای توسعه‌ی اپلیکیشن‌ها و صفحات وب دسکتاپ به کار می‌رود. React native از همان سینتکس ری اکت برای ساخت وب اپلیکیشن‌های نسخه‌ی اندروید و ios استفاده می‌کند.

سرفصل های دوره

Redux Objective
Redux Concepts (actions, action creators, dispatch, reducers, store) Asynchronous Redux Actions Redux Thunk Redux Toolkit Redux Saga

React JS Objective
Getting Started • Introduction to JavaScript • JS Version • Creating • Tools Core JavaScript Syntax • Structure • Console • The prompt • Value • Operators • Assignment • Comparators • Files • Variables • Incrementing & Decrementing • Conditional • Loops • Data types • Function • Arrays • Comments • JavaScript Keyword Types • Numbers • Strings • Boolean • Objects Functions and advanced features • Parameters • Function Expressions • Returned Functions • Function Invocation • Anonymous • Closures • Load orders • Hoisting • Scope Objects • Object Creation • Accessing Object Properties • Functionality in objects • Object Methods • Constructors • Enumeration • Prototypes • Inheritance • Prototypal Methods Document Object Model • What is DOM • Nodes Working With the DOM • Get Elements • Changing DOM • Create DOM Working with Events and Event Listeners • Introduction to Events • Click Load • Focus Blur • Timers Debugging JavaScript • Common Errors • Console • Debugging UI Enhancement • Introduction to Style • Applying Classes • Inline Styles JavaScript AJAX • Intro • XML HTTP • Send Request • Server Response • status • Get and Post • Callback Javascript JSON • Syntax • Objects • Parse • Stringify Browser Object Model • window • screen • location • Cookies • Session JavaScript Best Practices • Minify • Code Check • Script Execution • loop Optimization • Anonymous Closures • Performance Tips • Exception Handling JavaScript ES6 • ES6 Intro • Let and Const • Let in loops • Defaults • Rest Paramaters • Spread Operator • Arrow Functions • Assign • Initializer & Destructuring • Strings • Iterators • Promises • Generators • Class • Modules • Symbol React • Introducing React • React Tools • React Packeges • Setting Up the project • Structure • Project Compiler • React Dom • JSX • React Component • Composing Component • Rendering • Dom Elements • Attributes • Styles • Events • Binding This • Passing Arguments • Conditional Operator • Controlled Component • Application State • Make a Functional Component • Lifecycle Hooks • Lifecycle Methods • Key • State • Props • Update • Data Flow • Integrating React with other Libraries • Stateless Components • Conditional Rendering • React Debugging • Handle User Events • Controlled Elements • Ref • Forms • Capture User Input • Single Page Applications • Optional Parameters • Project Implementation • Build project • Deployment
اشتراک گذاری
وضعیت دوره : برگزار شده

اساتید دوره :

مدت زمان : 40 ساعت
تاریخ شروع : 1400/10/12
تقویم برگزاری کلاس :
یکشنبه 21:00 الی 23:00
سه شنبه 21:00 الی 23:00
ظرفیت دانشجویان : 20 نفر
تعداد جلسات در هفته : 2 جلسه
محل برگزاری : آنلاین
دوره های دیگر در حال ثبت نام بین الملل
پک ویژه
درحال ثبت نام
Master Full Stack Web Developer 2024
حضوری / آنلاین
کد 1550
دوره VIP فول استک وب
بصورت آنلاین و حضوری

مدت زمان

300 ساعت

تاریخ شروع

1402/12/17

محل برگزاری

لابراتوار A
پک ویژه
درحال برگزاری
Python Developer
آنلاین
کد 1549
دوره جامع برنامه نویسی پایتون
با رویکردی متفاوت نسبت به علم داده و هوش مصنوعی

مدت زمان

70 ساعت

تاریخ شروع

1402/12/17

محل برگزاری

آنلاین
پک ویژه
درحال برگزاری
Python Developer
حضوری / آنلاین
کد 1547
دوره جامع برنامه نویسی پایتون
با رویکردی متفاوت نسبت به علم داده و هوش مصنوعی

مدت زمان

70 ساعت

تاریخ شروع

1402/12/01

محل برگزاری

لابراتوار B

درخواست مشاوره ثبت نام

درصورت نیاز به مشاوره برای ثبت نام فرم درخواست زیر را تکمیل فرمایید.