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!
2. “React is a library for declaratively
building user interfaces using
JavaScript and (optionally) XML.
Maarten Mulders (@mthmulders)#reactin50mins
3. R
No two-way data binding
No templating language
Just user interface (no routing, no HTTP client)
Plain JavaScript (or add JSX, TypeScript, ...)
Virtual DOM vs. actual DOM
Maarten Mulders (@mthmulders)#reactin50mins
10. O S N
{"name":"Jane Doe","age":42}
const name = 'Jane Doe';
const age = 42;
const person = { name, age };
const text = JSON.stringify(person)
document.getElementById('app').innerText = text;
1
2
3
4
5
6
Maarten Mulders (@mthmulders)#reactin50mins
13. W JSX
A syntax extension to JavaScript
real XML, not a string of characters
allows embedded expressions
supports attributes
Can be nested
Automatic XSS prevention
Needs to be transpiled to JavaScript
e.g. React.createElement(...)
Maarten Mulders (@mthmulders)#reactin50mins
14. E
Elements can be regular DOM elements... (for now, but not for long)
Hello World
const element = <div>Hello World</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)#reactin50mins
15. A
Elements can have attributes...
Hello World
const element = <div id='example'>Hello World</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)#reactin50mins
16. ... but they can have different names than HTML attributes:
Hello World
const element = <div className='redtext'>Hello World</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)#reactin50mins
17. ... and they can behave differently:
Hello World
const style = { color: 'red', fontWeight: 'bold' };
const element = <div style={ style }>Hello World</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
3
Maarten Mulders (@mthmulders)#reactin50mins
18. S R N
Values must have a single root node (or an array)
x
y
const element = <><div>x</div><div>y</div></>
ReactDOM.render(element, document.getElementById('app'));
1
2
3
Maarten Mulders (@mthmulders)#reactin50mins
19. C
Function that takes props (think: arguments) and returns a
React element.
Hello, world!
const Greeter = (props) => <div>Hello, world!</div>
ReactDOM.render(<Greeter />, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)#reactin50mins
27. A
So far, we've written components and wired them together.
Babel or tsc transpiles them to React.createElement(...)
invocations:
<Greeter name={ 'DevNexus' }
/** transpiles into
React.createElement(Greeter, { name: 'DevNexus' }, null)
Maarten Mulders (@mthmulders)#reactin50mins
28. A
The React.createElement invocations form a tree of
components. React maintains a virtual DOM based on your
component tree.
The virtual DOM is compared to the actual DOM.
Only necessary changes are executed.
Maarten Mulders (@mthmulders)#reactin50mins
29. R
React syncs the virtual and the actual DOM based on two
assumptions:
1. If two elements are of different type, the (sub) tree will be
different.
2. The key prop identifies child elements over re-renders.
Maarten Mulders (@mthmulders)#reactin50mins
30. 1 E
Hallo, World!
const DutchGreeter = ({ name }) => <div> Hallo, { name }!</div>;
const EnglishGreeter = ({ name }) => <div> Hello, { name }!</div>;
const SpanishGreeter = ({ name }) => <div> ¡Hola, { name }!</div>;
const App = ({ lang, name }) => {
switch(lang) {
case 'es': return <SpanishGreeter name={ name } />
case 'nl': return <DutchGreeter name={ name } />
case 'en':
default : return <EnglishGreeter name={ name } />
}
};
ReactDOM.render(<App name='World' lang='nl' />,
document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
11
12
13
Maarten Mulders (@mthmulders)#reactin50mins
34. R E
Similar to DOM event handling, but
1. event names are different: onClick vs onclick.
2. event handlers are always functions, never strings.
3. event handlers are bound to a component, should not live
globally.
4. event handlers receive an synthetic event - browser-agnostic!
Maarten Mulders (@mthmulders)#reactin50mins
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
39. 2 A
Why did the hipster burn his mouth? He drank the coffee
before it was cool.
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
40. 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
41. D A
1. Debugging
2. Testing
3. Building
Maarten Mulders (@mthmulders)#reactin50mins
42. D
Install the React Developer Tools for your browser of choice.
Maarten Mulders (@mthmulders)#reactin50mins
45. T
Use Jest (testing platform & library) and Enzyme, a testing
utility for React
Render a React component in a unit test
Make assertions about its output and behaviour
Maarten Mulders (@mthmulders)#reactin50mins
47. 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
48. 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
49. U CRA
npm run start to start developing
npm run build to create a production build
npm run test to run unit tests
Maarten Mulders (@mthmulders)#reactin50mins
51. 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
52. C H
My sweater had a lot of static electricity. The store gave me a
new one, free of charge.
const useRandomJoke = () => {
const [ { joke, loading }, setState ] = React.useState({ loading: true });
const fetchRandomJoke = async () => {
const joke = await getJoke();
setState({ loading: false, joke });
}
React.useEffect(() => { fetchRandomJoke() }, [ ]);
return { loading, joke };
};
const RandomJoke = ({ }) => {
const { joke, loading } = useRandomJoke()
if (loading) return <div>Loading...</div>;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Maarten Mulders (@mthmulders)#reactin50mins
53. T
Use Create React App
Think in (small) components
Think declaratively
I ❤ your feedback @
U
Create React App:
Dad Jokes API:
schedule.devnexus.com
https://bit.ly/c-r-a
https://bit.ly/dad-joke-api
Maarten Mulders (@mthmulders)#reactin50mins