دانلود ویدئو ها
توی این بخش میتونید ویدئو ها رو به صورت فصل به فصل به صورت یکجا دانلود کنید
برای مشاهده لینک های دانلود اینجا کلیک کنید
پشتیبانی دوره
کانال مخصوص دوره و پشتیبانی دوره
ایدی پشتیبانی دوره
پیش به سوی آموزش react
قبل از شروع آموزش مفاهیم ریکت ، مفاهیم مهم javascript که توی react خیلی پر کاربرد هستن رو بررسی میکنیم با هم (درک این پیش نیاز ها به شدت ضروریه و اگه این پیش نیاز ها رو به خوبی تمرین کنید و با دقت ویدئو ها رو ببینید، ریکت رو هم میتونید خیلی راحت یاد بگیرید)
برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید
01 - آموزش مفهوم scope در جاوا اسکریپت
02 - آموزش global scope
03 - آموزش function scope
04 - آموزش block scope
05 - آموزش مفهوم hoisting
06 - آموزش variable hoisting
07 - آموزش function hoisting
08 - آموزش undeclared variable و strict mode
برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید
01 - معرفی این فصل
02 - ternary operator
03 - back-tics syntax
04 - module concept
05 - import and export
06 - as keyword in module
07 - default export import
08 - arrow function
09 - rest operator
10 - spread operator
11 - array destructuring
12- object destructuring
13 - foreach method
14 - map method
15 - filter method
16 - reduce method
17 - reduce challenge
18 - this keyword
19 - bind method
برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید
01 - روش های مختلف ساخت اشیاء - بخش اول
02 - روش های مختلف ساخت اشیاء - بخش دوم
03 - پارامترها در تابع سازنده (constructor function)
04 - کلاس (class) چیست؟
05 - متد سازنده (construnctor method)
06 - یک مثال از کلاس ها
07 - ارث بری (inheritance) در کلاس ها
خب حالا که مفاهیم مهم و کاربردی javascript که توی react زیاد استفاده میشن رو یاد گرفتیم ، بریم سراغ راه اندازی و نصب محیط توسعه ی ریکت و با پکیج create-react-app محیط توسعه ی برنامه های ریکتی رو آماده کنیم و با jsx آشنا بشیم و یه کوچولو هم توی ریکت کد بزنیم.
برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید
01 - creat-react-app
02 - react project structure
03 - emmet plugin in react
04 - ?what is jsx
05 - jsx rules
06 - javascript in jsx
07 - ?why to use jsx
08 - example - website templete
09 - example - product card
دانلود فایل های این فصل
حالا بریم با یکی از مهم ترین مفاهیم توی react یعنی کامپوننت ها (component) آشنا بشیم.
برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید
01 - component concept
02 - component example
03 - nested component
04 - class component vs function component
05 - root comp - App.js
دانلود فایل های این فصل
حالا بریم سراغ موضوع جذاب و دوست داشتنی و هم چنین مهمِ props ، و ببینیم پراپ ها چه ارتباطی با component ها دارن
برای مشاهده هر ویدئو روی عنوان ویدئو کلیک کنید
01 - user component example
02 - what is props
03 - props destructuring
04 - spread in props
05 - default props
06 - children props
07 - props in class component
08 - default props in class component
09 - card component with props
10 - conclusion
دانلود فایل های این فصل
حالا وقتش رسیده بریم سراغ طراحی یه پروژه با ریکت ، تا به صورت کامل موضوع component ها و prop ها رو درک کنیم ، و همچنین با ساختار پوشه بندی یه پروژه ریکتی به صورت استاندارد تر آشنا بشیم.
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - project introduction
02 - project structure
03 - header component
04 - about component
05 - service component - part1
06 - service component - part2
07 - blog component - part1
08 - blog component - part1
09 - footer component
حالا بریم و با رویداد ها (event) توی ریکت آشنایی پیدا کنیم ، ببینیم چطور میتونیم توی react رویداد ها رو مدیریت کنیم و با event object یا همون شی رویداد هم آشنا بشیم
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - react event vs js event
02 - click event in class component
03 - arrgument in event handler
04 - event object in react
فرم ها (form) یه بخش جدایی ناپذیر از وبسایت ها هستند و تقریبا سایتی پیدا نمیشه که از فرم ها توش استفاده نشده باشه ، پس بریم و با موضوع form ها توی react آشنا بشیم.
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - input type text
02 - form select
03 - checkbox
04 - checkbox challenge
05 - radio button
بریم با یکی از مهم ترین موضوعات react یعنی state ها آشنا بشیم.
برای دنلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - why use state
02 - render , re-render
03 - useState
04 - react developer tools
05 - useState - state type
06 - useState - array in state
07 - useState - object in state
خب بریم سراغ رندر شرطی یا همون conditional rendering توی ریکت
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - falsy and turthy vale
02 - evaluate AND (&&) operator
03 - conditional rendering example
04 - conditional rendering example
05 - counter challenge
06 - counter challenge answer
07 - function as props
حالا بریم یه مینی پروژه با هم انجام بدیم تا چیزایی که تا الان یاد گرفتیم رو در عمل ازش استفاده کنیم ، میخوایم یه ماشین حساب جمع و چور با هم طراحی کنیم تا به موضوع state ها کامل مسلط بشیم و مطالب جدیدی رو با انجام این مینی پروژه یاد بگیریم.
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - intro mini project
02 - html
03 - css
04 - useState for screen result
05 - clear and c button
06 - equal button
07 - equal button
08 - dot button
09 - dot button
10 - useState vs regular variable
11 - install mathjs package
12 - package.json , package-lock.json
حالا بریم سراغ یکی از موضوعات به شدت پرکاربرد و مهم توی ریکت یعنی useEffect ، هوک useEffect یکی از هوک های خیلی پر کاربرد هست توی اپلیکیشن های ریکتی و توی این فصل یه آشنایی مقدماتی باهاش پیدا میکنیم ، و توی فصل های آینده با جزئیات بیشتر کاربرد هاش رو یاد میگیریم با هم.
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - change className challenge
02 - challenge answer
03 - when to use useEffect
04 - start with useEffect
05 - useEffect - part1
06 - useEffect - part2
07 - useEffect - part3
خب حالا بریم با لیست ها توی react و key prop توی لیست ها آشنا بشیم ، list ها توی ریکت یکی از موضوعات خیلی ساده و در عین حال پرکاربرد هستن که توی این فصل یاد میگیرم چطور لیست ها رو توی ریکت مدیریت کنیم.
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - list in react
02 - key prop in lists
03 - tips for key prop
04 - exercise
یکی از سوالاتی که زیاد پرسیده میشه اینه که چطور میتونیم از bootstrap توی ریکت استفاده کنیم؟ توی این فصل روش اصولی و درستِ استفاده از بوت استرپ توی react و استفاده از پکیج react-bootstrap رو واستون توضیح دادم.
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - use from bootstrap in react
02 - install bootstrap with npm
03 - install react-bootstrap
04 - importing component
05 - accordion component
06 - finall word
خب وقتش رسیده بریم سراغ یکی از مهم ترین فصل های دوره ریکت ، یعنی فصل آمـــــــــــــوزش مقدماتی پکیج react-router-dom ،توی این فصل یه مینی پروژه ساده رو به صورت spa (single page application) پیاده سازی میکنیم.
فصل بعد از این فصل هم در قالب یه پروژه عملی مباحث پیشرفته ی react-router-dom رو بهتون آموزش میدم.
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - intro
02 - spa vs mpa
03 - react-router-dom install
04 - route - part1
05 - route - part2
06 - navbar component
07 - error 404
08 - NavLink - part1
09 - NavLink - part2
خب بریم با هم یه پروژه spa رو پیاده سازی کنیم که از تمام مفاهیمی که تا الان یاد گرفتیم به صورت ترکیبی استفاده کنیم و همچنین با انجام این پروژه مفاهیم خیلی پیشرفته react-router-dom رو یاد میگیریم با هم.
برای دانلود هر ویدئو روی عنوان ویدئو کلیک کنید
01 - intro
02 - install packages
03 - project structer
04 - pages
05 - routes
06 - fonts
07 - navbar component - part1
08 - navbar component - part2
09 - home page - part1
10 - home page - part2
11 - home page - part3
12 - footer component
13 - useParam - part1
14 - useParam - part2
15 - useParam - part3
16 - about page
17 - nesting route
18 - nesting route
19 - nesting route - OutLet
20 - nesting route - useRoutes
21 - Navigate component
22 - private vs public Route
23 - private routes
24 - login page
25 - login page
26 - sweetalert package
27- useNavigate hook
28 - login & logout - part1
29 - login & logout - part2
30 - question
بریم سراغ مبحث جذاب api و کار کردن با api و همچنین آشنایی با دو پکیج axios و json-server و آشنایی با متد های GET و POST و PUT و DELETE و PATCH
برای دانلود هر ویدئو روی عنوان هر ویدئو کلیک کنید
01 - intro
02 - what is api
03 - what is json
04 - working with api
05 - working with api
06 - json-server package
07 - http get method
08 - http post method
09 - http delete method
10 - http patch method
11 - http put method
12 - axios package
13 - conclusion
بریم سراغ یه پروژه که توش مباحث فصل قبل رو در عمل به کار بگیریم و بهش مسلط بشیم
برای دانلود هر ویدئو روی عنوان هر ویدئو کلیک کنید
01 - intro
02 - project structer
03 - fonts
04 - install packages
05 - react-icons package
06 - json-server package
07 - routes
08 - navbar component
09 - ArticleItem component
10 - Home page - part1
11 - Home page - part2
12 - AddArticle Page - part1
13 - AddArticle Page - part2
14 - AddArticle Page - part3
15 - AddArticle Page - part4
16 - AddArticle Page - part5
17 - AddArticle Page - part6
18 - AddArticle Page - part6
19 - Article Page - part1
20 - Article Page - part2
21 - Article Page - part3
22 - Article Page - part4
23 - Article Page - part5
24 - Article Page - part6
25 - Article Page - part7
26 - EditArticle Page - part1
27 - EditArticle Page - part2
28 - EditArticle Page - part3
29 - EditArticle Page - part4
و اما بریم با هوک های (react hooks) مهم ریکت آشنا بشیم
برای دانلود هر ویدئو روی عنوان هر ویدئو کلیک کنید
01 - intro
02 - rules of hooks
03 - useContext - part1
04 - useContext - part2
05 - useContext - part3
06 - useRef - part1
07 - useRef - part2
08 - useRef - part3
09 - useState - part1
10 - useState - part2
11 - useState - part3
12 - useState - part4
13 - useEffect - part1
14 - useEffect - part2
15 - useEffect - part3
16 - useEffect - part4
17 - useEffect - part5
18 - useMemo part1
19 - useMemo part2
20 - useMemo part3
21 - useMemo part4
22 - memo
23 - memo vs useMemo
24 - primitive vs reference values
25 - useCallback part1
26 - useCallback part2
حالا که توی فصل قبل با پر کاربرد ترین هوک های ریکت آشنا شدیم وقتش رسیده با موضوع هوک های سفارشی (custom hook) آشنا بشیم.
برای دانلود هر ویدئو روی عنوان هر ویدئو کلیک کنید
01 - useCounter
02 - useFetch part1
03 - useFetch part2
04 - useFetch part3
05 - useFetch part4
حالا بریم یاد بگیریم چطور میتونیم پروژه ریکتی که ساختیم رو روی سرور deploy کنیم
برای دانلود هر ویدئو روی عنوان هر ویدئو کلیک کنید
01 - liara intro
02 - deploy on liara part2
03 - deploy on liara part2
04 - deploy on liara part3
نوبتی هم باشه نوبت میرسه به آموزش صفحه بندی (pagination) توی ریکت
برای دانلود هر ویدئو روی عنوان هر ویدئو کلیک کنید
01 - intro
02 - install react-paginate
03 - work with react-paginate
04 - work with react-paginate
05 - work with react-paginate
06 - work with react-paginate
07 - work with react-paginate
08 - work with react-paginate
09 - work with react-paginate
توی فصل های قبل یاد گرفتیم چطور میتونیم با api ارتباط برقرار کنیم و واسه ساخت یک api فیک از پکیج json-server استفاده کردیم ، توی این فصل میخوایم با یک api واقعی کار کنیم و بهتر درک کنیم ارتباط بین front-end و back-end چطور برقرار میشه و توی پروژه های واقعی دقیقا چه اتفاقی میوفته
برای دانلود هر ویدئو روی عنوان هر ویدئو کلیک کنید
01 - intro
02 - typeof database
03 - install xampp
04 - create database
05 - api setup
06 - api docs - part1
07 - api docs - part2
08 - api docs - part3
09 - Home Page Refactor
10 - Article Page Refactor
11 - delete article
12 - add article
13 - edit article
14 - Articles Page
15 - Articles Page
16 - Articles Page
17 - Articles Page
18 - Articles Page
19 - Articles Page
20 - Articles Page
21 - Articles Page
22 - Articles Page
23 - Articles Page
24 - Home Page
25 - Home Page
26 - Home Page
27 - Home Page
28 - Home Page
29 - Home Page
30 - Home Page
31 - Home Page
32 - Home Page
33 - Home Page
34 - Home Page
35 - Home Page
36 - Home Page
37 - Home Page
38 - create courses table
39 - api setup
40 - api docs
41 - CourseItem Component
42 - CourseItem Component
43 - CourseItem slider
44 - Courses Page
45 - Courses Page
46 - Courses Page
47 - Courses Page
48 - Courses Page
49 - Courses Page
2,699,000 تومان