Here are some notes on creating React components.

There are two ways of creating a component in React.

1. Creating a JavaScript function

This option will create a stateless functional component, which means that the component will render data, but will not keep track of any changes that happen. This JavaScript function needs to return either JSX or null.

const NewComponent = function() {
    return (
        <h1>Hello from the NewComponent!</h1>
    );
};

OR use the arrow function like so:

NewComponent = () => {
    return (
        <div>
        <p>Hello from the NewComponent!</p>
        </div>
    );
};

2. Defining a Stateful Component with the ES6 syntax.

This gives us a ES6 class NewComponent which extends React.Component class. Our new component has now access to React features, for example local state or hooks. To make sure that the component is initialized properly, we use super() to call the constructor of React.Component class.

To create state in a React component you need to declare a state property as a JavaScript object in its constructor (this.state = { key: "value"}). State can be updated and rendered in the UI as well as passed as props to child components.

React uses what is called a virtual DOM, to keep track of changes behind the scenes. If the data of the state changes the component is rerendered.

class NewComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            name: "Lena"
        }
    }

    render() {
        return (
            <h1>{this.state.name} says: Hello from the NewComponent!</h1>
        // output: "Lena says: Hello from the NewComponent!"
        );
    }
}

We can also assign the state to a variable.

class NewComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            name: "Lena"
        }
    }

    render() {
        const name = this.state.name
        return (
            <h1>{name} says: Hello from the NewComponent!</h1>
        // output: "Lena says: Hello from the NewComponent!"
        );
    }
}

setState()

setState( key: "value") is a method used for updating the state, where keys are the state properties and the values are the updated state data.

this.setState({
    lastName: 'Esposito'
});

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

this.setState(state => ({
  counter: state.counter + 1
}));

Simple counter

This is a simple counter example. The output will give us three buttons: one to increment the counter by 1, one to decrement it by 1 and one to reset the counter.

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

    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
    this.reset = this.reset.bind(this);
  }

increment() {
      this.setState(state => ({
        count: state.count + 1
      }))     
    }
    
decrement() {
      this.setState(state => ({
        count: state.count - 1
      }))     
    }
reset() {
      this.setState(state => ({
        count: state.count = 0
      }))     
    }

  render() {
    return (
      <div>
        <button className='inc' onClick={this.increment}>Increment!</button>
        <button className='dec' onClick={this.decrement}>Decrement!</button>
        <button className='reset' onClick={this.reset}>Reset</button>
        <h1>Current Count: {this.state.count}</h1>
      </div>
    );
  }
};

Sources:.

freeCodeCamp

React.dev