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)