You've heard about React, the user interface library developed by Facebook? 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!
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
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 { shallow } from 'enzyme';
describe('<AwesomeButton ', () {
it('should invoke action on click', () {
const callback = jest.mock();
const wrapper = mount(<AwesomeButton action={ callback } );
wrapper.f nd('a').simulate('click');
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