DOCSEARCHbyAlgolia
Submit Docs

React Course

website·Indexed 30 days ago

https://hondilla.github.io/react-course/

A comprehensive guide to React covering core concepts including JSX, components, props, state, and hooks like useState, useReducer, and useRef. The course includes advanced topics such as Higher-Order Components (HOC), Context, Portals, error boundaries, and optimization, as well as tooling for installation, CSS, ESLint, Prettier, and testing with Jest and Testing Library.

Tokens
8.5K
Snippets
27
Records
74
Agent score
75%

What's inside React Course

  1. Overview of React core concepts

    React is a declarative, efficient JavaScript library used for building interactive user interfaces. It uses a component-based architecture, allowing developers to encapsulate state within components to build complex UIs. Because logic is written in JavaScript rather than templates, data flows easily through the application and state is kept outside the DOM. React is cross-platform, supporting server-side rendering via Node and mobile application development via React Native.

  2. Understand the React Component Lifecycle

    Every React component passes through three primary phases during its existence:

    1. Mounting: The process of inserting the component's content into the DOM.
    2. Updating: Occurs when a component is updated due to changes in its state (useState) or properties (props).
    3. Unmounting: Occurs when a component is removed from the DOM.

  3. Use JSX to simplify React element creation

    JSX (JavaScript XML) is a preprocessor that allows developers to write HTML-like syntax directly within JavaScript. This syntax is transformed into JavaScript calls, enabling the addition of elements to the Virtual DOM without manually calling React.createElement. Because JSX is not valid JavaScript, a transpiler (such as Babel) is required to convert the JSX syntax into standard JavaScript.

  4. Understand the React rendering and re-rendering process

    Rendering is an internal process in a component's lifecycle, occurring during initial initialization. A 're-render' happens automatically when a component's state changes or its properties (props) are updated.

    Key distinctions:

    • Parent-Child Rendering: When a parent component renders, React unconditionally renders all its child components, regardless of whether the children's props have changed.
    • Rendering vs. DOM Updates: Rendering is not the same as updating the DOM. A component can undergo a render cycle without resulting in any visible changes to the DOM.

  5. Implement logic reuse using Higher-Order Components (HOC)

    A Higher-Order Component (HOC) is an advanced technique for reusing component logic in React. An HOC is a function that takes one or more components as arguments and returns a new, updated component. This pattern is conceptually similar to higher-order functions in JavaScript and aligns with the 'Decorator' structural design pattern, which allows adding functionality to objects by wrapping them in special encapsulating objects.

  6. Understand React re-rendering and performance bottlenecks

    In React, the number of re-renders is not always a direct indicator of poor performance. A large tree of components that only return JSX can often re-render frequently without noticeable lag. Performance bottlenecks typically occur when a component performs expensive calculations or external calls during the render phase. It is recommended to prioritize fixing slow renders caused by complex logic before attempting to prevent re-renders entirely. Avoid premature micro-optimization; use tools like Chrome DevTools CPU throttling to identify real performance issues on low-end devices.

  7. Understand and use React Props

    Props (properties) are read-only values passed from a parent component to a child component. They are grouped in a props object and are immutable; the child component cannot modify them. React components must act as pure functions with respect to their props. Props can be of various types, including Strings, Numbers, Booleans, Arrays, Objects, Functions, React Elements (JSX), and React Components. By convention, prop names should be written in camelCase.

  8. Use React.StrictMode for development best practices

    React.StrictMode is a helper component that does not render any HTML but wraps other components to identify potential problems during development. It helps by:

    • Identifying unsafe lifecycles.
    • Warning about the use of legacy APIs.
    • Detecting unexpected side effects and unsafe effects.

    Note: This is different from JavaScript's 'use strict' directive.

  9. Use React Context for global data management

    React Context allows you to define a data context that all components within that context can access without needing to pass props manually (avoiding 'prop drilling'). It is recommended for truly global data such as authenticated user information, application theme configurations, or language management, as well as when building libraries.

    Note: Context is not a global state manager by itself. To manage state within a context, it should be combined with the useState hook. Additionally, before resorting to Context to solve prop drilling, consider if component composition can solve the problem first.

  10. Render lists of components in React using map

    In React, collections of elements or components are represented in JSX by using the JavaScript map higher-order function. This allows you to transform an array of data into an array of JSX elements that React can render.

  11. Initialize a React project using Create React App

    Create React App is the official tool for creating React projects. It provides an abstraction layer over Webpack (bundler) and Babel (compiler). While official, it is generally considered slower and heavier than modern alternatives like Vite.
    npx create-react-app <app>
cd <app>
npm start

  12. Update complex state objects and arrays in React

    When updating state that consists of arrays or objects, you must create a new reference to the data. If you mutate the existing object or array directly, React will not detect the change and will not trigger a re-render.

    To safely update complex state, create a copy of the current state (e.g., using structuredClone), modify the copy, and then call the setter function with the new reference. When the new state depends on the previous state, pass a callback function to the setter to ensure you are working with the most current value.

    // Example of updating a specific item in a state array
setColumns((prevState) => {
  const newState = structuredClone(prevState);
  const column = newState.find(col => col.alias === targetAlias);
  if (column) {
    column.isVisible = !column.isVisible;
  }
  return newState;
});