React Day 2: https://bit.ly/2TDo5zO
Yesterday
- Introduction
- JS Catch Up
- Kahoot Quiz: https://kahoot.it/
- React Project Setup
- Creating React Elements
- Creating React Components
- Passing Props
- Reusing Components
Today
- Checking
- Kahoot Quiz: https://kahoot.it/
- Handling Events
- Conditional Rendering
- Rendering Lists
- Using State
-
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)
-
Join Whatsapp Group link: https://chat.whatsapp.com/HhEbt2Sb3ClJNfHFPttnn5
-
Join Penguin Academy: https://tribe.penguin.academy/
-
Create your solutions on CodeSandbox. You can log in with your Github account. https://codesandbox.io/
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>
)
}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>
)
}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>
)
}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>
)
}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>
);
}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/
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>
);
}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>
);
}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>
);
}import React, { useState } from "react";
function Input(props) {
const { onNewInput } = props;
const [input, setInput] = useState("");
const inputChangeHandler = event => {
setInput(event.target.value);
};
const submitHandler = event => {
event.preventDefault();
if (input.length === 0) {
return;
}
onNewInput(input);
setInput("");
};
return (
<form onSubmit={submitHandler}>
<input
type="text"
placeholder="Add new todo"
value={input}
onChange={inputChangeHandler}
/>
<button type="submit">Add</button>
</form>
);
}
function TodoList(props) {
const { todos, onDelete } = props;
if (todos.length === 0) {
return <div>No todos</div>;
}
return (
<div style={{ margin: "20px" }}>
{todos.map(todo => {
return <TodoListItem todo={todo} onDelete={onDelete} />;
})}
</div>
);
}
function TodoListItem(props) {
const { todo, onDelete } = props;
const onDeleteHandler = () => {
onDelete(todo.id);
};
return (
<div key={todo.id} style={{ backgroundColor: "grey" }}>
<button
onClick={onDeleteHandler}
style={{ backgroundColor: "green", margin: "20px" }}
>
DEL
</button>
{todo.task}
</div>
);
}
function App() {
const [todos, setTodos] = useState([]);
const newInputHandler = todo => {
const newTodo = {
id: Math.random() * 100000,
task: todo
};
setTodos([...todos, newTodo]);
};
const onDeleteHandler = id => {
let filteredTodos = todos.filter(todo => {
return todo.id !== id;
});
setTodos(filteredTodos);
};
return (
<div>
<Input onNewInput={newInputHandler} />
<TodoList todos={todos} onDelete={onDeleteHandler} />
<pre>{JSON.stringify(todos, null, 2)}</pre>
</div>
);
}
export default App;