React Day 2.md

React Introduction: https://bit.ly/320nt9S

WIFI: Penguine House

Password: Penguin2019

Agenda

• Introduction
• Kahoot Quiz: https://kahoot.it/
• JS Catch Up
• React Project Setup
• Creating React Elements
• Creating React Components
• Passing Props
• Reusing Components
• Handling Events
• Conditional Rendering
• (Rendering Lists)
• Using State

Setup

1. Have a recent version of node installed or download it now from nodejs

   • (If you are on windows you probably also want to install windows bash)

2. Join Whatsapp Group link: https://chat.whatsapp.com/HhEbt2Sb3ClJNfHFPttnn5

3. Join Penguin Academy: https://tribe.penguin.academy/

4. Create your solutions on CodeSandbox. You can log in with your Github account. https://codesandbox.io/

R1

1. Handling Events

Create a custom <Button /> component and make sure it fires the right handler when clicking the according button.

function App() {
    const handleFirstButton = () => console.log('handling First Button event')
    const handleSecondButton = () => console.log('handling Second Button event')

    return (
        <div>
            <Button onCustomEvent={handleFirstButton} text="First Button" />
            <Button onCustomEvent={handleSecondButton} text="Second Button" />
        </div>
    )
}

2. Handling Events 2

We can reduce the amount of code we need to write by passing up the text of which button has been clicked on the parent component. Adjust your app accordingly to pass up the text.

function App() {
    const handleButtonEvent = (text) => console.log(`handling ${text} event`)

    return (
        <div>
            <Button onCustomEvent={handleButtonEvent} text="First Button" />
            <Button onCustomEvent={handleButtonEvent} text="Second Button" />
        </div>
    )
}

3. Conditional Rendering

Create a Greeting component that renders "Welcome Stranger" if the person is not logged in or "Welcome User" if the person is logged in. Change the value of isLoggedIn by hand to test your code.

function App() {
    const isLoggedIn = true;
    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
        </div>
    )
}

3. Conditional Rendering 2

Render a text which says "You have x unread messages" if the user has any unread messages. If the user does not have any unread messages, then render "Nothing New here". Change the amount the amount of unreadMessages to test your code.

function App() {
    const unreadMessages = [
        'Hi James, how are you?',
        'Do you want to come over for lunch tonight?'
    ]
    
    return (
        <div>
            // If there are unread messages, render here the amount of unread hessages
            // else render 'Nothing New Here'
        </div>
    )
}

4. Rendering Lists

Render the names of the Cats and Dogs dynamically in the component below. Make sure no errors are showing up.

function App() {
  const cats = [
    { name: "Jim", id: "1" },
    { name: "Garfield", id: "2" }
  ];

  const dogs = [
    { name: "Bronco", id: "1" },
    { name: "Malphi", id: "1" }
  ];

  return (
    <div>
      <h3>Cats</h3>
      <ul>
        <li>Cat1</li>
      </ul>
      <h3>Dogs</h3>
      <ul>
        <li>Dog</li>
      </ul>
    </div>
  );
}

R2

1. First Time State

Create a counter which has an increase and a decrease button. When you click on one of the buttons the count should either increase or decrease.

See Example: https://dk0uh.csb.app/

2. Lifting State Exercise

Create a static and a shared counter component. Each component displays three counters which can be increased when clicking on a button. When clicking on a static counter only the count of that single static counter should be increased. On the other hand, when clicking on the increase button of a shared counter, the count of all shared counters should be increased.

See Example: https://w4zi2.csb.app/

import SharedCounter from "./SharedCounter";
import StaticCounter from "./StaticCounter";

export default function App() {
  return (
    <div className="App">
      <SharedCounter />
      <StaticCounter />
    </div>
  );
}

R3

1. RedButton with Children

Create a component called RedButton which renders a button with red text.

function RenderChildren({ children }) {
  return (
    <div>
      <RedButton>This text is written in red</RedButton>
      <RedButton>
        This text is written in red,
        <span style={{ color: "blue" }}>but this part is blue</span>
      </RedButton>
    </div>
  );
}

2. Extending the props of a child

Build a ButtonWrapper which extends the props of their children with their index within the IndexWrapper. The example below should display the following button texts First Button - 0, Second Button - 1, Third Button - 2.

export default function App() {
  return (
    <div className="App">
      <IndexWrapper>
        <RedButton>First Button</RedButton>
        <RedButton>Second Button</RedButton>
        <RedButton>Third Button</RedButton>
      </IndexWrapper>
    </div>
  );
}

Challenges

1. Build a Tab Component