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 | Virtual DOM
- ReactJS | Refs
- ReactJS | Fragments
- ReactJS | ReactDOM
- ReactJS | Keys
- ReactJS | Router
- ReactJS | Introduction to JSX
- ReactJS | Lists
- ReactJS | Components - Set 2
- ReactJS | forms
- EmberJS vs ReactJS
- ReactJS | Components
- Difference between ReactJS and Vue.js
- ReactJS | AJAX and API
- ReactJS | Props - Set 2
- ReactJS | PropTypes
- ReactJS | Props - Set 1
- ReactJS | Icons
- ReactJS | Using Babel
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.