02 React II

• Learning objectives for the week

Topics covered in this week are:

1. Functional Components
2. Import and Export
3. Props
4. UseState
5. UseEffect
6. Lists and Keys
7. Conditional Rendering
8. Simple form input
9. Sharing state between components

We meet on Zoom.

Orient yourself in this documentation:

1. Importing and Exporting Components
2. Spread operator in JS
3. Destructuring in JS
4. Functional Components
5. Props
6. UseState
7. UseEffect
8. Fetch (GET) in JS
9. Fetching (GET) in React
10. React docs - Lifting State or toolbox lifting state

1. UseState
2. Lists and keys
3. Todolist

• Trip and Guide exercise

Orient yourself in this documentation:

• Json server
• React Forms: Controlled Components
• React Forms: Uncontrolled Components

• Implementing state and interactivity: Clone the start repo
• React Forms

• Last friday you made a mockup of your frontend application. This week it is time to start building a React application with the tools that we have got so far. Start by making a new react application and clean up the App.jsx file as usual.
• Next add a components folder to the src folder and in here add a folder for each of your components. Start by building the components visually (with jsx and css) without interactivity.
• Step 3 is to start adding props to your components and pass data down from the App.jsx file. You can use dummy data for now, but make sure to structure it in a way that makes sense for your application.
• If you haven’t already, you should draw up a component hierarchy (tree) for your application. This will help you understand how the components relate to each other and where the state should be managed.
• Step 4 is to start making eventhandlers and useState to make your components interactive. You can start with simple things like toggling a menu or showing and hiding information, but try to add as much interactivity as you can.
• If you have time, you can also start thinking about how to fetch data from your API and display it in your frontend application.