🦊 React Forms and Authentication 🦊

🗓️ Today’s topics

• React Trivia review
• Forms in React
• Understanding what “logged in” means
• How to handle authentication in a React application

🎯 Collaborative Project

Begin talking to your teammates and planning the team project. You should have detailed wireframes, an idea of user flow (how your user interacts with your UI), and a plan for components done by tomorrow.

Start with: What does my user see when they first land on this page? What will they do? What happens next?

🚫 No writing code yet! Today is for planning only. We’ll cover working together on GitHub tomorrow.

📖 Read | 📺 Watch | 🎧 Listen

• 📖 Introduction to Client-Side Storage
• 📖 React Mental Models: Working With Input

React Mental Model

Review the core concepts of how React works by reading these visual guides.

• 📖 What is React?
• 📖 React Mental Model: Cutting Holes in HTML
• 📖 Props & State explained

🔖 Resources

Forms

• Controlled vs uncontrolled form inputs in React
• Dave Ceddia: React Forms

Working with Local Storage in React

• use-local-storage-state -> You would npm install use-local-storage-state to use it in your code
  • Check out this custom hook code example, which shows how you could implement this yourself (you could even borrow this code and use it in your project instead of the above library if you wanted to!).
  • Using the Web Storage API