React Day 1.md

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

WIFI: Penguine House

Password: Penguin2019

Next Day -> Day 2

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/

Modern JavaScript for React

Array Destructering

Task 1

1. Destructer the array in a way, so that you assign 20 from the array to a variable called twenty.

const arr = [20, 30, 40]

let twenty = 20             // use array destructering here
let result = twenty 
console.log(twenty)

Task 2

2. Destructer the array in a way, so that you assign 40 from the array to a variable called forty.

const arr = [20, 30, 40]

let forty = 40    // use array destructering here
let result = forty 
console.log(result)

Object Destructering

Task 1

• Destructere the name property from the object props, so that we no longer access the property through props.name.

const props = {
  name: 'Jimmy',
  profession: 'Baker',
  age: 26,
}

let name = props.name        // replace this line
const result = name
console.log(result)

Task 2

• Rewrite the function to use destructering for the person argument.

function getFullName(person) {
  // Use destructering to get the properties off the person
  let firstName = person.firstName // --> destructer here
  let lastName = person.lastName // --> destructer here
  
  return firstName + ' ' + lastName
}


const person1 = {
  firstName: 'Jimmy',
  lastName: 'Carr'
}

const result = getFullName(person1)

console.log(result)

Task 3

• Rewrite the function to use destructering for the person, but this time already destructer within the function argument.

// Use destructering to get the properties off the person
function getFullName(person) { // --> destructere the arguments 
  let firstName = person.firstName // --> delete line
  let lastName = person.lastName // --> delete line
  
  return firstName + ' ' + lastName
}


const person1 = {
  firstName: 'Jimmy',
  lastName: 'Carr'
}

const result = getFullName(person1)

console.log(result)

Arrow Functions

Task 1

Rewrite this function to be an arrow function:

function add(a, b) {
  return a + b
}

add(10, 20)

Task 2

Rewrite this function to be an arrow function:

function fractionToFloat ({numerator, denominator}) {
  return numerator / denominator
}

// 5 / 10
const fraction = {
  numerator: 5,
  denominator: 10,
}
fractionToFloat(fraction)

Map Function

Task 1

Use the map function to divide each element in the array by 5.

const arr = [10, 20, 30]
// Result should be: [ 2, 4, 6 ]

Task 2

Use the map function to multiply each element in the array by 7.

const arr = [10, 20, 30]
// Resulst should be: [ 70, 140, 210 ]

Task 3

Use the map function to turn each element in the array to a string

const arr = [10, 20, 30]
// Resulst should be: [ '10', '20', '30' ]

.

React 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. Create a react project with

npx create-react-app my-project
cd my-project
npm start

R1

Createing React Elements

1. Render a 'h1' react element to the page using React.createElement()

Creating JSX Elements

2. Render a 'h1' element to the page using JSX.

R2

1. Reusing a component

3. Create a button component <Button />. Render the button component multiple times within your app.

function App() {
    return (
        <div>
            <Button />
            <Button />
            <Button />
        </div>
    )
}

2. Passing on Props

Create a custom paragraph component that takes a text prop and a color prop. The custom paragraph displays the text within a <p>text</p> and changes to color according to the passed on props.

export default function App() {
  return (
    <div>
      <CustomParagraph color="red" text="Hello World" />
      <CustomParagraph color="#5c6ac4" text="My custom colored paragraph" />
    </div>
  );
}

The result should look something like this:

Example: https://h0wy6.csb.app/

3. Passing on Props 2

Create a Profile component that takes the props firstName, lastName, age, profession. The Profile component displays the data in a structured component. If you feel fancy add an avatar prop which takes in the url of an avatar and displays the avatar within the profile.

<div>
    <Profile firstName="Jorge" lastName="Gonzales" age="18" profession="Programmer" />
    <Profile firstName="Penelope" lastName="Cruz" age="22" profession="Actor" />
    <Profile firstName="Elton" lastName="John" age="68" profession="Singer" />
</div>

Example: https://0snq4.csb.app/

R3

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>
  );
}

R4

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>
  );
}

R5

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