REACT knowledge base

📚 React Fundamentals

• 📖 С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

 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

📚 React Router

 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 with path prop
  • setting up entry point for routing
  • route configuration options
  • using useParams hook
• 📖 Navigation and Linking
  • difference between <Link> and <a> tags
  • using history object or useHistory hook
  • using useLocation hook
• 📖 Route Guards and Authentication
  • using <Prompt> component
  • checking user authentication status
• 📖 Advanced Topics
  • Server-side Rendering
  • code-splitting & lazy-loading
  • animations and transitions between routes

📚 Redux

 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

---

📚 R E A C T Libraries for 2023

• 📖 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

---

📚 Extracurricular reading

• 📖 user authentication in React app

• popular tools and libraries
• custom user auth system

• 📖