JavaScript library
for building web
user interface
React Concepts
React Components
Components
[Link]
Defining a component
export default function Profile() {
return (
<img
src="[Link]
alt="Katherine Johnson"
/>
)
}
Styling components
<ul className="goal-list">
.goal-list {
list-style: none;
margin: 2rem;
padding: 0;
}
import "./[Link]";
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
[Link]
Example
Example:
function Avatar() {
return (
<img
className="avatar"
src="[Link]
alt="Lin Lanying"
width={100}
height={100}
/>
);
}
export default function Profile() {
return (
<Avatar />
);
}
Maps
[Link]
[Link]
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 [Link](person => <li>{person}</li>);
3. Return listItems from your component
wrapped in a <ul>
In [Link]:
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 = [Link](person =>
<li>{person}</li>
);
return <ul>{listItems}</ul>;
}
React Events
Events
[Link]
React States
What goes in state?
What goes in state? (cont.)
Using State – useState
[Link]
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
[Link]
[Link]
started/templates/
