Hello! This is a small exercise that should take you about 30 minutes to an hour. It's possible that you'll get stuck and it will take longer. If that's the case, don't get frustrated! Take it one step at a time. It's a bit open ended. Might be fun to do with a friend!
The purpose is to check your understanding of:
- Using React.js to control our front-end views
- Sending Ajax requests to our server to request information in response to user behavior
- Once we get that information, updating the state of our React.js components
This is a React.js refactoring of our simple site we made last week!
We have a site that we want to use to display cute dogs, cats, and dragons! But not all at the same time! We want to have a dogs page, a cats page, and a dragons page but not have to reload the page each time we switch. We should be able to navigate between the dogs, cats, and dragons pages via the navbar buttons which will change the view without reloading the page. In this React.js understanding check, we are not concerned about the url bar!
To start, run:
$ npm install
$ npm start
You will only be writing code in the client/components directory. You will not have to create any new components or files. However, you are welcome to add styles and other features if you want! All your express routes are written for you. There is no database, the data is all mocked out.
Additional directions can be found in client/components/Main.jsx.