Starting with Reactjs

While starting my learning journey on React, initially I found it difficult to understand concepts. I spent so many hours understanding components, states, props, useState, useEffect, etc.

So, I thought let’s make an article on these topics to help people understand them clearly by building a simple project.

Purpose: Helping beginners in React understand useState and useEffect clearly by building a simple React app called Counter.

About the project: It’s a simple project where we use useState and useEffect to keep on counting the number.

Prerequisites:

1. Make sure you have installed Node.js from here.

2. Basic knowledge of JavaScript.

Steps to create a React project:

1. npx create-react-app counter — It will help you to create all the boilerplate that you need for your React application with “counter” as a project name.

2. cd counter — After creating a React project, go into the project folder by entering the given command.

3. npm start — It will run your live server on localhost.

Let us start:

• We can build the project either using class or function. Classes use states and props while functions use React Hooks like useState and useEffect. I have used functions in this project.

• Once you create your React project, you will find a file named App.js.

App.js file

• We will be working on this file.

• Remove everything inside the return() part.

• Enter the below code in the return(), it will display “This is Counter App” text in the localhost.

function App(){
    return (
        <div>
        <h1>This is Counter App</h1>
        </div>
    );
}

• **useState: **useState is a React hook. Import {useState} from 'react’ in your application. The value we pass through useState will be the default state, which in our example is 0.

• useState always returns an array with two values in which the first one is the state, which in our example is count, and the second one in the array is the setCount function which is used to update the count value.

• Your App.js file should look like this:

import './App.css';
import React,{useState} from 'react';
function App() {
    const [count,setCount] = useState(0);
    return (
        <div>
            <h1>This is {count} </h1>
            <button onClick={()=>setCount(count+1)}>
            Click me
            </button>
        </div>
    );
}
export default App;

• So, in our code, when we click on the “click me” button, count will move from 0 to 1 since our setCount call increments count by 1 (count+1), it will update the count value every time we click on the button.

• I hope you understood useState. So, now let us start with useEffect.

• **useEffect: **In order to use this useEffect hook, firstly, you need to import it from ‘react’. This hook helps you to tell React that your component needs to do something after rendering. React will remember this function and call later after updating the DOM.

• useEffect by default runs both after the first render and also after every update.

• Let us see how we implement useEffect code in our application.

import React,{useState, useEffect} from 'react';
function App() {
    const [count,setCount] = useState(0);
    useEffect(() => console.log(count));
    return (
    <div>
        <h1>This is {count} </h1>
        <button onClick={()=>setCount(count+1)}>
        Click me
        </button>
    </div>
    );
}
export default App;

• In our application, we have used useEffect to print count after every update.

• I hope after going through this article, you have got a clear idea of useState and useEffect.

Hurray! You have created a simple counter app using React, you can also try building decrementCount i.e., count-1 in setCount.

Thank you for reading.

Follow me for understanding other React concepts by building simple projects.

Keep smiling!