Home » React JS

How to create a sample Facebook like button using React JS?

We will take a little look at how we can apply React JS states by creating a simple project that is similar to Facebook like button?
Submitted by Godwill Tetah, on November 16, 2019

What are we building?

Today. We will build a react app with a button and a paragraph in a div element. The React JS app will allow us to click on the button and increment or increase a figure as many times as it is being clicked.

You should have some basic knowledge of React JS and web development to understand this project.

Move on to your "src" folder found in your create react app template and let's edit and modify 2 files.

Open your index.js file and type the following as usual,

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

The code above is the normal convention and syntax we always start a react app, which is importing necessary dependencies and components for our React JS app.

React and react-dom are like the necessary libraries required to run a react app on a local development server (depending on installation method) while App is the React JS component (which is equally an external file with the name App) where we will do the real coding.

Open App.js file and type the following,

In this file, we will import react, create a class component and export the component.

import React from "react"

class App extends React.Component {
	constructor (props) {
		super (props)
		// create a state with a property count set to 0
		this.state = {
		count : 0
		}
		// bind the method to the class component 
		this.go = this.go.bind(this)
	}

	// event handler function 
	go () {
		// set the new state by getting previous state 
		// using (prevState) and increase by 1 
		this.setState (  prevState => {
			return {
				count : prevState.count + 1
			}
		})
	} 

	render() {
		return (
			<div> 
				<center>
				<p> {this.state.count}  <button onClick= {this.go} > like! </button> </p>
				</center>
			</div>
		)
	}
}
export default App

Explanation:

From the code above, we created a class called App and added a constructor method with our state object.

The state object has a property count which is set to 0.

The next line contains a keyword called bind which is very important in our React JS app.

It is a concept never to forget:

Whenever you create a class method (go ()) that you want to use setState() on, you have to bind the method to your class (class App).

Next, we created our event handler (go()) sets the state to a new value by first of all checking the previous state and then increases it by 1.

Output:

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question.