Never stop talking " STOP the Gaza Genocide "
  • Lesson.No : 37
  • 00:10:55

  • React For Beginners 37: Todo App Part 10 Separating JSX Into Components

  • Play

Course Lessons

  1. 1- React For Beginners 1 : Introduction To React
  2. 2- React For Beginners 2: Installing Required Tools
  3. 3- React For Beginners 3 : Create React App Using Vite
  4. 4- React For Beginners 4 : How React App Works
  5. 5- React For Beginners 5 : Creating A Component In React
  6. 6- React For Beginners 6 : Auto Format React Code With Prettier
  7. 7- React For Beginners 7 : What Is JSX In React
  8. 8- React For Beginners 8 : Reusability of Components In React
  9. 9- React For Beginners 9 : What are Props In React
  10. 10- React For Beginners 10 : Destructuring Props
  11. 11- React For Beginners 11 : Immutability of Props
  12. 12- React For Beginners 12 : Passing Arrays & Objects To Components Using Props
  13. 13- React For Beginners 13 : Rendering Arrays Or Lists In React
  14. 14- React For Beginners 14 : Rendering Array Of Objects In React
  15. 15- React For Beginners 15 : Rendering Components Inside A Loop
  16. 16- React For Beginners 16 : Conditionally Rendering JSX & Components
  17. 17- React For Beginners 17 : Conditional Rendering Using Element Variables
  18. 18- React For Beginners 18 : Using Ternary Operators In React
  19. 19- React For Beginners 19: Conditionally Rendering List Items
  20. 20- React For Beginners 20 : Conditionally Rendering A Message Using Ternary
  21. 21- React For Beginners 21 : Event Handling In React
  22. 22- React For Beginners 22 : State In React, Props V/S State In React
  23. 23- React For Beginners 23: State In React
  24. 24- React For Beginners 24: Creating Multiple States In React
  25. 25- React For Beginners 25: Handling Input Fields In React
  26. 26- React For Beginners 26: Handling Multiple Inputs In React
  27. 27- React For Beginners 27: Handling Form Submission In React
  28. 28- React For Beginners 28: Todo App Part 1 Setting Up The App
  29. 29- React For Beginners 29: Todo App Part 2 Preview Of The App
  30. 30- React For Beginners 30: Todo App Part 3 Creating Input Component
  31. 31- React For Beginners 31: Todo App Part 4 Submitting Todo Items
  32. 32- React For Beginners 32: Todo App Part 5 Displaying Todos
  33. 33- React For Beginners 33: Todo App Part 6 Inline Styling In React Components
  34. 34- React For Beginners 34: TodoApp Part 7 CSS Stylesheets To Style Components
  35. 35- React For Beginners 35: Todo App Part 8 CSS Modules For Styling
  36. 36- React For Beginners 36: Todo App Part 9 Creating Header & Styling It
  37. 37- React For Beginners 37: Todo App Part 10 Separating JSX Into Components
  38. 38- React For Beginners 38: Todo App Part 11 Styling The Form
  39. 39- React For Beginners 39: Todo App Part 12 Styling Todo Items
  40. 40- React For Beginners 40: Todo App Part 13 Adding A Delete Button
  41. 41- React For Beginners 41: Todo App Part 14 Delete Functionality In React
  42. 42- React For Beginners 42: Todo App Part 15 Adding Complete Task Functionality
  43. 43- React For Beginners 43: Marking Todo Items As Complete
  44. 44- React For Beginners 44: Counting Completed & Total Todos
  45. 45- React For Beginners 45: Sorting Items In A Todo List
  46. 46- React For Beginners 46: Recipe App Introduction
  47. 47- React For Beginners 47: Setting Up Project & Making API Calls Using Postman
  48. 48- React For Beginners 48: useEffect Hook In React
  49. 49- React For Beginners 49: Making API Call In React
  50. 50- React For Beginners 50: Creating State To Save Food Data
  51. 51- React For Beginners 51: Building The Food List Component
  52. 52- React For Beginners 52: Food Item Component
  53. 53- React For Beginners 53: Creating The Nav Component
  54. 54- React For Beginners 54: Creating The Search Component
  55. 55- React JS 18 Tutorial For Beginners 2023 Part 55: Styling The Food Item Component
  56. 56- React For Beginners 56: Outer Container Component
  57. 57- React For Beginners 57: Creating The Inner Container Component
  58. 58- React For Beginners 58: Creating The Food Detail Component
  59. 59- React For Beginners 59: Fetching Recipes From API
  60. 60- React For Beginners 60: Fetching Recipe Instructions
  61. 61- React For Beginners 61: Designing The Recipe Detail Component
  62. 62- React For Beginners 62: Fetching Ingredients
  63. 63- React For Beginners 63: Splitting Items Into Multiple Components
  64. 64- React For Beginners 64: Styling Items Container
  65. 65- React For Beginners 65: useReducer Hook In React
  66. 66- React For Beginners 66: Using Object As State In useReducer
  67. 67- React For Beginners 67:Using Complex Object As State In useReducer
  68. 68- React For Beginners 68: Understanding Reducer Using Bank Account Example
  69. 69- React For Beginners 69: React Router Part 1: Server Side Rendering v/s Client Side Rendering
  70. 70- React For Beginners 70: React Router Part 2 : Creating Routes
  71. 71- React For Beginners 71: React Router Part 3 Link Component In React
  72. 72- React For Beginners 72: React Router Part 4 Nesting Routes
  73. 73- React For Beginners 73: React Router Part 5 Dynamic Routes
  74. 74- React For Beginners 74: React Router Part 6 useNavigate Hook In React
  75. 75- React For Beginners 75: Context API In React
  76. 76- React For Beginners 76: Separating Context Into Its Own File In React
  77. 77- React For Beginners 77: Sharing Context With Other Components In React
  78. 78- React For Beginners 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