The document discusses React and how it works. It explains that React uses a virtual DOM to efficiently update the real DOM by only making necessary changes. React components are JavaScript functions that return JSX elements describing the UI. The virtual DOM allows React to efficiently compare the component tree and real DOM to minimize updates by using two key techniques: checking for differences in element types, and using a "key" prop to identify elements over re-renders.
37. F HTTP
What we need:
1. A bit of Plain Old JavaScript to fetch some data
2. A component to show the fetched data
Maarten Mulders (@mthmulders)
#reactin50mins
42. 2 A
I got arrested for downloading the whole of Wikipedia. I said:
"Wait, I can explain everything!"
const RandomJoke = () => {
const [ { joke, loading }, setState ] = React.useState({ loading: true });
const fetchRandomJoke = async () => {
// Does the actual API call to Oracle Cloud function, see before.
const joke = await getJoke();
setState({ loading: false, joke });
}
React.useEffect(() => {
fetchRandomJoke()
}, [ ]);
if (loading) return <div>Loading...</div>
return <div>{ joke }</div>;
};
ReactDOM.render(<RandomJoke />, document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Maarten Mulders (@mthmulders)
#reactin50mins
43. S
Local Storage & Session Storage
Part of the
Stores and retrieves string values
Serialise objects with JSON.stringify()
Deserialise with JSON.parse()
Persistent
during browser session with sessionStorage
over browser shutdowns with localStorage
Web Storage API
Maarten Mulders (@mthmulders)
#reactin50mins
50. T B C
import { f reEvent, render, screen } from '@testing library/react'
describe('<AwesomeButton ', () {
it('should invoke action on click', () {
const callback = jest.mock();
render(<AwesomeButton action={ callback } );
f reEvent.click(screen.getByRole('link'));
expect(dummy).toHaveBeenCalled();
});
});
Maarten Mulders (@mthmulders)
#reactin50mins
51. D S
tl;dr: use (CRA)
Uses Webpack, Babel, ESLint and a dozen of other tools
Tested to work together
Live-reloading of changed code
Source maps for easy debugging
Have an ready-to-go app in one command
Create React App
npx create react app my next killer app
or
npm i g create react app
create react app my next killer app
Maarten Mulders (@mthmulders)
#reactin50mins
54. T R (C ) H
1. Name must start with use!
2. Only use in React function components
not in classes
not outside React components
Maarten Mulders (@mthmulders)
#reactin50mins
56. R 18: N R API
From React 18 on, you can use a new Root API.
L R API
(will continue to work, but will eventually be deprecated)
N R API
ReactDOM.render(<App , document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App );
Maarten Mulders (@mthmulders)
#reactin50mins
58. R 18: U
Distinguish between urgent updates (typing, hover, dragging,
...) and UI transitions (slowed down by expensive rendering,
slow network...).
Wrap a non-urgent updates in startTransition, so an urgent
update can interrupt it. React will discard stale rendering work
and render only the latest update.
Maarten Mulders (@mthmulders)
#reactin50mins