React.js
Agenda for today
Disclaimer
What's React?
Why React?
React: JSX
React: JSX Example
const num = 11;
const message = <h1>HOTH {num}</h1>
const nameFunction = () => {
return 'XI';
};
const message = <h1>HOTH {nameFunction()}</h1>;
Playlist/list of songs
Bonus: (exposure to my amazing music taste) :D
Demo for Today
Agenda for today
Before we continue …
Set up your React project
In Terminal:
npm create vite@latest
Set up your React project
cd your-project-name
npm install
npm run dev
Demo
Agenda for today
Components
image
account info
actions
nav bar
comment box
reactions
breaking it up…
Profile Picture:
<img />
User Name:
<h5></h5>
comment:
<p></p>
time:
<p></p>
using HTML elements we can break this component even further!
Components in React
like a JavaScript function! (returning HTML)
Imports and Exports
export default Song;
import Song from './components/Song'
Note on Imports
import Song from './components/Song'
import fullHeart from '../images/whitefullheart-removebg-preview.png'
vs.
oh look at that!
a great example of a component on a web page
Our Demo
Building our first component
Agenda for today
Props
Using Props
props as an object
props in line
array.map()
array.map()
Implementing props
Agenda for today
collapsible menus
What is State?
React Hooks
import React, {useState} from 'react'
variable that gets updated
State Variables
const [liked, setLiked] = useState(false)
function that will update the variable (update the state)
default/initial value we set the variable to
Updating State Variables
setLiked(!liked)
what you want to change the variable to
function to update the variable
updating state for our heart
State Demo
{liked ? fullHeart : emptyHeart}
Updating State Variables
condition
expression1
expression2
?
:
if condition is true, execute expression1, if not execute expression2
npm install @ionic/react ionicons
Using Icons
Result
Agenda for today
Thanks for watching!
good luck at HOTH!