React 30 - Project 2: Building a Clicker App with React.js
Introduction
In this tutorial, we'll build a simple clicker app using React.js. This project will help us understand the basics of JSX rendering and introduce us to the useState hook, an essential feature in React.
App Preview:-
useState Hook
Explanation for beginners
Imagine you have a magical toy box, and inside it, there’s a special compartment where you can keep track of something important. Let’s call it “magic memory.” Now, every time you want to remember a different thing about your toys, you use the “magic memory” to store that information.
In React, when we talk about useState, it’s like having this magical compartment to remember things about a part of your app. So, if you have a button in your app, and you want to remember whether it’s clicked or not, you can use useState to create a magical compartment (state) just for that button. When you press the button, the magical compartment remembers that it’s clicked, and you can use that information whenever you need it.
So, useState is like a magical memory box in React that helps your app remember and keep track of different things!
Technically useState is a React hook that allows functional components to have state.
Prerequisites
Make sure you have Node.js and npm (Node Package Manager) installed on your system
Step 1: Set Up a New React App
Open your terminal and run the following command to create a new React app:
npx create-react-app clicker-appStep 2: Create the Clicker App
Navigate to the src folder in your project directory and open the App.js file. Replace its content with the following code:
import React, { useState } from "react";
import Header from "./components/Header";
import Clicker from "./components/Clicker";
import "./App.css";
export default function App() {
const [title] = useState("Clicker");
return (
<div className="App">
<Header title={title} />
<Clicker />
</div>
);
}
Explanation
JSX Rendering
JSX is a syntax extension for JavaScript, often used with React to describe what the UI should look like.
In our App component, we use JSX to define the structure of our app, including headings, paragraphs, buttons,placeholders for dynamic content and even other components as shown above.
Let’s create a `components` folder within src folder and create a Header component as shown below:
import React from "react";
export default function Header(props) {
return (
<nav className="navbar navbar-dark bg-dark">
<div className="container">
<div className="row m-auto">
<i className="fa fa-hand-pointer-o fa-2x text-white mr-2" />
<div className="text-light h2">{props.title}</div>
</div>
</div>
</nav>
);
}
Next let’s focus on creating the core Clicker component:-
import React, { useState } from "react";
export default function Clicker() {
const [clickerValue, updateClickerValue] = useState(0);
return (
<div className="container">
<div className="clickerParent border border-secondary rounded mt-4">
<div className="clickerDisplay d-flex align-items-center justify-content-center bg-light display-2">
{clickerValue}
</div>
<div className="clickerButtonContainer d-flex flex-row">
<button
className="btn btn-success w-100"
onClick={() => updateClickerValue(clickerValue + 1)}
>
<i className="fa fa-2x fa-plus" />
</button>
<button
className="btn btn-warning w-100"
onClick={() => updateClickerValue(0)}
>
<i className="fa fa-2x fa-refresh" />
</button>
<button
className="btn btn-danger w-100"
onClick={() => updateClickerValue(Math.max(0,clickerValue - 1))}
>
<i className="fa fa-2x fa-minus" />
</button>
</div>
</div>
</div>
);
}
Explanation
In our Clicker component, we declare a state variable clickerValue and a function updateClickerValue to update it. The initial value of clickerValue is set to 0.
When the user clicks the "+" button, updateClickerValue is called, and we increment the clickerValue by 1.
When the user clicks the "Reset" button, updateClickerValue is called, and we set the clickerValue back to 0.
When the user clicks the "-" button, updateClickerValue is called, and we decrement the clickerValue by 1. Additionally we Math.max function to make sure that clickerValue does not go below 0.
Step 3: Create CSS Styling
Update head section in `public/index.html` file to add links to Bootstrap and Font Awesome CDNs:
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Clicker app using reactjs"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Clicker App</title>
</head>
Create or update a file named App.css in the src folder:
.App {
font-family: sans-serif;
text-align: center;
}
.clickerParent {
width: 300px;
height: 300px;
margin: 0 auto;
}
.clickerDisplay {
height: 200px;
}
.clickerButtonContainer {
height: 100px;
}
You can find sourcecode for the app here:-
Live preview in Codesandbox:-
Bonus Tip: You can start hosting this projects on Github and deploy them on Netlify/Vercel to showcase them in project portfolios.
Conclusion
Congratulations! You’ve built a simple clicker app using React.js. This project has introduced you to JSX rendering and the useState hook, fundamental concepts in React development. Feel free to explore and modify the app further to enhance your understanding of React. Have a nice day ahead!
Check out my Youtube channel for more videos:-
SaurabhNative-Youtube
Series Part 3 here:-
