JavaScript library
for building web
user interface
React Concepts
React Components
Components
https://react.dev/learn/your-first-component
Defining a component
export default function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3Am.jpg"
alt="Katherine Johnson"
/>
)
}
Styling components
<ul className="goal-list">
.goal-list {
list-style: none;
margin: 2rem;
padding: 0;
}
import "./GoalList.css";
Export components
Import components
import GoalList from "./components/GoalList/GoalList";
Using a component
return (
<div className="course-goals">
<h2>Course Goals</h2>
<GoalList goals={courseGoals} />
</div>
);
React Props
Props
https://react.dev/learn/passing-props-to-a-component
Example
Example:
function Avatar() {
return (
<img
className="avatar"
src="https://i.imgur.com/1bX5QH6.jpg"
alt="Lin Lanying"
width={100}
height={100}
/>
);
}
export default function Profile() {
return (
<Avatar />
);
}
Maps
https://react.dev/learn/rendering-lists
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
1. Move the data into an array
2. Map the people members into a new
array of JSX nodes, listItems
const listItems people.map(person => <li>{person}</li>);
3. Return listItems from your component
wrapped in a <ul>
In App.js:
const people = [
'Creola Katherine Johnson: mathematician',
'Mario José Molina-Pasquel Henríquez: chemist',
'Mohammad Abdus Salam: physicist',
'Percy Lavon Julian: chemist',
'Subrahmanyan Chandrasekhar: astrophysicist'
];
export default function List() {
const listItems = people.map(person =>
<li>{person}</li>
);
return <ul>{listItems}</ul>;
}
React Events
Events
https://react.dev/learn/responding-to-events
React States
What goes in state?
What goes in state? (cont.)
Using State – useState
https://react.dev/reference/react/useState
Using State – useState (cont.)
const [count, setCount] = useState(0);
Sample code
import { useState } from 'react';
function MyComponent() {
const [age, setAge] = useState(28);
const [name, setName] = useState('Taylor');
const [todos, setTodos] = useState(() =>
createTodos());
// ...
React Forms
Forms
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
React form
Thinking about state
Controlled components
Material UI
https://mui.com/material-ui/
https://mui.com/material-ui/getting-
started/templates/
