Guide: Javascript/React - SPAs
Description
👉 This guide is part of the Javascript/React Guides. Please follow the order:
- Fundamentals
- SPAs
- SSR & Performance
Now that you have already tried and tested React's fundamental aspects it's time to enter the realm of SPAs. Single Page Applications are websites that you can navigate without leaving the page. All the interface changes are controlled by Javascript, including the history (remember the Web APIs Guide?). In this Guide you will create a SPA with React, which offers many tools to do just that.
Knowledge
- Understand what is a Single Page Application
- Understand what is a Router in Javascript
- Understand what is Authentication
- Understand what is a database
Skills
- Be able to create a SPA with React
- Be able to use an authentication mechanism in React
- Be able to use a database in React
- Be able to use a state management tool
Topics
- Router
- Authentication & Authorization
- Auth0 or similar
- OAuth & JWT
- Firebase Database (or similar)
- State management
Action Points
- Read-up on Single Page Applications as a whole
- Discover how to use React Router
- Learn how to use an external Authentication library with React (Auth0, for example)
- Learn how to use an external database with React (Firebase, for example)
- Learn how to use a state management tool (such as Redux)
Deliverable: React app with authentication
- Submit:
- Glitch Project URL or Github Repository + Github Pages URLs
- Project description and details in the README.md file
- Minimum requirements:
- Create a React application allows the user to authenticate/unauthenticate and then manage their own data
- Use a Router solution for React
- Make sure there are protected Routes that can only be accessed by users who are logged in
- Use Firebase (or similar) for persistence. Glitch has different solutions here: https://glitch.com/@storage
- Make use of Redux to manage state
- Theme ideas:
- Diary app
- Note taking app
- Blog/Microblog system