MenonMenon

27. Understand the Concept of Derived State in React App with example - React18

React 18 Course

In this video we will see Understand the Concept of Derived State in React App with example Github Repo Link https://github.com/leelanarasimha/react18-course Instagram: https://www.instagram.com/leelawebdev/ Telegram: http://t.me/LeelaWebDev Facebook Page: https://www.facebook.com/LeelaWebDev Twitter Page: https://twitter.com/leelanarsimha Linkedin: https://www.linkedin.com/in/leela-narasimha-reddy-86517948/ GitHub: https://github.com/leelanarasimha Youtube Page: https://www.youtube.com/leelawebdev If you like my video, please subscribe to my channel. My Playlists: React Complete Course: https://www.youtube.com/watch?v=LMFAaNWmKII&list=PL_euSNU_eLbfuahgrm63xLCWfpl2MaTAr Vue Complete Course: https://www.youtube.com/watch?v=x0uc670hw_8&list=PL_euSNU_eLbedoBv-RllKj_f2Yh--91nZ Angular NGRX Complete Course: https://www.youtube.com/watch?v=3WI5BEXVkmE&list=PL_euSNU_eLbdg0gKbR8zmVJb4xLgHR7BX Angular Complete Course: https://www.youtube.com/watch?v=wI18jE_LHME&list=PL_euSNU_eLbeAJxvVdJn5lhPWX9IWHhxs TypeScript Complete Course: https://www.youtube.com/watch?v=xns0Vaip4wc&list=PL_euSNU_eLbfJEwuNa43lM89yfev537Mj ES6 Complete Course: https://www.youtube.com/watch?v=tt1SkTpHUUU&list=PL_euSNU_eLbfIr88Sgtalv4W58mTW07V4 Javascript Complete Course: https://www.youtube.com/watch?v=JZmwaniKUUc&list=PL_euSNU_eLbeHPrIcllJ1_9hdcffwGuWi GIT Complete Course: https://www.youtube.com/watch?v=vMdSqMf6BPY&list=PL_euSNU_eLbegnt7aR8I1gXfLhKZbxnYX ESLint Complete Course: https://www.youtube.com/watch?v=OYrIfgi_Ghg&list=PL_euSNU_eLbeVd_eDmWzUpEmXizWQRmEm RxJS Complete Course: https://www.youtube.com/watch?v=Q-iZ1JHA0GE&list=PL_euSNU_eLbc0HclFbirIaMXaXzQJ_K4n Declarative Reactive Programming in Angular Complete Course: https://www.youtube.com/watch?v=P38auPts2vs&list=PL_euSNU_eLberdNLX5idpheqHLjdZltJy Angular CLI Complete Course Tutorial: https://www.youtube.com/watch?v=iEPegoPPHDk&list=PL_euSNU_eLbfmSwZYA3ab3a3JGQk8pQdZ Angular UnitTesting Complete Course: https://www.youtube.com/watch?v=VnaDJOucT-4&list=PL_euSNU_eLbcqJ6_Z3FOZJ8mLZ2oMFItV My Courses Playlist Page: https://www.youtube.com/c/LeelaWebDev/playlists #react #leelawebdev Join this channel to get access to perks: https://www.youtube.com/channel/UC1J-YH25LCjvLnFjy7WDqGA/join

27. Understand the Concept of Derived State in React App with example - React18

About the course

144lessons
24hours
Join now

Lessons

  1. 1. Create a Simple React App to fetch details from Dummy API - React
  2. 2. What is React. Is React Library or Framework? - React18
  3. 3. Setup Development Environment for running React in our System vsCode Extensions - React18
  4. 4. Create Basic React Project without using npm and JSX and using React createElement - React18
  5. 5. Understand about Create-React-App and Vite Build tool for creating new React App - React18
  6. 6. Create New React App using Create-React-App Command tool and explore project structure - React18
  7. 7. Rendering the root component and strict mode in the React App - React18
  8. 8. Creating Components and reusing inside other components in React App - React18
  9. 9. Styling React Components using style, className and external css file in React App - React18
  10. 10. Sending the Props data from parent component to child component in React App - React18
  11. 11. Rules Of writing JSX Code. Difference between JSX and Regular HTML code in React App - React18
  12. 12. Render Lists using map method for looping components in React App - React18
  13. 13. Conditional Rendering of the JSX using && in the React App - React18
  14. 14. Ternary Operator Conditional Rendering and && condition if else condition in React App - React18
  15. 15. Extract props in Component from object using Destructing in React App - React18
  16. 16. React Fragment and apply classes dynamically for JSX elements in React App - React18
  17. 17. Create new React project setup Events app for implementing Event Listeners - React18
  18. 18. Understand Event Listeners in React and implement Click event in React Events App - React18
  19. 19. Understand the concept of State in React and how it is usefull in Component - React18
  20. 20. Implement State using the useState in the Events React App - React18
  21. 21. React Developer Tools & how to install in different browsers for debugging React App - React18
  22. 22. Create new Grocery Project in React. Project Setup and components Creation - React18
  23. 23. Setup the components and design the JSX templates in React App - React18
  24. 24. Controlled Elements. Get the Form Details using Controlled Components with State - React18
  25. 25. Submit Add Item Form Details with Event Listeners and Controlled Elements in react App - React18
  26. 26. Lifting State up. Send Data from child to parent component in React App - React18
  27. 27. Understand the Concept of Derived State in React App with example - React18
  28. 28. Deleting the single item from the items list by Lifting state up in the React App - React18
  29. 29. Selecting the Items from list and show price only for selected list by lifting State up- React18
  30. 30. Design footer and display the items list count and total price in React App - React18
  31. 31. Create new Project Tabbing using React js - React18
  32. 32. Completing Tabbing Project in React JS and understand Children Prop in Component - React18
  33. 33. Create New Project Friends Bill Share | Project Setup in React - React18
  34. 34. Add Friend Details Component in the Bill Share App in the React App - React18
  35. 35. Create Bill Share Component to share bills between friends in React App - React18
  36. 36. Submit the Bill Details Form Component in React App - React18
  37. 37. Calculate bill logic amount and share bill between all friends in React App - React18
  38. 38. Completing Friends Bill Share Project | Display the Bill Due Details in React App - React18
  39. 39. Different Component Categories in React | Stateless | Stateful | Structural Components- React18
  40. 40. Component Composition | Create Reusable and flexible components using children Props - React18
  41. 41. Understand Component | Component Instance and React Elements and its differences - React18
  42. 42. Practical implementation of the component instance and Components in React App - React18
  43. 43. How Rendering actually works in React Application. Render phase & Commit Phase - React18
  44. 44. Understand about Render Phase, React Element Tree and Virtual DOM in React App - React18
  45. 45. Reconciliation Process, Fiber Tree in the Render Phase | How reconciler works in React - React18
  46. 46. Commit phase in the React DOM. How Updated DOM paints into the Browser - React18
  47. 47. Diffing algorithm how Virtual DOM and Fiber tree compared in Reconciliation phase - React18
  48. 48. How Diffing algorithm works in React components with Key Prop in Practical - React18
  49. 49. Pure Component functions in React. Difference between pure and impure components - React18
  50. 50. State Update Batching in React - React18
  51. 51. Setup new Books Library project | Design Navbar by dividing components in React App - React18
  52. 52. Create Books List container and display books as a list in React App - React18
  53. 53. Create Books Read List Container with Components in React App - React18
  54. 54. Books Read List Details design in BooksDb React App - React18
  55. 55. Toggle the Books List in the List Box for the BooksDB React App - React18
  56. 56. Splitting components using component composition in the booksDB in React App - React18
  57. 57. Make reusable components Listbox for the Booksdb project in React App - React18
  58. 58. Implement API Call using fetch in the useEffect hook method on component mounted - React18
  59. 59. Add Loading symbol and handle error when the network is down in the React App - React18
  60. 60. Understand useEffect Dependency array and hos we can use it in the React App - React18
  61. 61. Implement Search Box functionality with useEffect hook in the BooksDb React App - React18
  62. 62. Select a Particular Book from the Books List by lifting state up in BooksDb React App - React18
  63. 63. Fetch Single Book Details and Format the response data in BooksDb React App - React18
  64. 64. Render Fetched Single Book Details and add Loader Component in React App - React18
  65. 65. Design the Star Rating Component in BooksDb React App - React18
  66. 66. Apply hover events on the stars for showing rating for the Book In React App - React18
  67. 67. Apply StarRating Component Props and also validate using propTypes in React App - React18
  68. 68. Adding Book into the Read list with user Rating in The React App - React18
  69. 69. Get Average ratings and avoid duplicate books in the Read List in React App - React18
  70. 70. Remove the book from the Read list in the BooksDb React App - React18
  71. 71. useEffect cleanup function to execute when component re-renders & destroyed - React18
  72. 72. Cancel previous API fetch request using AbortController in the BooksDB in React App - React18
  73. 73. Implement escape Keydown event listener in the BooksDB React App - React18
  74. 74. What are React Hooks? Rules of Hooks to understand in React App - React18
  75. 75. Understand the React hook useState as asynchronous in the React App - React18
  76. 76. Persist the books Read list Data by saving in localStorage with useEffect in React App - React18
  77. 77. Introduction to useRef hook. Difference between useRef and useState hook in React App - React18
  78. 78. Access DOM element using useRef React Hook in BookDB React App - React18
  79. 79. useRef React hook to update the value for component render in the React App - React18
  80. 80. Create Fetch Books data with custom hook in the BooksDB React App - React18
  81. 81. Implement LocalStorage custom hook to save and retrieve data in BooksDB React App - React18
  82. 82. Convert Keydown Event Listener to React Custom Hook in the BooksDB React App - React18
  83. 83. What is useReducer hook. Implement Counter App with useState hook in React App - React18
  84. 84. useReducer vs useState hooks with simple counter example in React App - React18
  85. 85. Complex State Data with useReducer hook in React App - React18
  86. 86. Create a new React Quiz App using useReducer hook in React App - React18
  87. 87. Fetch Questions using Fetch API from json-server package in React App - React18
  88. 88. Display Welcome Page Component after successful loading questions from API - React18
  89. 89. Display Quiz Questions with options after starting in React App - React18
  90. 90. Handling Quiz answers user has selected whether it is corrected or wrong in React App - React18
  91. 91. Enable Next Button after user selecting the answer and assign points in React App - React18
  92. 92. Implement Progress functionality of the Quiz in React App - React18
  93. 93. Design the Quiz Finish Screen and show the result in React App - React18
  94. 94. Enable Restart button at the end of the Quiz in React App - React18
  95. 95. Implement Quiz Timer using setInterval and useReducer in the React App - React18
  96. 96. Create New React Router App using Vite Build and its options - React18
  97. 97. Create Routes in Router using createBrowserRouter in React Router V6 - React18
  98. 98. Implement 404 not Found Page using ErrorElement in React Router v6 - React18
  99. 99. Nested Routes and Outlet in React Router V6- React18
  100. 100. loader and useLoaderData api methods to load data into the router in React Router V6 - React18
  101. 101. Create new contact using Form Post action in React Router V6 - React18
  102. 102. Get dynamic Url Params in the route Loader and get Param details in React Router V6 - React18
  103. 103. Design the Update Contact Form using new route in React Router V6 - React18
  104. 104. Submit the Update Contact Form Data with the action in the React Router V6 - React18
  105. 105. NavLink Component to apply active class or styling to the link in React Router V6 - React18
  106. 106. useNavigation hook for handling global Pending UI in React Router - react18
  107. 107. Delete Contact using Form action in React Router - react18
  108. 108. useNavigate Hook to navigate routes programmatically in React Router - react18
  109. 109. Implement Search functionality using the form loader in React Router - react18
  110. 110. Get search box value with query param value controlled components in React Router - react18
  111. 111. useSubmit hook for submitting form manually on input changes in React Router - react18
  112. 112. Implement Favorite component for the contact in React Router - react18
  113. 113. useFetcher hook for mutating the form Submit in React Router - react18
  114. 114. Pathless Routes for the children routes to show error page in React Router - react18
  115. 115. Convert Object type routes to jsx routes in React Router - react18
  116. 116. Styling the React Components using Inline Styling in React - react18
  117. 117. Sharing Inline Styles across many components with JavaScript Object in React - react18
  118. 118. React Styled Components install and use package in React App - react18
  119. 119. Using Styled Components as React Components and its advantages in React App - react18
  120. 120. CSS Modules to scope the styles locally for React Components in react App - react18
  121. 121. Create New Vite App using React and React Router - react18
  122. 122. Link and NavLink difference. Page Not Found route in React Router - react18
  123. 123. CSS Modules and global keyword in CSS Modules in React Router - react18
  124. 124. Design the Login Page and app page in Travelling React App - react18
  125. 125. Nested Routes in the Sidebar and index route in Travelling React App - react18
  126. 126. Get Cities List from api using Fetch request in useEffect hook React App - react18
  127. 127. Loading Bar component and Prop Type Validations in React App - react18
  128. 128. Populate each city data in cityitem component in React App - react18
  129. 129. Populate the countries list data from cities array in React App - react18
  130. 130. useParams hook to het the dynamic params in the component in React App - react18
  131. 131. useSearchParams hook to get the query string params in React App - react18
  132. 132. useNavigate Hook to navigate programmatically in React - react18
  133. 133. What is Context API. Using context api in React Component to manage state globally - react18
  134. 134. Create new Counter Context app in React for demo on Prop Drilling scenario - react18
  135. 135. Context API. Advanced Pattern for using Context Provider and Custom Hook in React App - react18
  136. 136. Convert Cities list data into Context APi with provider and useContext API in React - react18
  137. 137. Get Single city details with city id and save it in Context Api in React Components - react18
  138. 138. Initialize Leaflet map in the React components and show markers - react18
  139. 139. Show all the city markers in the Leaflet Map In React App - react18
  140. 140. Get Current User Location using navigator geolocation in React Leaflet Map - react18
  141. 141. Get City Details with api using Lat and long in React Travel App - react18
  142. 142. Add new City details using Post Fetch api in React App - react18
  143. 143. Delete city Details using context api in t React App - react18
  144. 144. Common Design Pattern of combination of context api and reducer in React App - react18