- Open your command line and navigate to your repos directory (if you do not have a repos folder, then you can use mkdir repos to create one)
- Use this template repository to start a new project in your repos folder: git clone <repo_name> cd repo_name to navigate into your new repo directory
- Make sure to run
npm install
to fetch the dependencies for the project - Start Visual Studio Code and select 'Open Folder'. Then select repo_name to open the folder in the editor (or just type code . in your terminal inside the repo directory)
- Follow the instructions on the README.md file to complete exercises
- Open the app.js file to get started
- View this working example to see the end goal: Memory Game
- Take a little bit of time to think about how you want to implement your application, the features you want to implement, which components you need, and how to structure your application.
- You can choose to replicate with numbers, or any other group of items (e.g. images, colors, words)
- Your application should include:
- Cards with the memory
items
, ascoreboard
, which counts thecurrent score
, and abest score
, which shows the best score you achieved thus far.
- You also need a couple of cards that display images and possibly informational text. There should be a function that displays the cards in a random order anytime a user clicks one. Be sure to invoke that function when the component mounts.
- So now that you thought about the structure of your application, set up the folder structure, and start creating the class components.
- Style your application so you can show it off!
- As always, push the project to GitHub.
- First, build this project with class components. Once you complete the project, you have the option of rewriting the class components as functional components with react hooks.