As a quick refresher classes are basically templates that we can use to quickly set up our code or program, class components work the same way since we can make render templates to use at any time, they also have a few extra additions like state and props, which we'll go over!

Creating Class Components

To make class components first you have to type the keyword class followed by the name of the class starting in caps. Then you say that it's a react component by typing extends React.Component. Our render code (or HTML markup) will be in the render() method, and in that method there should be a return statement where you type your render code.

class App extends React.Component {
  render () {
    return (
  <h1>Hello Human!</h1>
    )
  }
  }

var root = ReactDOM.createRoot(document.getElementById('app'));

root.render(<App />)
//It renders a heading that says "Hello Human!"

Using Props

Accessing and using props is different with Class components than with functional components. To access props you make it a parameter in the constructor, then in it you call super() with props as its parameter as well.

class App exetends React.Component {
constructor(props) {
super(props);
   }
}

Unlike function components, when making a prop you have to have this and prop to the code since your making a class property. Other than that you render props the same way as function components using JSX markup and attributes.

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>Hello! my name is {this.props.name}</h1>;
  }
}

var root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App name="Lens" />);

State

States are information that can change over time. A change in a component's state tells the browser to re-render that component but with updated values. To make states you have to create a this.state in the constructor, this.state is an object that lets you track and use multiple values by the way. In the state object you put the name of the state and its value, for example, we can make a state named count that has a value of 0 with count: 0. To call a state you type this.state. followed by the name of the state object.

class App extends React.Component {
constructor() {
this.state = {count: 0}
}
render() {
return (
<h1>The current value is {this.state.count}</h1>
)
  }
}
root.render(<App />)
/*It renders "The current value is 0" because the 
states value is 0*/

States also have functions and methods that are made for them. ComponentDidMount() is a function used to change a state object’s value after the website or app loads. We change a state's value entirely by using this.setState() which, as the name suggests, sets the state's value. In fact to change a states value with ComponentDidMount() you need setState() to set the new value.

class App extends React.Component {
constructor(props) {
super(props);
this.state={count: 0}
}
componentDidMount() {
this.setState({count: 1});
  }
//The count states value is now 1
}

On the example below we made a click counter using these state methods and functions. We made it so that every time a button is clicked it calls a function that adds the state's value by 1 using this.setState(). Above the button text that shows the number of times the button has been clicked.



That's all for now! Next time we'll be talking about how to use multiple components from different files! If you have any questions or things I should add comment them below, other than that have a great day/night👋.