Coders Packet

Let's Guess The Number using Reactjs

By Alok Jha

React-js based guessing the random number guess that runs on local host of the webpage of the user. It uses react-js which is a open source free JavaScript library developed by Facebook

Introduction

This the implementation of the game known as "Guess the Random Number" using ReactJS. This game uses useState hooks for implementation of the webpage as well as some CSS styling components for the web page.

Steps:-

1. First you need to create a react app for that you  need to run a command in your terminal

command:-

npx create-react-app filename

It will automatically create an app with file name that consist of few folders that contains self build a web page in which React logo is displayed.

2.Go to the src folder then remove all the codes written in app.js

3.Create an arrow function in app.js. If you are in VsCode and installed a snippet knowns as ES7 React/Redux then you just have to type rafce and press enter button it will automatically make an arrow function in app.js

4. Now you have to create 2 divs :-Code(

 

)

a:- A main that contains all the code and few function

b:- Second div contains all other information

5. For handling events in the code you need to use onClick and onChange events in which you will call multiple function to change the state of the webpage.

6. To change one state from another state you need to import {useState} in app.js and make multiple state and those state will be used in the function for handling the events.

7. The most important part is you have to create a randomNumber in which you have to use Math.floor(Math.random() * 100 ) +1 for generating random number.

Math.floor():- It is a static method that will give you give you the rounddown and returns you the largest integer which is equal or less than the number.

Math.randmon():- It will give you the random number and multiplied by 100 will give you number from 0 to 99

8. Create functions and handle events will give you the desired app .

Note:- If you download my code and try to run it then it won't run as it doesn't contains any nodemodules so for fixing that you need to run a command in your terminal :-

Command :- npx audit fix

It will install all the dependencies in the app and then you will able to run the app.

# Removing nodeModules means for uploading it will cost less space. 

 

Download Complete Code

Comments

No comments yet

Download Packet

Reviews Report

Submitted by Alok Jha (ALOKCHIKU07)

Download packets of source code on Coders Packet