The goal of this exercise is to use ReactRouter as well as connect an external API to a React app 🎉!
Let's create an app using the Rick and Morty API
- Create the pages mentioned below, and implement the features mentioned in
rick-and-morty-app.pngor the excalidraw file - Plan your approach, take small steps
- Explore the API before getting started!
- See what it returns and what the data looks like
- It's recommended to install a browser extension like JSON Viewer
There are some wireframes in the design directory, an overview of the whole app with explanations, as well as an .excalidraw file. If you want to open the file, head to www.excalidraw.com, click the "Open" button and select it.
The features proposed in the design documents are:
| page | url | purpose |
|---|---|---|
| home | / |
main page, welcome message, entry point |
| all caracters | /characters |
fetch and list characters (more button), each one clickable |
| one caracters | /characters/:id |
character details, fetch more info (i.e. /characters/1) |
- The all caracters page (
/characters) can filter bynameand/orstatus
- The characters can be favourited. Favourited characters ids are stored in localStorage
- Visually this could be implemented with something like a "bookmark" or "like" toggle.
- There is a "Favourites" page that fetches and renders only the favourites characters.
-
Look at the wireframes and plan your approach. Smaller tasks are easier to finish
-
Aim to work with branches, usually per component, per page, per task etc. Split work up into tasks
-
Before you get started try to think about what some components could be and what they are supposed to do
-
Every now and then, take some time to look at the bigger picture and which steps are coming up next
-
Don't forget to change the CSS ruleset for
.App, or feel free to remove it all together, and come up with your own naming convention
- React Router DOM docs
- Logrocket React Router Hooks
- Intro to React Router Hooks
- YouTube React Router Hooks
Here is a partial example approach with branches. Just as a guideline on how to split the whole project into smaller steps with corresponding branch names, to make it a bit easier for you to use git in this project. This is just one way of doing it :).
Follow the GitHub Flow
push,- create a pull request on GitHub (maybe share it and get a review, definitely do a review for yourself),
merge,- synchronize your local machine and move to the next branch
- Setup App (branchname:
setup)- Install ReactRouter package
- Add basic app structure (i.e. simple layout/app container, router, rough main page)
- General things/infrastructure you need to get started with adding components
- Basic components (branchname:
header,layoutor evensetup/basic-components)- Plan basic components such as navigation, header, layout, footer(?), buttons etc.
- Add components one by one, try to make rather more commits than less. (markup, styling, logic etc.) <-per component
- Try to keep components simple, if a component is bigger or has a bigger impact on the app use a separate branch
- Assemble pages (branchname:
page/caracters,character-page,detailspageetc.)- Adding a page should affect more files, since you need to add a route and create the page with your existing components, maybe even add a components or two. Try to have a branch per page
- Refine your app (branchname:
refactor/details-pageorrefactor-navigation)- Always keep in mind: Make it work first, then make it better.
- Try to leave styling details to the end
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify