React Tutorial And Projects Course

About This Course

This is a free Course.

Please don’t forget to support our causes by helping us fund our free ICT training classes and befriending events for the elderly.

You can learn more about ways to support our cause Here. 

What I will learn?

  • React
  • Projects

Course Curriculum

React Tutorial And Projects Course

  • 1. What is React.
    05:42
  • 2. Goals.
    01:60
  • 3. Structure.
    00:57
  • 4. Course Requirements.
    01:60
  • 5. Dev Environment Setup.
    04:42
  • 6. Text Editor Setup.
    01:55
  • 7. Video Blur Fix.
    01:37
  • 8. Course Review.
    00:33
  • 1. Import and Export (ES6 Modules).
    26:33
  • 10. Passing Methods to Children Components to Work with State.
    14:43
  • 11. Conditionals in JSX.
    10:47
  • 2. Class Based Components in React.
    00:00
  • 3. Functional VS Class Based Components.
    03:28
  • 4. State.
    30:40
  • 5. Alternative State Syntax.
    06:01
  • 6. Book Mini Project.
    10:15
  • 7. Events.
    09:33
  • 8. this.setState.
    10:31
  • 9. Passing Methods and Prop Drilling.
    12:31
  • 1. Command Line Basics.
    06:40
  • 2. NPM Basics.
    00:00
  • 3. What is Create-react-app, Babel, Webpack.
    01:58
  • 4. Install Create-react-app.m
    00:00
  • 5. Folder Structure.
    09:05
  • 6. Remove Boilerplate.
    01:36
  • 1. First Component.
    10:14
  • 10. Props.
    00:00
  • 11. Props – Destructuring.
    04:03
  • 12. Props – Children.
    06:29
  • 13. Simple List.
    08:59
  • 14. Proper List.
    07:38
  • 15. Key Prop and Spread Operator.
    06:03
  • 16. Event Basics.
    12:20
  • 17. Import and Export Statements.
    12:13
  • 18. Free Hosting.
    04:57
  • 2. Text Editor Setup.
    08:16
  • 3. First Component in Detail.
    06:49
  • 4. JSX Rules.
    00:00
  • 5. Nested Components and Tools.
    05:55
  • 6. Mini Book Project.
    08:99
  • 7. CSS.
    11:42
  • 8. JSX – CSS.
    06:50
  • 9. JSX – Javascript.
    07:60
  • 1. Intro.
    02:20
  • 10. useState – Multiple State Values.
    03:16
  • 11. Simple Counter.
    05:52
  • 12. Functional Update Form.
    12:44
  • 14. useEffect – Basics.
    10:09
  • 15. useEffect – Conditional.
    03:53
  • 16. useEffect – Dependency List.
    05:32
  • 17. useEffect – Cleanup Function.
    12:10
  • 18. useEffect – Fetch Data.
    12:04
  • 19. Multiple Returns – Basics.
    05:39
  • 20. Multiple Returns – Fetching Example.
    14:57
  • 21. Short-Circuit Evaluation.
    10:42
  • 22. Ternary Operator.
    08:39
  • 23. ShowHide Component.
    08:45
  • 25. Form Basics.
    08:38
  • 26. Controlled Inputs.
    09:16
  • 27. Add Item to the List.
    00:00
  • 28. Multiple Inputs.
    00:00
  • 3. Install Starter.
    02:07
  • 30. useRef.
    09:51
  • 32. useReducer – useState Setup.
    13:32
  • 33. useReducer – Refactor.
    07:23
  • 34. useReducer – Add Item.
    15:59
  • 35. useReducer – Remove Item.
    07:42
  • 36. Prop Drilling.
    00:00
  • 37. Context API useContext.
    11:46
  • 39. Custom Hooks – useFetch.
    00:00
  • 39. Custom Hooks – useFetch.
    00:00
  • 4. Starter Overview.
    09:40
  • 40. PropTypes – Setup.
    00:00
  • 41. PropTypes – Images.
    00:00
  • 42. PropTypes – Default Values.
    00:00
  • 43. React Router Intro.
    05:11
  • 44. React Router – Basic Setup.
    09:58
  • 45. React Router – Error and Switch Component.
    03:01
  • 46. React Router – Links.
    04:31
  • 47. React Router – Url Params and Placeholder.
    14:29
  • 48. React Optimization Warning!!!!.
    03:30
  • 49. React.memo.
    08:29
  • 5. useState – Simple Use Case.
    09:43
  • 50. useCallback.
    08:10
  • =51. useMemo.
    06:15
  • 52. useCallback – Fetch Example.
    03:28
  • 6. useState – Basics.
    12:02
  • 7. General Rules of Hooks.
    02:51
  • 8. useState – Array Example.
    13:47
  • 9. useState – Object Example
    00:00
  • 10. Tours – Remove Tour.
    06:56
  • 11. Reviews – Intro.m
    00:23
  • 12. Reviews – Info and React-Icons.
    06:09
  • 13. Reviews – Basic Setup.
    00:00
  • 14. Reviews – Prev and Next.
    06:35
  • 15. Reviews – Random.
    00:00
  • 16. Accordion – Intro.
    00:14
  • 17. Accordion – Complete.
    09:51
  • 18. Menu – Intro.
    00:00
  • 19. Menu – Display Items.
    07:52
  • 2. Starter Project – Install and Overview.
    03:43
  • 20. Menu – Buttons (manual approach).
    04:50
  • 21. Menu – all Button.
    02:35
  • 22. Menu – Categories Buttons (dynamic approach).
    08:31
  • 23. Tabs – Intro.
    00:46
  • 24. Tabs – Fetch Jobs.
    07:17
  • 25. Tabs – Display First Job.
    06:35
  • 26. Tabs – Display Buttons.
    06:57
  • 27. Slider – Intro.
    00:27
  • 28. Slider – Setup.
    10:52
  • 29. Slider – CSS Overview.
    07:45
  • 3. Birthday Reminder – Intro.
    00:36
  • 30. Slider – Setup Classes.
    07:28
  • 31. Slider – Prev and Next Buttons.
    03:20
  • 32. Slider – Autoplay.
    07:20
  • 33. Slider – Alternative.
    06:35
  • 34. Lorem Ipsum – Intro.
    01:3131
  • 35. Lorem Ipsum – Structure.
    08:07
  • 36. Lorem Ipsum – Complete.
    08:16
  • 37. Color Generator – Intro.
    01:44
  • 38. Color Generator – Structure.
    08:38
  • 39. Color Generator – Color Values and Error.
    06:54
  • 4. Birthday Reminder – Setup.
    05:3737
  • 40. Color Generator – Single Color
    16:29
  • 41. Color Generator – Copy To Clipboard.
    09:05
  • 42. Grocery Bud – Intro.
    01:31
  • 43. Grocery Bud – Structure.
    10:36
  • 44. Grocery Bud – Add Items.
    09:34
  • 45. Grocery Bud – Alert.
    09:44
  • 46. Grocery Bud – Clear Items.
    02:12
  • 47. Grocery Bud – Remove Item.
    04:40
  • 48. Grocery Bud – Edit Item.
    07:13
  • 49. Grocery Bud – Local Storage.
    04:15
  • 5. Birthday Reminder – Complete.
    06:10
  • 50. Navbar – Intro
    00:40
  • 51. Navbar – Basic Structure.
    08:52
  • 52. Navbar – Data.
    09:15
  • 53. Navbar – Simple Toggle.
    02:56
  • 54. Navbar – Class Toggle.
    04:10
  • 55. Navbar – useRef.
    09:01
  • 56. SidebarModal – Intro.
    00:50
  • 57. SidebarModal – Structure.
    09:02
  • 58. SidebarModal – Context.
    10:24
  • 59. SidebarModal – Complete.
    08:07
  • 6. Tours – Intro.
    01:01
  • 60. Stripe – Intro.
    02:19
  • 61. Stripe – Context Boilerplate.
    09:25
  • 62. Stripe – Navbar.
    07:00
  • 63. Stripe – Hero.
    02:46
  • 64. Stripe – Sidebar.
    00:00
  • 65. Stripe – Submenu.
    04:28
  • 66. Stripe – Location.
    09:46
  • 67. Stripe – Links.
    09:31
  • 68. Stripe – Hide Submenu.
    04:21
  • 69. Cart – Intro.
    00:49
  • 7. Tours – Fetch Data.
    11:23
  • 70. Cart – Setup Overview.
    07:40
  • 71. Cart – useReducer Setup.
    06:51
  • 72. Cart – Clear Cart
    04:49
  • 73. Cart – Remove Single Item.
    04:29
  • 74. Cart – Increase.
    05:04
  • 75. Cart – Decrease.
    04:00
  • 76. Cart – Get Totals.
    11:42
  • 77. Cart – Fetch Data.
    00:00
  • 78. Cart – Toggle Amount.
    00:00
  • 79. Cocktails – Intro.
    00:00
  • 8. Tours – Display Tours.
    00:00
  • 80. Cocktails – Additional Info
    09:37
  • 81. Cocktails – Setup Overview.
    00:00
  • 82. Cocktails – React Router Setup
    00:00
  • 83. Cocktails – Navbar.
    00:00
  • 84. Cocktails – About and Error.
    00:00
  • 85. Cocktails – Context API Setup.
    00:00
  • 86. Cocktails – API Overview.
    00:00
  • 87. Cocktails – Fetch Drinks.
    00:00
  • 88. Cocktails – Display List.
    10:21
  • 89. Cocktails – Search Form.
    00:00
  • 9. Tours – Toggle Info.
    00:00
  • 90. Cocktails – Single Cocktail Page.
    00:00
  • 91. Hosting (Netlify) – Drag and Drop.
    00:00
  • 92. Hosting (Netlify) – Continuous Deployment.
    00:00
  • 10. Pagination – Setup.
    00:00
  • 11. Pagination – FetchDisplay List.
    00:00
  • 12. Pagination – Paginate Logic.
    00:00
  • 13. Pagination – Display Single Page.
    00:00
  • 14. Pagination – Display Buttons.
    00:00
  • 15. Pagination – Prev and Next Buttons.
    00:00
  • 16. Stock Photos – Intro.
    01:30
  • 17. Stock Photos – Setup.
    09:10
  • 18. Stock Photos – Initial Fetch.
    04:02
  • 19. Stock Photos – ENV VAR.
    10:01
  • 2. Markdown – Intro.
    01:45
  • 20. Stock Photos – Display Photos.
    13:30
  • 21. Stock Photos – Scroll Event.
    11:27
  • 22. Stock Photos – Infinite Scroll.
    07:34
  • 23. Stock Photos – Search Query.
    09:27
  • 24. Stock Photos – Complete.
    04:56
  • 25. Stock Photos – useEffect Warning Alternative.
    01:45
  • 26. Dark Mode – Intro.
    01:02
  • 27. Dark Mode – Setup.
    09:26
  • 28. Dark Mode – moment.js.
    05:41
  • 29. Dark Mode – Toggle Theme.
    12:09
  • 3. Markdown – Setup.
    05:31
  • 30. Dark Mode – Local Storage.
    00:00
  • 31. Movie DB – Intro.
    46:00
  • 32. Movie DB – Setup.
    01:52
  • 33. Movie DB – API KEY.
    11:08
  • 34. Movie DB – React Router.
    05:17
  • 35. Movie DB – Initial Fetch.
    15:27
  • 36. Movie DB – Movies Component.
    08:36
  • 37. Movie DB – Search Form.
    08:21
  • 38. Movie DB – Single Movie.
    12:41
  • 39. Movie DB – Refactor to useFetch.
    13:47
  • 4. Markdown – Complete.
    07:52
  • 40. Hacker News – Intro.
    01:56
  • 41. Hacker News – Setup
    02:44
  • 42. Hacker News – API Overview.
    05:42
  • 43. Hacker News – Basic Structure.
    15:01
  • 44. Hacker News – Fetch Stories.
    09:31
  • 45. Hacker News – Display Stories.
    07:56
  • 46. Hacker News – Remove Story.
    04:59
  • 47. Hacker News – Search Form.
    09:42
  • 48. Hacker News – Prev and Next Buttons.
    14:17
  • 49. Quiz – Intro.
    00:00
  • 5. Random Person – Intro.
    00:00
  • 50. Quiz – Setup.
    02:08
  • 51. Quiz – API.
    03:38
  • 52. Quiz – Context Setup.
    09:50
  • 53. Quiz – Fetch Questions.
    11:37
  • 54. Quiz – Display Question.
    13:19
  • 55. Quiz – Next Question.
    04:37
  • 56. Quiz – checkAnswer.
    05:23
  • 57. Quiz – Show Modal.
    07:48
  • 58. Quiz – Setup Form Structure.
    13:3232
  • 59. Quiz – HandleChange.
    04:56
  • 6. Random User – Setup.
    13:52
  • 60. Quiz – HandleSubmit.
    08:30
  • 61. Quiz – Randomize Correct Answer.
    06:46
  • 7. Random User – Fetch User
    13:31
  • 8. Random User – Buttons.
    06:14
  • 9. Pagination- Intro.
    02:33
  • 1. Intro.
    04:11
  • 10. Mock Data
    00:00
  • 11. Info Component.
    00:00
  • 12. Card Component.
    13:13
  • 13. Followers Component.
    05:25
  • 14. Repos Setup.
    02:49
  • 15. Fusion Charts Info.
    01:35
  • 16. First Chart.
    03:46
  • 17. Fusion Charts API.
    09:55
  • 18. Fusion Charts – Configuration Options.
    02:30
  • 19. Fusion Charts – Pie Chart.
    07:13
  • 20. Calculate Most Used Language.
    18:43
  • 21. Fusion Charts – Responsive.
    04:56
  • 22. Fusion Charts – Doughnut Chart.
    05:08
  • 23. Calculate Most Popular Language.
    08:00
  • 24. Fusion Charts – Column and Bar Charts.
    04:36
  • 25. Stars and Forks – Functionality.
    07:48
  • 26. Search Component.
    00:00
  • 27. Requests.
    00:00
  • 28. Error.
    07:14
  • 29. Search User.
    11:36
  • 3. Starter Project
    02:50
  • 30. Loading Spinner
    00:00
  • 31. Repos and Followers.
    08:59
  • 32. Promise.allSettled().
    12:57
  • 33. Auth0 Info
    01:36
  • 34. Auth0 Setup.
    13:27
  • 35. Login – Logout.
    00:00
  • 36. Private Route.
    10:15
  • 37. Wrapper.
    06:37
  • 38. Local Storage.
    02:57
  • 39. Deploy Gotchas.
    03:26
  • 4. Setup Info.
    10:03
  • 40. Deploy Project.
    07:09
  • 5. React Router Setup.
    06:51
  • 6. React Router Error.
    02:37
  • 7. Error Page.
    03:33
  • 8. Login Page.
    04:37
  • 9. Context API.
    08:45
  • 1. Intro.
    05:11
  • 10. Sidebar.
    09:09
  • 11. Products Context Setup
    18:12
  • 12. Sidebar Toggle.
    05:38
  • 13. Hot Reloading Fix.
    04:07
  • 14. Error Page.
    03:42
  • 15. About, Checkout Page.
    08:28
  • 16. Home Page – Hero.
    06:52
  • 18. Home Page – Contact.
    06:09
  • 18. Home Page – Contact.
    02:49
  • 19. Formspree.
    06:09
  • 21. Fetch Products Overview.
    00:00
  • 22. Fetch Products Complete.
    11:47
  • 23. Featured Products.
    12:00
  • 24. Format Price
    06:44
  • 25. Fetch Single Product.
    07:41
  • 26. Single Product – Loading, Error.
    11:22
  • 27. Single Product – Base Return.
    13:29
  • 28. Single Product – Product Images.
    13:13
  • 29. Single Product – Stars (manual approach)
    12:58
  • 3. Starter Install.
    03:14
  • 30. Single Product – Stars (array approach)
    06:33
  • 31. Single Product – Add To Cart – Colors
    12:56
  • 32. Single Product – Add To Cart – Amount Buttons.
    08:11
  • 33. Filter Context Setup
    12:48
  • 34. Products Page – Grid View.
    07:24
  • 35. Products Page – List View.
    09:04
  • 36. Sort Component – Basic Setup.
    09:10
  • 37. Sort Component – View Buttons.
    04:23
  • 38. Sort Component – Controlled Input.
    08:33
  • 39. Sort Functionality.
    15:36
  • 4. Stater Overview.
    11:30
  • 40. Filters – Default Values
    03:31
  • 41. Filters – Text.
    17:07
  • 42. Filters – Unique Values.
    10:03
  • 43. Filters – Categories.
    09:12
  • 44. Filters – Companies
    03:34
  • 45. Filters – Colors.
    11:05
  • 46. Filters – Price.
    04:52
  • 47. Filters – Shipping and Clear Filters.
    07:50
  • 48. Filter Functionality – Setup and Text Input.
    11:42
  • 49. Filter Functionality – Rest of the Filters.
    11:08
  • 5. Styled Components – Basics.
    15:19
  • 50. Cart Context Setup.
    03:38
  • 51. AddToCart – Setup.
    05:48
  • 52. AddToCart Reducer – New Item.
    06:33
  • 53. AddToCart Reducer – Existing Item.
    07:13
  • 54. Cart Page Setup.
    04:37
  • 55. localStorage.
    05:24
  • 56. Cart Content.
    03:45
  • 57. Cart Columns.
    02:35
  • 58. Cart Totals.
    03:43
  • 59. Cart Item.
    09:48
  • 6. React Router – Setup.
    16:07
  • 60. Cart – Remove Item and Clear Cart.
    04:49
  • 61. Cart – Toggle Amount.
    10:08
  • 62. Cart – Calculate Totals.
    05:19
  • 63. Switch React Version.
    07:34
  • 65. Auth0 – Setup.
    01:36
  • 66. Auth0 – Provider.
    05:27
  • 67. useContext Setup.
    06:55
  • 68. Auth0 – LoginLogout Buttons.
    03:38
  • 69. Auth0 – Toggle Values.
    07:44
  • 7. Navbar.
    13:27
  • 70. Auth0 – Hide Checkout.
    06:26
  • 71. Auth0 – Private Route.
    08:39
  • 73. Install Extra Packages.
    02:12
  • 74. AuthWrapper.
    11:41
  • 75. Fix Warnings.
    06:27
  • 76. Stripe and Netlify Accounts.
    03:27
  • 77. Install and Setup netlify-cli.
    11:03
  • 78. First Netlify Function.
    04:43
  • 79. Stripe Checkout – Setup.
    14:35
  • 8. Cart Buttons.
    06:54
  • 80. Stripe Checkout – Imports.
    12:23
  • 81. Stripe Checkout – State Variables.
    08:49
  • 82. Stripe Checkout – Basic Return.
    11:08
  • 83. Netlify Function – create-payment-setup.
    11:15
  • 84. Stripe Checkout – Get Client Secret.
    00:00
  • 85. Stripe Checkout – Complete.
    00:00
  • 86. Deploy To Netlify
    00:00
  • 9. Footer.
    00:00
  • 10. More Actions.
    02:14
  • 11. More Complicated State.
    06:25
  • 12. Actions as Variables.
    06:48
  • 13. Separate Reducer.m
    02:55
  • 14. Refactor.
    03:02
  • 15. Provider Setup.
    02:53
  • 16. connect Navbar.
    06:33
  • 17. connect CartContainer.
    05:35
  • 18. dispatch – Clear Cart.
    05:16
  • 19. Switch Statement Syntax.
    02:49
  • 20. Reducer Setup.
    01:43
  • 21. REMOVE action setup.
    04:40
  • 22. REMOVE action complete.
    08:24
  • 23. INCREASE and DECREASE action setup.
    03:43
  • 24. INCREASE complete.
    05:59
  • 25. DECREASE complete.
    05:10
  • 26. GET_TOTALS action.
    09:38
  • 27. Refactor DECREASE.
    03:42
  • 28. TOGGLE_AMOUNT action.
    07:08
  • 29. Reducer Default State.
    04:41
  • 3. Setup Project.
    05:28
  • 30. Action Creators.
    04:31
  • 31. Redux Devtools
    04:44
  • 4. Quick Redux Info.
    03:19
  • 5. Store.
    02:57
  • 6. Reducer.
    04:02
  • 7. getState.
    02:36
  • 8. First Action.
    05:09
  • 9. Return and Action Bugs.
    02:20
Free
Free
Free access this course

Course info:

Requirements

  • Computer
  • Internet
  • Basic Computer Skill
Categories Free Courses

Target Audience

  • This Course is aimed at anyone who wants to learn.