React is a front-end, open-source JavaScript library that is used to create interactive UI. It is developed and maintained by Facebook. It can be used for the development of single-page and mobile applications.
We’ll be creating a simple application where we have 2 buttons one to increment and one to decrement.
Initial Setup: The npx is a CLI tool used to install and manage dependencies in the npm registry. NPX comes pre-bundled with npm 5.2+, else we can install it using the following command:
npm i -g npx // -g flag indicates global installation
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app counter
Step 2: After creating your project folder i.e. counter, move to it using the following command:
cd counter
Project Structure: It will look like the following.
Project Structure
Filename: App.js:
Javascript
import React, { useState } from "react"; // Importing app.css is css file to add styling import "./App.css"; const App = () => { // Counter is a state initialized to 0 const [counter, setCounter] = useState(0) // Function is called everytime increment button is clicked const handleClick1 = () => { // Counter state is incremented setCounter(counter + 1) } // Function is called everytime decrement button is clicked const handleClick2 = () => { // Counter state is decremented setCounter(counter - 1) } return ( <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontSize: '300%', position: 'absolute', width: '100%', height: '100%', top: '-15%', }}> Counter App <div style={{ fontSize: '120%', position: 'relative', top: '10vh', }}> {counter} </div> <div className="buttons"> <button style={{ fontSize: '60%', position: 'relative', top: '20vh', marginRight: '5px', backgroundColor: 'green', borderRadius: '8%', color: 'white', }} onClick={handleClick1}>Increment</button> <button style={{ fontSize: '60%', position: 'relative', top: '20vh', marginLeft: '5px', backgroundColor: 'red', borderRadius: '8%', color: 'white', }} onClick={handleClick2}>Decrement</button> </div> </div> ) } export default App |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
