React 101 - part 3: Class Component

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.

Class component

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.

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'))

Component State

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

class Clock extends React.Component {
  render() {
    return <div>
      Date: {Date.toLocaleDateString()} {date.toLocaleTimeString()}
    </div>
  }
}

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

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>
  }
}

Component Lifecycle

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

Lifecycle and state change

To make the component refresh every second we have to set a timer that change the state of this.date every second.

React will then automatically detect that state change and refresh the component.

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>
  }
}

Another Class Component Example

A second class component example this time with it's an increment component with a start and a step props

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'))

Conclusion

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!