React.js Components

Functional Components vs. Class Components

Functional Components: The Functional Components are JavaScript functions that accept props (short for properties) as arguments and return React elements.

They are simpler and more lightweight compared to class components.

Functional components are primarily used for presenting UI elements that don't need to manage state or lifecycle methods.

Example:

                                      
                                      function Button(props) {
  return <button>{props.label}</button>;
}

Class Components: These are ES6 classes that extend React.Component.

Class components have more features, such as state and lifecycle methods. They are used when you need to manage state or use lifecycle methods like componentDidMount or componentDidUpdate.

Example:

                                      
                                      class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

Creating and Rendering Components

To create a component, you define a function or class that returns JSX, which describes what the UI should look like.

You can then render this component by including it in another component's JSX or directly in the ReactDOM.render method.

Example:

                                      
                                      function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Button label="Click me" />
      <Counter />
    </div>
  );
}

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

Props (Properties) and State in Components

Views are immutable data objects which are to be pasted down from a parent component to a child component.

They should you to create the separate behavior or appearance of a component according to logic or specific style.

Props are passed as attributes, like XIM, then accessed within the component using the props object.

Example:

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

ReactDOM.render(<Welcome name="Alice" />, document.getElementById('root'));

State: The state is a changeable data element that works inside a component.

A black dot shows the present position or situation of an element and can vary following user's action or other occurrence.

The state is set in the constructor of a class component at the beginning of the component, then it is updated using the setState method.

Example:

                                      
                                      class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div>Seconds: {this.state.seconds}</div>;
  }
}

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