React - Everything is a component

1. What is a React Component?#

A component is conceptually similar to a JavaScript function. It accepts arbitrary inputs (props) and returns a React element that describes what should be displayed on the screen.

Components allow you to split the UI into independent, reusable pieces of code and think about each piece in isolation.

1. Creating a Component#

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

// Class component
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2. Rendering a Component#

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

3. Components#

React has three basic principles:

React interfaces are entirely driven by data.
Everything in React is a component.
Props are the basic means of communication between React components.

A component takes in parameters and returns a React element. A React element is the content that is displayed on the page, similar to a DOM node.

One of the core principles of React is that everything is a component.

The user interface is a component.
Components can be nested to create complex functionality.
Components can be used to implement side effects.

A complex interface can be divided into many simple components, and each simple component can be further divided into smaller components.

It is somewhat similar to the concept of classes and objects.

2. Component Division#

Stateless Components: Stateless components are the most basic form of components. They are purely static and do not have any state. The basic structure consists of properties (props) and a rendering function (render). Since they do not involve state updates, they are highly reusable. Examples include buttons, input fields, icons, etc., developed in various UI libraries.
Stateful Components: Stateful components contain internal state and the state changes with events or external messages. This constitutes a stateful component. Stateful components usually have lifecycles to trigger state updates at different times. They are commonly used in writing business logic, and the states and lifecycles used vary depending on the scenario.
Container Components: To make the responsibilities of components more focused and further reduce coupling, the concept of container components is introduced. They are primarily responsible for data retrieval and processing logic. The design patterns mentioned below will also be mentioned.
Higher-Order Components (HoC): Higher-Order Components are a type of component design pattern. As a higher-order component, it can add new functionality and behavior to the original component. For example, when dealing with unrelated logic such as logging, data retrieval, and data validation, an abstract higher-order component can be created to add these functionalities to the base component and reduce redundant code.
Render Callback Components: The render callback component pattern delegates the rendering logic in a component to its child component. It is also a way to reuse component logic and is also known as the render props pattern.

3. Design Principles#

React components are modules in software design, and their design principles should also follow general component design principles. In simple terms, the goal is to reduce the coupling between components and make them simple, so that the overall system is easy to understand and maintain.

The design principles are as follows:

Keep the interface small and the number of props minimal.
Divide components and make full use of composition.
Extract state to higher-level components and make lower-level components pure functions.

Just like building with building blocks, complex applications and components are made up of simple interfaces and components. There is no absolute method for dividing components. Choose the appropriate way to divide based on the current scenario and make full use of composition. Writing code is also a process of continuous improvement, striving to achieve:

Functionality is working correctly.
Code is clean.
High performance.