Hey, Welcome to react series My Name, Rajdeep Singh. In series, we learn to react.js but This time we create a small react project. The Project Name quiz app.

Watch The Demo on code sandbox And Download Code.

Download Code on GitHub: react-quiz-app

Demo Here: click here

Demo

Let’s start:

Requirement:

  1. Basic React
  2. Code Editor or IDE
  3. Smiley Face

Learn Basic of Reactjs

What is ReactJS?
Simple React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile…
Rajdeep singhMedium

Step:

  1. Create React App
  2. Learn Folder Str.
  3. Index.js File
  4. Demo Data
  5. Components

Create React App:

First, Create New React Project in your laptop use This command:

npx create-react-app quiz app
cd my-app
npm start

Learn Folder Str.

In the Src folder

Components folder 3 components file And a Data file.

Src folder str

Index.js File

Index.js main file in the file str. we add CSS file and import component file on index.js

We import the Header and Quiz component on this place

Most Important create render Method on here.

index.js file code

Style For Quiz:

All Style for the body, header, MainDiv as card, And a button. Create on this file.

Style CSS

Demo Data:

data.js file I create a variable Name Quizdata. We assign data from of array in the Quizdata variable.

Each index we create an object. in the object, we add an id, Quiz, FindAnswer, and rightAnswer

In FindAnswer We add the array with three values.

Data.js file

Components

Header:

Header component we return a simple h1 tag for the app title.
Header.js

Quiz:

Quiz components work with 5 step

1 step:

Create the state. In-State we create an object. in this object, we create a dataQuestion variable with array

2 step

We create a function. function name setStateFunstion in this function use react setState method And set data form data.js

3 step

ComponentDidMount simple we call setStateFunstion

4 step

This step we use map(). map function work with an array. In this array map() get data and then we return h2 and Answer component.

Answer Components access data help props we provide here.

Quiz.js

Answer:

Two-step:

use two-step we learn Answer.js

1 step:

Create a state with 3 parameters first Answer, second clickCheck and third rightAnaswer.

2 step

We use javascript ternary operator, map function with and event function to clickCheck true to get value to return a button. in this button, we call an Event function.

when some buddy clicks on the button this button function uses The setState method set false on clickCheck.

then the ternary operator runs false code to get answer data so simple.

Answer.js

Conclusion:

I hope you read my article Build own quiz app.

Any suggestion and issue plz tell me to feel free

Contact me