Start a project by the following command –
npx create-react-app quiz
NPX is a package runner tool that comes with npm 5.2+, npx is easy to use CLI tools. npx is used for executing Node packages. It greatly simplifies a number of things one of which is checked/run a node package quickly without installing it locally or globally.
now, goto the folder create
Start the server- Start the server by typing following command in terminal –
Change directory to src –
Delete every thing inside the directory
This file will render our app to html file which is in public folder now, create a folder name components with files src/components/QuestionBox.js and src/components/ResultBox.js to hold our app components and a folder question with file src/question/index.js to hold our questions.
mkdir components && cd components && touch app.js
mkdir question && cd question && index.js
Edit src/index.js file
This file contains our app logic.
Edit src/question/index.js file: This file contains all question which will be displayed.
Edit src/components/QuestionBox.js file: This file makes question box with buttons.
Edit src/components/ResultBox.js file: This file displays the result.
Save all files and start the server:
open http://localhost:3000/ URL in the browser. It will display the result.
- How to Create ToDo App using ReactJS ?
- ReactJS | Calculator App ( Introduction )
- ReactJS | Calculator App ( Structure )
- ReactJS | Calculator App ( Building UI )
- ReactJS | Calculator App ( Adding Functionality )
- ReactJS | Calculator App ( Styling )
- Deploying Your Web App using Azure App Service
- Introduction to Xamarin | A Software for Mobile App Development and App Creation
- Progressive Web App - A Combination of Native and Web App
- Create a Weather app using Flask | Python
- How to Create ToDo App using HTML, CSS, JS and Bootstrap ?
- How to Create Button in React-Native App ?
- How to create a COVID-19 Tracker Android App
- How to create Swipe Navigation in an Android App
- ReactJS | Using Babel
- ReactJS | ReactDOM
- ReactJS | Rendering Elements
- ReactJS | Components
- ReactJS | Components - Set 2
- ReactJS | State in React
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.