Events & State
Presenter: Kaylin
Please fill out this sign-in form!
Membership Code
hackschool5
members.uclaacm.com
Curriculum
A Note on Notes:
We recommend not coding along during this workshop
(besides during our 5-min checkpoints)
After the workshop we will be having a work session
where you can practice with the help of our mentors!
Slides can be used for reference.
Demo will be available on Github.
Outline
Recap:
our app.tsx:
this is a component!
Recap:
our app.tsx:
these are props!
Our goal today 🙌🏼 🙌🏼 🙌🏼
Arrow Functions
Arrow functions are specially structured functions that
Arrow Functions
// Traditional function expression
function square(num: number): number {
return num * num;
};
// Arrow function
const square = (num: number): number => num * num;
VS
Callbacks
Callbacks
callback
Array Destructuring
Remember arrays from the last workshop? We can actually do something pretty interesting with them! Take a look at the code below.
let phrase: string[] = ["Hack", "Is", "Awesome"];
Array Destructuring
We can destructure it from an array into individual variables.
function officers(): string[] {
return ["Aazel", "Sneha", "Kaylin"];
}
let [a, b, c]: [string, string, string] = officers();
Array Destructuring
Now, the variables have values respective to the order of the array and the listed variables!
console.log(a); // Output: Aazel
console.log(b); // Output: Sneha
console.log(c); // Output: Kaylin
Now what was the point of all that…🤔
Arrow functions
Callback
Array Destructuring
Now, let's get into our main topic!
How do Buttons work?
As we saw from our goal, we click on the button, then something occurs.
The button click from the user triggers some sort of action to occur!
TypeScript Events
This is called an event!
TypeScript reacts to events (such as a user clicking a button) and performs a desired action.
Examples of Events in React
onClick
onKeyDown
A helpful analogy!
A helpful analogy!
event
A helpful analogy!
event handler
event
Event Handlers
We need to specify what event actually occurs when the button is clicked!
function handleClick() {
alert("u clicked");
}
How to use Event Handler Functions?
We make sure this function is called through the event property!
<button onClick={handleClick} />
event
event handler
Events Demo
🚨5 Minute Checkpoint🚨
Implement your event!
What is a static website?
Typically when something is already on the screen, it's like pen on paper. You can't remove/change it. We say it is static.
But…
… if we could re-render the site (have the app refresh itself), then we can see the changes! Maybe there's some salvation here!
Another problem…
The problem is, using just a TypeScript variable by itself isn't enough to do this. We need some bothersome TypeScript code to do that…
What if I told you that React can help us fix this with relatively minimal work?
React State
Think of state as a piece of data that belongs to the component that can be updated when necessary
React re-renders that component for us when the state updated!
Small Aside: Hooks!
useState is an example of a React hook.
Hooks let us "hook into" parts of React, such as the state of the component.
Small Aside: Hooks!
React simplifies the complicated details of JavaScript or TypeScript by handling a lot of it for you, and giving you a "blueprint" for building components!
New Import Statement 👀
To start using State, we have to import it from React!
import React, { useState } from "react";
Aside: useEffect
import React, { useState, useEffect } from "react";
useEffect(() => {
console.log(“The like count changed to: ${likes}”);
}, [likes]);
~Aside~ Aside: Custom Hooks!
Creating State Variables
We define the state variables before the return field (where our content is)! This can be used with any TypeScript type, not just numbers!
function App() {
const [count, setCount] = useState<number>(0);
return (...);
}
Creating State Variables
useState is a function!
function App() {
const [count, setCount] = useState<number>(0);
return (...);
}
remember this? array destructuring!
let's see what useState gives us
Creating State Variables
function App() {
const [count, setCount] = useState<number>(0);
return (...);
}
the actual variable that can get updated
Creating State Variables
function App() {
const [count, setCount] = useState<number>(0);
return (...);
}
a function that updates the variable for us to whatever value we give it
Creating State Variables
function App() {
const [count, setCount] = useState<number>(0);
return (...);
}
some initial value.�can be any TS type!
Updating State Variables
All we have to do is call the updating function, like setCount, with some value to assign!
setCount(count + 1);
Updating State Variables
console.log(count); // Output: 0
setCount(count + 1);
console.log(count); // Output: 1
State Demo
🚨5 Minute Checkpoint🚨
Implement state!
Time to Work On Your Own Website! Thank you for coming!
Staying Updated
Instagram: @uclahack
Hack Website: hack.uclaacm.com
^ click the shiny glowing banner :0
Discord: discord.gg/gwaaFS2fah