3cM7Acj

Setup

WIFI: Penguine House

Password: Penguin2019

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

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

Join Whatsapp Group link: https://chat.whatsapp.com/Dv8jbCIIwNL8NABrHCzTm9
Join Penguin Academy: https://tribe.penguin.academy/
Create your solutions on CodeSandbox. You can login with your github account. https://codesandbox.io/

Optional Content to Review

Destructering Objects and Arrays:

https://gist.github.com/dominikkaegi/4a48d21828bc793fb5242396924a2e67

R1

1. Rendering Elements

Create a react element with React.createElement() and render it to the page.
Create a JSX element and render it to the page
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 which takes a text prop. The custom paragraph displays the text within a <p>text</p> and changes the color to red.

<div>
	<CustomParagraph text="Hello World" />
	<CustomParagraph text="This text seems to be red" />
</div>

3. Passing on Props 2

Create a Profile component which 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>

R2

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 which renders "Welcome Stranger" if the person is not logged in or "Welcome User" if the person ist 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 of messages to test your code.

function App() {
	const messages = ['React', 'Re: React', 'Re:Re: React'];
	
	return (
		<div>
			// If there are unread messages, render here the amount of unread hessages
		</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>
  );
}

R3

1. Introducing State to out application

Create a static and a shared counter component. Each component displays three counters whcih 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>
  );
}

R4

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

Build a Tab Component

Link to Day 2: https://gist.github.com/dominikkaegi/2919151d85827b15fd4f006c6196bad6

dominikkaegi/React Introduction.md