You’ve heard about React, the JavaScript library for building web applications? And you’re wondering how to use it beyond the “Hello, World” stage? Then this talk is for you! Join me in an action-packed session full of live code examples where we’ll discover how you can use React to build the hottest web applications while keeping your head cool.
When you leave the room, you’ll know enough to build real-world web applications!
36. 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)
#reactin40mins
41. 2 A
If you put your left shoe on the wrong foot, it's on the right
foot.
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({ joke, loading: false })
}
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)
#reactin40mins
42. 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)
#reactin40mins
49. 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(callback).toHaveBeenCalled();
});
});
Maarten Mulders (@mthmulders)
#reactin40mins
50. 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)
#reactin40mins