Session Plan

Props

Building Components & Using Props

• What are props and why are they used?

• Props as a way to make components flexible and re-usable

• Why prop values should never be changed within components (one-way data flow)

• How to pass props to components

• Reading props using props.x syntax

• Reading props using destructing syntax

• Forwarding props using spread syntax

Using Children Props

• What are children props?

• Creating wrapper components

Conditional Rendering Based on Props

• Conditional rendering using if/else

• Conditional rendering using ternary operator (<condition> ? <then> : <else>)

• Conditional rendering using a boolean expression <condition> && <then>

State & Conditional Rendering

Introduction to State

• What is State and when to use it

• Differences between Props and State

useState Hook Syntax

• Introduction to React hooks

• How to declare and use State with useState

Updating State

• Updating State consisting of arrays

• Updating State consisting of an object

React Rendering Triggers

• What causes React to re-render components

• Using an update function for multiple State changes following after each other

Dynamically Rendering Content Based on State

• Conditional rendering using if/else

• Conditional rendering using ternary operator (<condition> ? <then> : <else>)

• Conditional rendering using a boolean expression <condition> && <then>

Rendering Many Components

• Rendering multiple items using .map()

Sharing State Between Components

• Lifting state up to the parent

Exercises

Exercises Part 1

1. Create a Re-usable Button Component

1. Create a new component called Button

2. Accept text and onClick as props

3. Render a <button> element with the text prop as its content

4. Attach the onClick prop to the button's onClick event handler

2. Create a Card Component

1. Create a new component called Card

2. Accept title, description, and imageUrl as props

3. Use destructuring to extract the props

4. Render a card-like structure with the provided title, description, and imageUrl

3. Create a Layout Component

1. Create a new component called Layout

2. Accept children as a prop

3. Render a layout structure (e.g. header, main content area, footer) with the children prop rendered inside the main content area

4. Pass children by adding them in between the tags of the parent component

4. Implement Conditional Rendering

1. Create a new component called ToggleContent

2. Accept a show prop as a boolean value

3. Accept content as a prop, which can be a string or a React element

4. Render the content prop only if the show prop is true, otherwise render a message

Exercises Part 2

5. Create a Counter Component

1. Create a new component called Counter

2. Use the useState hook to manage a count state variable

3. Implement functions to increment (count up) and decrement (count down) the count

4. Render the current count value and buttons to call the increment and decrement functions

6. Develop a Form Component

1. Create a new component called Form

2. Use the useState hook to manage the state of form input fields

3. Implement a function to handle form submission, you may want to use onSubmit in combination with a <button type="submit">

4. Render a form, input fields for each form field and the mentioned submit button

7. Create a ParentChild Component Set

1. Create a new component called Parent

2. Create another component called Child

3. In the Parent component, use the useState hook to manage a state variable

4. Implement a function to update the state variable

5. Render the Child component and pass the state variable and the update function as props

6. In the Child component, render the data received from the parent and a button to call the update function that changes the state