ری اکت (React.js) یک کتابخانه جاوااسکریپتی برای ساخت رابط کاربری(user interfaces) برای اپلیکیشن های تک صفحه ای (single page applications) هست که در سال ۲۰۱۳ توسط تیم توسعه فیسبوک ساخته شده است. بخش اصلی در React کامپوننتها هستند. یک کامپوننت ترکیبی از HTML و javascript است و تمام منطق مورد نیاز برای نمایش قسمت کوچکی از یک رابط کاربری بزرگ تر را در خود دارد. هر کدام از این کامپوننتها میتوانند به بخشهای پیچیدهتر یک اپلیکیشن اضافه شوند. همچنین React این امکان رو در اختیار ما قرار میدهد که کامپوننتهای قابل استفاده مجدد (reusable UI components) رابط کاربری ایجاد کنیم. توی این دوره به آموزش پروژه محور react ورژن 17 و 18 (در ورژن 18 چیزی تغییر نکرده و شما این دوره را میتوانید با ورژن 18 ری اکت مشاهده کنید همچنین در بخش انتهای دوره درمورد ورژن 18 صحبت کردیم) به همراه hook ها، react router و redux میپردازیم.که 3 پروژه توی این دوره ایجاد میشه شامل پروژه spa(single page application) ، پروژه مدیریت Todo با useRducer و useContext و همچنین پروژه سبد خرید با redux
برای آشنایی بیشتر با react.js و همچنین مشاهده پروژه ای که توی این دوره پیاده سازی میشود، حتما ویدیو معرفی که در پایین قرار گرفته را مشاهده کنید.
همچنین دوره ای نکست جی اس (next.js) هم توی وبسایت قرار گرفت که پیشنهاد میکنم حتما بعد از این دوره مشاهده کنید.
مباحثی که در این دوره گفته میشود شامل :
آشنایی با react.js
- react چیست
- ایجاد پروژه react
- توضیح ساختار پروژه react
- توضیح و ایجاد کامپوننت
آشنایی با JSX
- معرفی jsx
- قوانین jsx
- جاوااسکریپت در jsx
style در react
- افزودن فایل css
- افزودن فایل sass
- inline style
- افزودن فریمورک bootstrap
- افزودن react-bootstrap
Event & Prop
- توضیح event در react
- توضیح prop در react
کار با form
- input & textarea
- selectbox
- checkbox & radio
آشنایی با هوک useState
- آشنایی با useState
- object و array در useState
آشنایی با هوک useEffect
- آشنایی با useEffect
- اجرای useEffect بصورت شرطی و همچنین یکبار
- cleanup
- دریافت دیتا از api با useEffect
آشنایی با هوک useContext
- context چیست
- آشنایی با useContext
آشنایی با هوک useReducer
- آشنایی با useReducer
- useReducer + useContext
آشنایی با useCallback & useMemo & React.memo و custom hook
آشنایی با react-router
- توضیح spa (single page application)
- Link & NavLink
- useParams
- useLocation
- useHistory
- nested routing
- useRouteMatch
ایجاد پروژه spa (single page application)
ایجاد پروژه مدیریت Todo با useReducer و useContext
آشنایی با redux
- action & reducer & store
- combineReducer
- redux thunk
آشنایی با react-redux
- action & reducer & storer
- connect
- useSelector & useDispatch
- redux devtools
- redux thunk
ایجاد پروژه سبد خرید با redux
ری اکت ورژن 18
- آشنایی با ویژگی های ورژن 18
- suspense در ری اکت
- concurrent در ری اکت
دوره های پیشنهادی، بعد از گذراندن این دوره :
پیش نیاز این دوره :
MohammadAkrami
سلام استاد شیخ خسته نباشید سوالی داشتم در مورد React که چگونه می شود فرانت اند را با react بنویسیم و بک اند را با php و زمانی که بخواهیم تگ های نوشته شده در ریکت با php ترکیب کنیم و نشان دهیم چگونه می شود چون کل فایل ها جاوااسکریپت هستند ما در ریکت فقط می توانیم به وسیله ی api و تک های فرم با php ارتباط برقرار کنیم ممنون میشوم راهنمایی ام کنید
علی شیخ
1 ماه پیش
سلام وقت بخیر.
فریمورک های مانند react مناسب برنامه های spa هست. اگه اصرار به استفاده از کد js توی فایل php دارید یا باید از خوده js و یا jquery و یا بهتر از همه از فریمورک alpine.js استفاده کنید که دوره اش توی سایت هم هست.