Yuan's Blog
EN 中

React Summary

Key Benefits

  • React

    • DOM Updates are automatically managed by React
    • Handled declaratively in JSX (e.g., onClick, onChange)
    • Managed via useState and props
    • Component Reuse: Components are reusable and composable

  • Plain JavaScript

    • Manual DOM manipulation
    • Event listeners explicitly added using addEventListener
    • Must store data separately and update the DOM manually
    • Harder to reuse individual parts without duplication

State

  • Only data that affects the UI should be in state.

Props

  • Summary: Props generally include:

    1. Data the component needs to display
    2. Functions to handle events
    3. Configurations for appearance and behavior

(Q&A)

  1. What if the project doesn’t use React? Show the contrast between React and plain JS.

    • React provides automatic state-driven rendering and modularity, while plain JS requires manual DOM updates and less component reuse.

  2. Determine the accuracy of the following content:

    • a. ✅ useState is used for updating the data. If anything in a component is changeable (dynamic), it should be in state.
    • b. ⚠️ It’s not always true that computed logic must be in App.js. The logic can also be colocated with related UI in a component if it makes the component self-contained.

  3. How do we know what kind of contribution data has if there is no initial data?

    • You design the data shape (e.g., id, text) based on the UI requirement. Start from what needs to be displayed or interacted with, then decide the data structure.

  4. What is usually included in component props?

    • Types include: type, placeholder, value, onChange, onClick, className, disabled, etc. This depends on the component’s role.

  5. Does input need onChange, and button need onClick?

    • ✅ Yes. input uses onChange to track typing; button uses onClick to handle clicks.

  6. When and where do we define the onSearch function? Is it name convention?

    • Define onSearch in the component that owns the state or handles the search logic. The name is a convention for readability; it’s not mandatory.

  7. Give an explanation with the whole picture about code.

    • See previous notes on separating concerns: logic in containers, UI in presentational components. Use props to pass behavior and data, state to manage change, and routing for navigation. All together, this forms a scalable component architecture.