React 101 - part 3: Class Component
Tags: javascript, react, beginners, tutorial
Published: 2021-03-10 03:13:25

---
title: React 101 - part 3: Class Component
published: true
description: 
tags: javascript, react, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3ui703pme0meo82pu5o.png
series: React 101
---

After my Javascript series: https://dev.to/rickavmaniac/javascript-my-learning-journey-part-1-what-is-javascript-role-and-use-case-49a3

I am now ready to begin my React learning journey :)

Click follow if you want to miss nothing. I will publish here on Dev.to what I learn from my React course the day before.

Without further ado here is a summary of my notes for day 3.

<h2>Class component</h2>
Components come in two types, Class components and Function components, today we will concentrate on Class components.

When creating a class component, the component's name must always start with an upper case letter.

The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.

The class component also requires a render() method, this method returns HTML.

Like we saw yesterday, a component can also have props and children. Props are arguments passed into React components and are passed to components via HTML attributes. 
```jsx
class Welcome extends React.Component {
  render () {
      return <div>
          <h1>Hello {this.props.name}</h1>
          <p>
              {this.props.children}
          </p>
      </div>
  }
}

function Home () {
  return <div>
      <Welcome name='Mike' />
      <Welcome name='Peter'>Hello my friend</Welcome>
  </div>
}

ReactDOM.render(<Home/>, document.querySelector('#app'))

```
![Class Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93bc4x9we7h6f5hu5ddp.png)

<h2>Component State</h2>
React components has state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.

For example let's create a Clock component
```jsx
class Clock extends React.Component {
  render() {
    return <div>
      Date: {Date.toLocaleDateString()} {date.toLocaleTimeString()}
    </div>
  }
}
```
![Static Clock Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adawfl6zk1fgw6ya9hy8.png)
This component will display date and time but the date will be static and would not change until a full browser refresh.

To make the dynamic refresh possible we have to add two thing. First we need to add state to our component and next we need to refresh the component every one second interval. 

First thing first, let's add state to the component.
State will be add in the component constructor method.

The constructor() and super() method is also where you apply the inheritance of the parent component, which executes the parent component's constructor function, and then your component has access to all the functions of the parent component

In React, state is kept in an object called state
 
```jsx
class Clock extends React.Component {
  constructor() {
    super(props)
    this.state = {date: new Date}
  }
  render() {
    return <div>
      Date: {this.state.date.toLocaleDateString()} {this.state.date.toLocaleTimeString()}
    </div>
  }
}
```
<h2>Component Lifecycle</h2>
Next let's add a refresh every second. To do that we need to call a component lifecycle method.

In React each component has a lifecycle which you can monitor and manipulate during its three main phases.

The three phases are: Mounting, Updating, and Unmounting.

For example, one of the mounting phase method is componentDidMount(). This method is called after the component is rendered.

This is ideal place to put code that requires that the component is already in the DOM.

At the opposite, the method componentWillUnmount() will be execute when the component is remove from the DOM

<h2>Lifecycle and state change</h2>
To make the component refresh every second we have to set a timer that change the state of <i>this.date</i> every second. 

React will then automatically detect that state change and refresh the component.
 
```jsx
class Clock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {date: new Date}
    this.timer = null
  }

  componentDidMount() {
    this.timer = window.setInterval(() => this.tick(), 1000)
  }

  tick() {
    this.setState({date : new Date})
  }
  componentWillUnmount() {
    window.clearInterval(this.timer)
  }

  render() {
    return <div>
      Date: {this.state.date.toLocaleDateString()} {this.state.date.toLocaleTimeString()}
    </div>
  }
}
```
<h2>Another Class Component Example</h2>
A second class component example this time with it's an increment component with a start and a step props
```jsx
class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: Number(this.props.start)} 
    this.timer = null
  }
  tick() {
    this.setState({count: (this.state.count + Number(this.props.step))})
  }
  componentDidMount() {
    this.timer = window.setInterval(() => this.tick(), 1000)
  }
  componentWillUnmount() {
    window.clearInterval(this.timer)
  }
  render () {
    return <div>
      <h1>Welcome to Increment Plus - Made in React</h1>
      <p>This is a increment count web application</p>
      <div>
        <span> Count = {this.state.count} </span>
      </div>
    </div>
  }
}

ReactDOM.render(<Counter start="0" step="1000"/>, document.querySelector('#app'))
```

<h2>Conclusion</h2>
That's it for today. tomorrow will learn how to deal with events... If you want to be sure to miss nothing click follow me!