• Lesson.No : 37
  • 00:10:55

  • ReactJS Tutorial 37: Todo App Part 10 Separating JSX Into Components

  • Play

Course Lessons

  1. 1- ReactJS Tutorial 1 : Introduction To ReactJS
  2. 2- ReactJS Tutorial 2: Installing Required Tools
  3. 3- ReactJS Tutorial 3 : Create React App Using VITE
  4. 4- ReactJS Tutorial 4 : How React App Works
  5. 5- ReactJS Tutorial 5 : Creating A Component In React
  6. 6- ReactJS Tutorial 6 : Auto Format React Code With Prettier
  7. 7- ReactJS Tutorial 7 : What Is JSX In React
  8. 8- ReactJS Tutorial 8 : Reusability of Components In React
  9. 9- ReactJS Tutorial 9 : What are Props In React
  10. 10- ReactJS Tutorial 10 : Destructuring Props
  11. 11- ReactJS Tutorial 11 : Immutability of Props
  12. 12- ReactJS Tutorial 12 : Passing Arrays & Objects To Components Using Props
  13. 13- ReactJS Tutorial 13 : Rendering Arrays Or Lists In React
  14. 14- ReactJS Tutorial 14 : Rendering Array Of Objects In React
  15. 15- ReactJS Tutorial 15 : Rendering Components Inside A Loop
  16. 16- ReactJS Tutorial 16 : Conditionally Rendering JSX & Components
  17. 17- ReactJS Tutorial 17 : Conditional Rendering Using Element Variables
  18. 18- ReactJS Tutorial 18 : Using Ternary Operators In React
  19. 19- ReactJS Tutorial 19: Conditionally Rendering List Items
  20. 20- ReactJS Tutorial 20 : Conditionally Rendering A Message Using Ternary
  21. 21- ReactJS Tutorial 21 : Event Handling In React
  22. 22- ReactJS Tutorial 22 : State In React, Props V/S State In React
  23. 23- ReactJS Tutorial 23: State In React
  24. 24- ReactJS Tutorial 24: Creating Multiple States In React
  25. 25- ReactJS Tutorial 25: Handling Input Fields In React
  26. 26- ReactJS Tutorial 26: Handling Multiple Inputs In React
  27. 27- ReactJS Tutorial 27: Handling Form Submission In React
  28. 28- ReactJS Tutorial 28: Todo App Part 1 Setting Up The App
  29. 29- ReactJS Tutorial 29: Todo App Part 2 Preview Of The App
  30. 30- ReactJS Tutorial 30: Todo App Part 3 Creating Input Component
  31. 31- ReactJS Tutorial 31: Todo App Part 4 Submitting Todo Items
  32. 32- ReactJS Tutorial 32: Todo App Part 5 Displaying Todos
  33. 33- ReactJS Tutorial 33: Todo App Part 6 Inline Styling In React Components
  34. 34- ReactJS Tutorial 34: TodoApp Part 7 CSS Stylesheets To Style Components
  35. 35- ReactJS Tutorial 35: Todo App Part 8 CSS Modules For Styling
  36. 36- ReactJS Tutorial 36: Todo App Part 9 Creating Header & Styling It
  37. 37- ReactJS Tutorial 37: Todo App Part 10 Separating JSX Into Components
  38. 38- ReactJS Tutorial 38: Todo App Part 11 Styling The Form
  39. 39- ReactJS Tutorial 39: Todo App Part 12 Styling Todo Items
  40. 40- ReactJS Tutorial 40: Todo App Part 13 Adding A Delete Button
  41. 41- ReactJS Tutorial 41: Todo App Part 14 Delete Functionality In React
  42. 42- ReactJS Tutorial 42: Todo App Part 15 Adding Complete Task Functionality
  43. 43- ReactJS Tutorial 43: Marking Todo Items As Complete
  44. 44- ReactJS Tutorial 44: Counting Completed & Total Todos
  45. 45- ReactJS Tutorial 45: Sorting Items In A Todo List
  46. 46- ReactJS Tutorial 46: Recipe App Introduction
  47. 47- ReactJS Tutorial 47: Setting Up Project & Making API Calls Using Postman
  48. 48- ReactJS Tutorial 48: useEffect Hook In React
  49. 49- ReactJS Tutorial 49: Making API Call In React
  50. 50- ReactJS Tutorial 50: Creating State To Save Food Data
  51. 51- ReactJS Tutorial 51: Building The Food List Component
  52. 52- ReactJS Tutorial 52: Food Item Component
  53. 53- ReactJS Tutorial 53: Creating The Nav Component
  54. 54- ReactJS Tutorial 54: Creating The Search Component
  55. 55- ReactJS Tutorial Part 55: Styling The Food Item Component
  56. 56- ReactJS Tutorial 56: Outer Container Component
  57. 57- ReactJS Tutorial 57: Creating The Inner Container Component
  58. 58- ReactJS Tutorial 58: Creating The Food Detail Component
  59. 59- ReactJS Tutorial 59: Fetching Recipes From API
  60. 60- ReactJS Tutorial 60: Fetching Recipe Instructions
  61. 61- ReactJS Tutorial 61: Designing The Recipe Detail Component
  62. 62- ReactJS Tutorial 62: Fetching Ingredients
  63. 63- ReactJS Tutorial 63: Splitting Items Into Multiple Components
  64. 64- ReactJS Tutorial 64: Styling Items Container
  65. 65- ReactJS Tutorial 65: useReducer Hook In React
  66. 66- ReactJS Tutorial 66: Using Object As State In useReducer
  67. 67- ReactJS Tutorial 67:Using Complex Object As State In useReducer
  68. 68- ReactJS Tutorial 68: Understanding Reducer Using Bank Account Example
  69. 69- ReactJS Tutorial 69: React Router Part 1: Server Side Rendering v/s Client Side Rendering
  70. 70- ReactJS Tutorial 70: React Router Part 2 : Creating Routes
  71. 71- ReactJS Tutorial 71: React Router Part 3 Link Component In React
  72. 72- ReactJS Tutorial 72: React Router Part 4 Nesting Routes
  73. 73- ReactJS Tutorial 73: React Router Part 5 Dynamic Routes
  74. 74- ReactJS Tutorial 74: React Router Part 6 useNavigate Hook In React
  75. 75- ReactJS Tutorial 75: Context API In React
  76. 76- ReactJS Tutorial 76: Separating Context Into Its Own File In React
  77. 77- ReactJS Tutorial 77: Sharing Context With Other Components In React
  78. 78- ReactJS Tutorial 78 : Using Reducer With Context Provider In React
  79. 79- React JS Tutorial For Beginners : Part 1 Introduction To React
  80. 80- React JS Tutorial For Beginners : Part 2 Installing Required Tools
  81. 81- React JS Tutorial For Beginners : Part 3 Creating A React Project
  82. 82- React JS Tutorial For Beginners : Part 4 Understanding Significance Of React Project Files
  83. 83- React JS Tutorial For Beginners : Part 5 How React App Works
  84. 84- React JS Tutorial For Beginners : Part 6 Components In React
  85. 85- React JS Tutorial For Beginners : Part 7 Functional Components In React
  86. 86- React JS Tutorial For Beginners : Part 8 Class Components In React
  87. 87- React JS Tutorial For Beginners : Part 9 JSX
  88. 88- React JS Tutorial For Beginners : Part 10 Props In Functional Component
  89. 89- React JS Tutorial For Beginners : Part 11 Props In A Class Based Component
  90. 90- React JS Tutorial For Beginners : Part 12 Immutability Of Props
  91. 91- React JS Tutorial For Beginners : Part 13 Props v/s State
  92. 92- React JS Tutorial For Beginners : Part 14 Using State
  93. 93- React JS Tutorial For Beginners : Part 15 Using State Part 2
  94. 94- React JS Tutorial For Beginners : Part 16 Destructuring Props
  95. 95- React JS Tutorial For Beginners : Part 17 Event Handling In Functional Components
  96. 96- React JS Tutorial For Beginners : Part 18 Event Handling In Class Based Components
  97. 97- React JS Tutorial For Beginners : Part 19 Event Binding
  98. 98- React JS Tutorial For Beginners : Part 20 Using State In A Functional Component
  99. 99- React JS Tutorial For Beginners : Part 21 Conditional Rendering
  100. 100- React JS Tutorial For Beginners : Part 22 Conditional Rendering Using Elements
  101. 101- React JS Tutorial For Beginners : Part 23 Ternary Conditional
  102. 102- React JS Tutorial For Beginners : Part 24 Introduction To Map
  103. 103- React JS Tutorial For Beginners : Part 25 List Rendering
  104. 104- React JS Tutorial For Beginners : Part 26 Understanding Keys
  105. 105- React JS Tutorial For Beginners : Part 27 Rendering List Of Objects
  106. 106- React JS Tutorial For Beginners : Part 28 Rendering Array
  107. 107- React JS Tutorial For Beginners : Part 29 Handling User Input Part 1
  108. 108- React JS Tutorial For Beginners : Part 30 Handling User Input Part 2
  109. 109- React JS Tutorial For Beginners : Part 31 Form Submission
  110. 110- React JS Tutorial For Beginners : Part 32 Todo App In React Part 1
  111. 111- React JS Tutorial For Beginners : Part 33 Todo App In React Part 2
  112. 112- React JS Tutorial For Beginners : Part 34 Todo App In React Part 3
  113. 113- React JS Tutorial For Beginners : Part 35 Todo App In React Part 4 Inline Styles
  114. 114- React JS Tutorial For Beginners : Part 36 Todo App Part 5 Styling App Using CSS Stylesheet
  115. 115- React JS Tutorial For Beginners : Part 37 Todo App Part 6 Styling The App Using CSS Modules
  116. 116- React JS Tutorial For Beginners : Part 38 Todo App Part 7 Adding Header
  117. 117- React JS Tutorial For Beginners : Part 39 Todo App Part 8 Adding Form Component
  118. 118- React JS Tutorial For Beginners : Part 40 Todo App Part 9 Adding Items To Todo List
  119. 119- React JS Tutorial For Beginners : Part 41 Todo App Part 10 Creating A Todo Component
  120. 120- React JS Tutorial For Beginners : Part 42 Todo App Part 11 Rendering Todo Items
  121. 121- React JS Tutorial For Beginners : Part 43 Todo App Part 12 Creating IDs For Todo
  122. 122- React JS Tutorial For Beginners : Part 44 Todo App Part 13 Resolving Key Error
  123. 123- React JS Tutorial For Beginners : Part 45 Todo App Part 13 Delete Functionality
  124. 124- React JS Tutorial For Beginners : Part 46 Fragments In React
  125. 125- React JS Tutorial For Beginners : Part 47 Fragments Usage
  126. 126- React JS Tutorial For Beginners : Part 48 Memos In React
  127. 127- React JS Tutorial For Beginners : Part 49 Why Memos Are Required
  128. 128- React JS Tutorial For Beginners : Part 50 Using Memos
  129. 129- React JS Tutorial For Beginners : Part 51 What Are Portals
  130. 130- React JS Tutorial For Beginners : Part 52 Creating Portals
  131. 131- ReactJS Tutorial 79: Passing Complex State To Reducer
  132. 132- ReactJS Tutorial 80: Creating Custom Hooks In React