SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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!
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!
1.
R 45 M
Maarten Mulders (@mthmulders)#reactin45mins
2.
“React is a library for declaratively
building user interfaces using
JavaScript and (optionally) XML.
Maarten Mulders (@mthmulders)#reactin45mins
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)#reactin45mins
4.
M J S
Maarten Mulders (@mthmulders)#reactin45mins
6.
F
true
function isEven(number) {
return number % 2 == 0;
}
const text = isEven(42);
document.getElementById('app').innerText = text;
1
2
3
4
5
6
Maarten Mulders (@mthmulders)#reactin45mins
7.
A F
true
const isEven = (number) => {
return number % 2 == 0;
}
const isEven2 = (number) => number % 2 == 0
const text = isEven(42);
document.getElementById('app').innerText = text;
1
2
3
4
5
6
7
8
Maarten Mulders (@mthmulders)#reactin45mins
8.
O D
Jane Doe
const person = { name : 'Jane Doe', age: 42, occupancy: 'JavaScript dev' };
const { name, age } = person;
const text = name;
document.getElementById('app').innerText = text;
1
2
3
4
5
Maarten Mulders (@mthmulders)#reactin45mins
9.
A D
1
const numbers = [ 1, 2 ];
const [ first, second ] = numbers;
const text = first;
document.getElementById('app').innerText = text;
1
2
3
4
5
Maarten Mulders (@mthmulders)#reactin45mins
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)#reactin45mins
11.
S I
SEK 1500
class Amount {
constructor(currency, value) {
this.currency = currency;
this.value = value;
}
toString() {
return `this.currency{this.currency} {this.value}`;
}
}
const text = new Amount('SEK', 1500).toString();
document.getElementById('app').innerText = text;
1
2
3
4
5
6
7
8
9
10
11
12
13
Maarten Mulders (@mthmulders)#reactin45mins
12.
B JSX
Maarten Mulders (@mthmulders)#reactin45mins
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)#reactin45mins
14.
E
Elements can be regular DOM elements... (for now, but not for long)
Hej
const element = <div>Hej</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)#reactin45mins
15.
A
Elements can have attributes...
Hej
const element = <div id='example'>Hej</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)#reactin45mins
16.
... but they can have different names than HTML attributes:
Hej
const element = <div className='redtext'>Hej</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)#reactin45mins
17.
... and they can behave differently:
Hej
const style = { color: 'red', fontWeight: 'bold' };
const element = <div style={ style }>Hej</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
3
Maarten Mulders (@mthmulders)#reactin45mins
18.
S R N
Values must have a single root node
x
y
const element = <><div>x</div><div>y</div></>
ReactDOM.render(element, document.getElementById('app'));
1
2
3
Maarten Mulders (@mthmulders)#reactin45mins
19.
C
Function that takes props (think: arguments) and returns a React
element.
Hej Jfokus!
const Greeter = (props) => <div>Hej { props.name }!</div>
ReactDOM.render(<Greeter name='Jfokus' />, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)#reactin45mins
20.
C
Alternatively, using object decomposition:
Hej Jfokus!
const Greeter = ({ name }) => <div>Hej { name }!</div>
ReactDOM.render(<Greeter name='Jfokus' />, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)#reactin45mins
21.
A JSX
Maarten Mulders (@mthmulders)#reactin45mins
22.
E JSX
The answer to the ultimate question of life, universe and everything:
42
const answerToQuestionOfLife = 40 + 2;
const askQuestionOfLife = () => answerToQuestionOfLife;
const Example = () => <div>
<div>
The answer to the ultimate question of life,
universe and everything:
</div>
<div><strong>{ askQuestionOfLife() }</strong></div>
</div>;
ReactDOM.render(<Example />, document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
11
Maarten Mulders (@mthmulders)#reactin45mins
25.
R M
Maarten Mulders (@mthmulders)#reactin45mins
26.
A
So far, we've written components and wired them together.
Babel or tsc transpiles them to React.createElement(...)
invocations:
<Greeter name={ 'Jfokus' }
/** transpiles into
React.createElement(Greeter, { name: 'Jfokus' }, null)
Maarten Mulders (@mthmulders)#reactin45mins
27.
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)#reactin45mins
28.
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)#reactin45mins
29.
1 E
Hej, Jfokus
const SwedishGreeter = ({ name }) => <div>Hej, { name } </div>
const DutchGreeter = ({ name }) => <div>Hallo, { name } </div>;
const EnglishGreeter = ({ name }) => <div>Hello, { name } </div>;
const App = ({ lang, name }) => {
switch(lang) {
case 'se': return <SwedishGreeter name={ name } />
case 'nl': return <DutchGreeter name={ name } />
case 'en':
default : return <EnglishGreeter name={ name } />
}
};
ReactDOM.render(<App name='Jfokus' lang='se' />, document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Maarten Mulders (@mthmulders)#reactin45mins
33.
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)#reactin45mins
38.
2 A
My sweater had a lot of static electricity. The store gave me a new one,
free of charge.
const RandomJoke = () => {
const [ { joke, loading }, setState ] = React.useState({ loading: true });
const fetchRandomJoke = async () => {
// Does the actual API call to Oracle Cloud function,
// see code on previous slide.
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
15
16
17
18
Maarten Mulders (@mthmulders)#reactin45mins
39.
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)#reactin45mins
40.
D A
1. Debugging
2. Testing
3. Building
Maarten Mulders (@mthmulders)#reactin45mins
41.
D
Install the React Developer Tools for your browser of choice.
Maarten Mulders (@mthmulders)#reactin45mins
42.
I C T
Maarten Mulders (@mthmulders)#reactin45mins
44.
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)#reactin45mins
46.
T B C
import { shallow } from 'enzyme';
const dummy = create a mock/stub of some API using framework of choice
describe('<AwesomeButton ', () {
it('should invoke action on click', () {
const wrapper = mount(<AwesomeButton action={ dummy } );
wrapper.f nd('a').simulate('click');
expect(dummy).toHaveBeenCalled();
});
});
Maarten Mulders (@mthmulders)#reactin45mins
47.
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)#reactin45mins
48.
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)#reactin45mins
49.
G B
Maarten Mulders (@mthmulders)#reactin45mins
50.
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)#reactin45mins
52.
T
Use Create React App
Think in (small) components
Think declaratively
Please rate this talk using the Jfokus app!
U
Create React App:
Dad Jokes API:
https://bit.ly/c-r-a
https://bit.ly/dad-joke-api
Maarten Mulders (@mthmulders)#reactin45mins
0 likes
Be the first to like this
Views
Total views
305
On SlideShare
0
From Embeds
0
Number of Embeds
5
You have now unlocked unlimited access to 20M+ documents!
Unlimited Reading
Learn faster and smarter from top experts
Unlimited Downloading
Download to take your learnings offline and on the go
You also get free access to Scribd!
Instant access to millions of ebooks, audiobooks, magazines, podcasts and more.
Read and listen offline with any device.
Free access to premium services like Tuneln, Mubi and more.