Start by opening your terminal moving into whatever folder you want the application to be in and using npx create-react-app flash-card-app flash-card-app being whatever you wish to name the project. Then I like to delete all of the unnecessary flack such as the test files and the logo .png's in the public folder. After that make sure to run npm install to install the node modules. Then create your .json file to store all of the questions and answers.
Once you make your .json file go into the package.json and inside the scripts object add this line:
This will allow you to create a RESTful API to both fetch data and post data. Make sure to run the command npm run server to actually start the server. Also run npm start so we can watch our progress in the browser. Next we will start building out our App component which will act as our main parent.
We will create the CardList component and the Form component soon for now they're just placeholders. It wouldn't hurt to go ahead and import them though. Now we will actually have to fetch our data from the json server we created. Import useState and useEffect to help us with this.
Use the setCards function in the GET request to set cards equal to the data we get back. Then we can pass cards as a prop to our CardList component. Create the CardList component and export it.
Here we created the CardList component. Created our displayCards variable which maps through the cards that were passed down and sends each one to the Card component that we will create in just a moment. Don't forget to add the key={card.id} in the Card component. React needs the key component in list items to track what gets added, removed, or reordered. Now we will create the Card component with card now being passed as a prop.
Now we can use useState to implement a flip functionality to our cards.
The only thing happening here is when you click on the card the state of flipCard will get set to true. Then the ternary allows us to see the answer instead of the question. You should now be able to toggle between the answers and questions by clicking on the individual cards. This is great and all, but what if you want to add new flashcards without going into the json and manually creating new objects. That's why we will do just that by creating a Form component. Create a normal component that returns a form with 3 inputs; one for the question, answer, and submit. Like so:
Now we will use state to set what the user types into the form and pass it to our handleSubmit function.
Here we are taking what the user types for question and answer, and setting our state variables to those values. We then pass that information into our handleSubmit, create a new object with it and pass it to the handleForm function. Which must be created in the main App component in order to set the state of the cards to whatever the user submitted. Don't forget to add e.preventDefault()! The handle form function should look like this:
This function takes the new card object and adds it onto the existing array of card objects. The only issue with this is when we refresh the page all the cards we added are now gone! To prevent this from happening we can add a POST request into our handleSubmit function.
Here we have our POST request which takes our newCardObject and post's it to our RESTful API resulting in an updated json with our information. Note we don't have to add an id to the new object. The server will do that for us. Also it's nice to reset the state of question and answer at the end of the handleSubmit function. That way the form clears itself and we don't have to backspace everything from the inputs when we want to add something new. Lastly, we can add some simple styling:
And you should have fully functional flashcard application that looks something like this:
Of course if this is all too much work, or you just don't feel like making it yourself. I've published this project to github. You can find it here.
Top comments (0)