- Multiple cursors: click and hold alt, then click again underneath it
-
Generate html structure
html:5
-
script
script:src
-
link with css
link:css
-
run from command line
prettier \"src/**/*.{js, html}\"
extends
are sets of rules andplugins
are new abilities for eslintrule
- we can turn on/off specific rules
-
package-lock
locks down the versions when you deploy your code -
on production:
npm ci
will use the package-lock insteade of the package.json to install the exactly the correct versions -
Importing - curly braces or not?
- curly braces: when importing single feature; it's live code inclusion: it includes only the code we want to run (if they packaged it correctly)
import { render } from "react-dom";
-
default exports:
export default function Pet({something, something});
and then
import Something from ...
otherwise it would be
const Pet = { something, something } { ... };
import { Something } from ...
-
JSX
- no JSX: write js to mimic markup
- JSX: write js directly in html; translates to React code
-
Understand React correctly:
npm install -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
babel-eslint
allows eslint to be augumented by Babel (the transpiler). Eslint doesn't understand React out of the box.eslint-plugin-import
gives some rules about importing and exporting things.eslint-plugin-jsx-a11y
- simple accessability; things for accesibility (e.g. don't make divs clickable).eslint-plugin-react
- additional react rules.
-
prop-types
: weak type checking for React -
return () Javascript works so that if it sees a new line, it will end
return
there By surrounding the content in parenthesis, JS knows the code is not done and should continue to the next line. -
Statement vs Expression
const x = name.toUpperCase();
The whole thing is a statement (the whole idea), name.toUpperCase(); is an expression
- things in
{}
are considered expressions (on the right side of an statement)
- things in
-
!!! use onChange and onBlur together for better accessibility https://www.themaninblue.com/writing/perspective/2004/10/19/
-
Why unique keys?
- no need to rerender everything when we are just e.g. resorting things
- two way data binding is not free in React. Re-rendering doesn't force change (e.g. input onChange is explicit)
const [location, setLocation] = useState("Seattle, WA");
- this is also destructuring, we know this is going to be an array; we know the first item is always the state, the second is the updater
- Here "Seattle, WA" is the default state.
location
is the current state of location, setLocation is the updater for that piece of state- !!! render functions for components: every time you update your application, it reruns all of the renders. So make sure the hooks are not doing anything extraneus, e.g. updating any function, no side effects. Should be focused on rendering something.
- all hooks begin with
use
-> useEffect, useState, etc - you can spare yourself setting the state
- !!! hooks never go inside
if
statements orfor
loops!!! They are keeping track of the order in which we are creating hooks, a.k.a the order we are calling these hooks
- takes place of several of the lifecycle hooks, e.g. componentDidMount, componentWillUnmount, componentDidUpdate
- it's disconnected from when the render is actually happening
const useDropdown = (label, defaultState, options) => {
const [state, setState] = useState(defaultState);
const id = `use-dropdown-${label.replace(" ", "").toLowerCase()}`;
const Dropdown = () => (
<label htmlFor={id}>
{label}
<select
id={id}
value={state}
onChange={(e) => setState(e.target.value)}
onBlur={(e) => setState(e.target.value)}
disabled={options.length === 0}
>
<option>All</option>
{options.map((item) => (
<option key={item} value={item}>
{item}
</option>
))}
</select>
</label>
);
return [state, Dropdown, setState];
};
Usage:
const [breed, BreedDropdown] = useDropdown("Breed", "", breeds);
...
<BreedDropdown />```
- future proof you application
- if you are using one of the unstable APIs, it will trigger warnings
- functional components === stateless components
- componentDidMount - runs once and then it stops; useful for ajax requests
- super(props) calls the constructor on the parent class (which is often React.Component)
constructor(props) {
super(props);
}
getDerivedStateFromProps
- invoked right before calling the render method, both on the initial mount and on subsequent updates
- it should return an object to update the state, or null to update nothing
- used for when the state depends on changes in props
"@babel/preset-react"
=> brings all the things you need to transiple react"@babel/preset-env"
=> will transpile the code to the env you specify"@babel/plugin-proposal-class-properties"
=> allows us to use new syntax
In App.js
const App = () => {
const themeHook = useState("darkblue");
return (
<React.StrictMode>
<ThemeContext.Provider value={themeHook}>
<div>
<header>
<Link id="something-important" to="/">Adopt me!</Link>
</header>
<Router>
<SearchParams path="/" />
<Details path="/details/:id" />
</Router>
</div>
</ThemeContext.Provider>
</React.StrictMode>
);
};
In a child component:
<ThemeContext.Consumer>
{(themeHook) => (<button style={{ backgroundColor: themeHook[0] }}>
Adopt {name}
</button>)}
</ThemeContext.Consumer>