React.js & Redux

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

مروری بر دوره

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

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

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

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

دلایل استفاده از 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 ابزاری‌ست که به ما قابلیت انجام چنین کاری را می‌دهد. در گام نهایی یادگیری ری‌اکت شما به صورت پروژه محور با این کتابخانه آشنا شده و می‌توانید از آن استفاده کنید.

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

Redux Objective

Redux Concepts (actions, action creators, dispatch, reducers, store)

Asynchronous Redux Actions

Redux Thunk

Redux Toolkit

Redux Saga

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