- π Π‘omponents
- JSX syntax
- class component
- functional component
- simple component
- π Props
- how to pass data from parent to child components
- π State
- how to manage state within a component
- π Component Lifecycle
- how to use methods to control component behavior
- common use cases for each method
- π Handling Events
- how to handle user events in components
- examples of common event handlers
- π Conditional Rendering
- how to conditionally render components
- Ternary operator and logical operators
- Rendering lists and mapping data to components
- π Forms in React
- how to handle form submission
- how to manage form input fields with state
- validating form input data
- π Styling in React
- different ways to style components
- CSS-in-JS libraries like Styled Components
- best practices for styling components
βReact Hooks are a powerful way to manage state and lifecycle methods in React.
- π Introduction
| Hooks | Usage | Features |
|---|---|---|
| πuseState | Managing component state | - declare and update state variables in functional components; - returns array with current state value and funct to update state; - allows func components to have state similar to class components; |
| πuseEffect | Side effects (e.g., data fetching, subscriptions) | - perform side effects in func components; - runs after every render by default; - takes function as its first argument that can perform cleanup operations; - can specify dependencies to control when it should run; |
| πuseContext | Accessing context within components | - access and consume data from Context provider in func components; - provides way to avoid prop drilling and pass data between components without intermediaries; |
| πuseReducer | Managing complex state with actions | - manage state in more complex and predictable way; - accepts reducer func and initial state, returns current state and dispatch func to update state; - Ideal for state with complex logic. |
| πuseCallback | Optimizing function references | - memoize functions to prevent unnecessary re-renders in child components; - returns memoized version of callback function; - Useful when passing callbacks to child components that rely on reference equality. |
| πuseMemo | Memoizing expensive computations | - memoize result of expensive computation; - returns memoized value that only recalculates when its dependencies change; - can improve performance by avoiding unnecessary calculations; |
| πuseRef | Refs and accessing DOM elements | - access DOM nodes or store mutable values; - returns mutable ref object that persists across component renders; - allows imperative access to underlying DOM or accessing child component instances; |
- π Custom Hooks
- how to create them
- extract common logic into Hook
- best practices
βIf you plan to create multi-page applications, you'll need to learn about React Router.
This library allows you to manage your application's routes and navigation.
- π Introduction
- need for routing in SPA
- benefits and features
- π Route Rendering
- configuring basic routing in React app
<Switch>and<Redirect>components<Route>component withpathprop- setting up entry point for routing
- route configuration options
- using
useParamshook
- π Navigation and Linking
- difference between
<Link>and<a>tags - using
historyobject oruseHistoryhook - using
useLocationhook
- difference between
- π Route Guards and Authentication
- using
<Prompt>component - checking user authentication status
- using
- π Advanced Topics
- Server-side Rendering
- code-splitting & lazy-loading
- animations and transitions between routes
βRedux is a popular state management library used in many React applications.
It can be a bit complex to learn, but it's a powerful tool once you understand it.
- π Store
- π Actions
- π Reducers
- π Store Subscriptions
- π React-Redux
- Provider component
- connect function
- π Middleware
- π DevTools
- π Advanced Topics
- selectors
- immutability
- testing
-
π how to set up React project
- Create React App
- Vite for client-side app
- Next for server-side rendered app
- Remix for full stack web app
- Astro for static-side generated app
-
π deploy and host React application
- DigitalOcean if you want to have full control
- Netlify if you want to have someone taking care of everything
- Vercel popular solution for Next.js
- Render
- π user authentication in React app
- popular tools and libraries
- custom user auth system
- π