
Learn React.js With Youtube Tutorials?
In Post, We discuss How To Learn React.js With Youtube Course. I add only Which YouTuber Provider Long Hours Course for Students. Most Important That …
Read MoreHey, 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
https://medium.com/@officialrajdeepsingh/what-is-reactjs-d83a61260dbc
First, Create New React Project on your laptop use This command:
npx create-react-app quiz app
cd my-app
npm start
In the Src folder
Components folder 3 components file And a Datafile.
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 to this place
Most Important create render Method on here.
All Styles for the body, header, MainDiv as card, And a button. Create on this file.
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.
Header component we return a simple h1 tag for the app title.
Quiz components work with 5 step
Create the state. In-State we create an object. in this object, we create a dataQuestion variable with an array
We create a function. function name setStateFunstion in this function use react setState method And set data form data.js
ComponentDidMount simple we call setStateFunstion
In 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.
with two-step to learn Answer.js
Create a state with 3 parameters first Answer, second clickCheck, and third rightAnaswer.
We use javascript ternary operator, map function, 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, the button function uses The setState method set false on clickCheck.
Then the ternary operator runs false code to get answer data so simple.
I hope you read my article Build own quiz app.
Any suggestions and issues plz tell me to feel free.
In Post, We discuss How To Learn React.js With Youtube Course. I add only Which YouTuber Provider Long Hours Course for Students. Most Important That …
Read MoreLet’s Start It: What is the Context menu? When click mouse Right-click opens Demo How to add a custom context menu in react.js? a menu bar in …
Read More