Welcome, today we're going to make a react flashcard quiz with React.js.
First, launch your terminal and use the create react-app command to create our new React app.
Next, we open up our project in our code editor and and remove unnecessary code in the App.js file.
Next, we import React and make an array questions_list with our test questions in it. Then we develop Flashcard.js and Flashcardlist.js files in the src folder to store project-related components.
The structure of our flashcards is generated next by going to Flashcard.js. We create a function component and give it a props "card" to achieve this. When a flashcard is clicked, the card flip concept is used to reveal the answer. We import useState in order to achieve this.
In Flashcardlist.js, we import the Flashcard component and construct a list of flashcards, passing our Flashcard prop card to each element of the flashcards array.
After navigating to App.js, we import the useState hook and our flashcardlist component. We create a state variable array and assign it to the questions_list array.The array list is then passed as flashcards props to the Flashcardlist component.
The styles for our flashcards are then stored in a Flashcard.css file that is created next. In Flashcard.js, this file has been imported.
After finishing our quick flashcard app using React, feel free to add more questions to the list to make it more interesting. Here is the URL of the github repository.
Top comments (0)