Key Takeaways from My Recent Review of the React Docs

This blog is originally posted on Medium

Hey there, fellow React enthusiasts! I've recently dived deep into the React documentation and want to share my learnings with you. This is a concise minimal guide for those who are looking to build a solid foundation in React. Let's break down the core concepts with simple explanations and code snippets.

This is going to be a somewhat lengthy story, but please hold on to grasp all the core concepts of React at once. You'll find it beneficial to recap and revisit these concepts for further advancement.

Table of Contents

• Thinking in React
• Components and JSX
• Props
• Conditional Rendering
• Rendering Lists
• Pure Components
• UI Tree
• Interactivity and Event Handlers
• State
• Controlled Components
• Uncontrolled Components
• Refs
• Preventing Default Behavior
• Event Propagation
• Managing Complex States
• Context
• Side Effects
• The best practices of useEffect
• Rules of React
• Custom Hooks
• Rules of Hooks

Thinking in React

React is all about breaking your UI into reusable components. When building a React app, start by:

1. Breaking the UI into a component hierarchy
2. Building a static version with no interactivity
3. Identifying the minimal representation of UI state
4. Determining where your state should live
5. Adding inverse data flow

Reference: https://react.dev/learn/thinking-in-react

Components and JSX

Components are the building blocks of React applications. They can be functional or class-based (old-fashioned, not recommended). JSX is a syntax extension that allows you to write HTML-like code in your JavaScript.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

References:

• Components: https://react.dev/learn/your-first-component
• JSX: https://react.dev/learn/writing-markup-with-jsx

Props

Props are how we pass data from parent to child components. They’re read-only and help keep our components pure.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<Greeting username="Alice" />

Reference: https://react.dev/learn/passing-props-to-a-component

Conditional Rendering

React allows you to conditionally render components or elements based on certain conditions.

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

Reference: https://react.dev/learn/conditional-rendering

Rendering Lists

Use the map() function to render lists of elements in React. Don't forget to add a unique key prop to each item.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

Reference: https://react.dev/learn/rendering-lists

Pure Components

Pure components always render the same output for the same props and state. They’re predictable and easier to test.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Reference: https://react.dev/learn/keeping-components-pure

UI Tree

React builds and maintains an internal representation of your UI called the virtual DOM. This allows React to efficiently update only the parts of the actual DOM that have changed.

Reference: https://react.dev/learn/understanding-your-ui-as-a-tree

Interactivity and Event Handlers

React uses synthetic events to handle user interactions consistently across different browsers.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<Greeting username="Alice" />

Reference: https://react.dev/learn/responding-to-events

State

State is used for data that changes over time in a component. Use the useState hook to add state to functional components.

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

Reference: https://react.dev/learn/state-a-components-memory

Controlled Components

Controlled components have their state controlled by React.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

Uncontrolled Components

Uncontrolled components manage their state directly on the DOM.

function PureComponent(props) {
  return <div>{props.value}</div>;
}

Refs

Refs provide a way to access DOM nodes or React elements created in the render method.

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
}

Preventing Default Behavior

Use preventDefault() to stop the default browser behavior for certain events.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Event Propagation

React events propagate similarly to native DOM events. You can use stopPropagation() to prevent event bubbling.

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Managing Complex States

Consider using the useReducer hook or a state management library like Redux or Zustand for complex state logic.

function UncontrolledInput() {
  return <input defaultValue="Hello" />;
}

Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Reference: https://react.dev/learn/passing-data-deeply-with-context

Side Effects

Side effects are operations that affect something outside the scope of the function being executed, like data fetching or DOM manipulation. Use the useEffect hook to manage side effects.

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

The best practices of useEffect

1. Always include all variables on which your effect depends in the dependency array.
2. Avoid infinite loops by carefully considering your effect’s dependencies.
3. Clean up side effects in the return function of useEffect.

function Parent() {
  return (
    <div onClick={() => console.log('Parent clicked')}>
      <Child />
    </div>
  );
}

function Child() {
  const handleClick = (e) => {
    e.stopPropagation();
    console.log('Child clicked');
  };

  return <button onClick={handleClick}>Click me</button>;
}

References:

• You Might Not Need useEffect: https://react.dev/learn/you-might-not-need-an-effect
• Synchronizing with Effects: https://react.dev/learn/synchronizing-with-effects
• Lifecycle of Reactive Effects: https://react.dev/learn/lifecycle-of-reactive-effects

Rules of React

1. Always start component names with a capital letter.
2. Close all tags, including self-closing tags.
3. Don’t modify props directly.
4. Keep components pure when possible.

Reference: https://react.dev/reference/rules

Custom Hooks

Custom hooks allow you to extract component logic into reusable functions.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Rules of Hooks

1. Only call hooks at the top level of your component.
2. Only call hooks from React function components or custom hooks.
3. Use eslint-plugin-react-hooks to enforce these rules.

Reference: https://react.dev/reference/rules/rules-of-hooks

That’s a wrap on our React journey! Remember, the best way to learn is by doing. Start building projects, experiment with these concepts, and don’t be afraid to dive into the React documentation when you need more details. Happy coding!

The above is the detailed content of Key Takeaways from My Recent Review of the React Docs. For more information, please follow other related articles on the PHP Chinese website!