Become a React JS and State Management Superhero + Projects

Create a React app with Create React App, open the project in VS Code, and run npm start to render Hello world in the root div via index.html and src.

Build modular React components by creating files, exporting them, and importing them to render. Organize with a components folder, add header and task list, and style with CSS and fonts.

Remove default margins and padding to create a clean background. Apply two background images with no-repeat, center and top-right positioning, and cover sizing inside a flex container with a visible border.

Build a responsive header UI in React by importing a logo asset, applying header styling, centering the logo, and styling the task list icon with colors, padding, and border radii.

Prototype a single task user interface by styling a task item with padding, shadows, and hover effects, add React icons and a radiobutton, and align elements with flexbox.

Create a reusable icon component in React that renders passed-in icons, uses props destructuring, sets a default size of 20, and enables cursor interaction for multiple icons.

Refactor the lesson into a single reusable React task component, extract icons and input, and implement a scrollable task list with max height and header-safe padding.

Learn how the use state hook tracks state in React function components, destructures the state and the function used to change it, and distinguishes state from normal variables with examples.

Learn how to create a reusable React task component by passing tasks as props, mapping with unique keys, and conditionally rendering a no-task message when the list is empty.

Build a new task component and an add task button, wire a click handler to update the tasks array, and pass the add task function as a prop.

Learn to build a React task list that adds tasks as objects with text and edit mode, edit and save inline, and conditionally render icons.

Edit and delete tasks by toggling edit mode with an index map, and save on enter with input validation to prevent empty text.

Mark a task as complete by adding a completed property, updating the task list with map, applying a line-through, and deleting after a timeout, with icon and color changes.

Set up a context API to replace prop drilling by wrapping the app with a task context provider, creating a global state store accessible to all components.

Implement React context to manage task data with a task context provider and useContext, destructuring to access tasks and actions, and support add, delete, and delete all without prop drilling.

master redux fundamentals and toolkit by building a central store with slices, dispatching actions, and selecting state, while solving prop drilling with a redux provider.

Set up Redux in your app by installing Redux Toolkit and React Redux, creating a task slice and store, and wrapping the app with the provider.

Bring Redux into our app by wiring a task slice to the store, using useSelector to read tasks, and dispatching actions to add, save, edit, delete, and complete tasks.

Implement Redux Toolkit slice logic to add, save, edit, and delete tasks with dispatch and payload. Manage state tasks, edit mode, and confirm delete all with user prompts.

Persist state by storing updated tasks in local storage using json stringify/parse, and ensure default empty array; update on add, edit, delete, and mark complete to survive refresh.

Compare context API and Redux Toolkit for React state management; context suits small data shared via providers, while Redux Toolkit offers a central store for large data and API requests.