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