To deploy to netlify just drag and drop the project to app.netlify.com/drop
A11y
alt
Use rem for font-size
Use headings for semantic meaning
Custom Components
function Component() {
return
<ol>
<li>test</li>
}
ReactDOM.render(<Component />,
document.getElementById('root'))
Composing a component of other components:
//////
> npm create vite@latest to build a react app
To add style to an element
className="nav-items"
<script src="index.pack.js"></script>
import React from "react"
import Navbar from "./components/Navbar"
import Main from "./components/Main"
React doesn't have to be imported to main or navbar.
Send props to a component to make it more reusable
<Header title="Great News">
export default function Header(props {return (
<h1>{props.title}</h1>)})
Mapping components
Conditional Rendering
Spread Objects as props
When returning JSX there needs to be a parent element wrapping everyting.
Event Handlers <button onClick={handleCLick}>
A component uses the props sent to it from it's parent without changing it.
A component mahy have it's own data, AKA state. State is ata taht can be changed and the componeent gets re-rendered as a result of state change.
Maintain a state with a hook: const [count, set count] = React.useState(0)
function addd(){
setCount(prevCount => prevCount +1)
}
Complex State Arrays
Arrays
Obj
A parent can send a copy of the state to the child as a rpop
The child cannot change the props
In order for the child to change the state in the parent the parent sends a function to the child as props. That function wehnm called from the child, can change the stae in the parent.
Styling in React
Const styles = {
backgroundColor: 'black'
}
You don't need derived state. Keep state in the parent component.
Conditionaal rendering with the ternary opperator
add label htmlFor="" for input
Main React Tasks
Render the UI
Kepp track of state
Re-render the UI when state changes
React wont handle on its own side effects
localStorage
API/DB interactionsw
Subscritions (websockets)
render() ---???????
JS for React
Loops
for (let i = 0; i < 5; i++) {
console.log(i)
}
logs 0 1 2 3 4
let i = 0
while(i < 5) {
console.log(i)
i++
}
logs 0 1 2 3 4
There are other loops, these are just the core ones.
Function
Newer way to write functions
const sum = function(a, b) {
return 1 + b
}
console.log(sum(1, 2))
logs 3
A function is a way to reuse code
Older way of writing functions
console.log(sum(1, 2))
function sum(a, b) {
return(a + b)
}
logs 3. This function is hoisted.
Arrow Functions
Anonymous functions.
const sum = (a, b) => {
return a + b
}
console.log(sum(1, 2))
logs 3
Arrays
A list of things.
const numbers = [1, 2, 3]
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i])
}