1. R 40 M
Maarten Mulders (@mthmulders)
#reactin40mins

2. “React is a library for declaratively
building user interfaces using
JavaScript and (optionally) XML.
Maarten Mulders (@mthmulders)
#reactin40mins

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)
#reactin40mins

4. M J S
Maarten Mulders (@mthmulders)
#reactin40mins

5. C
EUR
class Amount {
constructor(currency, value) {
this.currency = currency;
this.value = value;
}
getCurrency() {
return this.currency;
}
}
const text = new Amount('EUR', 15).getCurrency();
document.getElementById('app').innerText = text;
1
2
3
4
5
6
7
8
9
10
11
12
13
Maarten Mulders (@mthmulders)
#reactin40mins

6. F
false
function isEven(number) {
return number % 2 == 0;
}
const text = isEven(3);
document.getElementById('app').innerText = text;
1
2
3
4
5
6
Maarten Mulders (@mthmulders)
#reactin40mins

7. A F
false
const isEven = (number) => {
return number % 2 == 0;
}
const text = isEven(3);
document.getElementById('app').innerText = text;
1
2
3
4
5
6
Maarten Mulders (@mthmulders)
#reactin40mins

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)
#reactin40mins

9. A D
two
const numbers = [ 'one', 'two', 'three' ];
const [ first, second ] = numbers;
const text = second;
document.getElementById('app').innerText = text;
1
2
3
4
5
Maarten Mulders (@mthmulders)
#reactin40mins

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)
#reactin40mins

11. S I
EUR 150
class Amount {
constructor(currency, value) {
this.currency = currency;
this.value = value;
}
toString() {
return `this.currency{this.currency} {this.value}`;
}
}
const text = new Amount('EUR', 150).toString();
document.getElementById('app').innerText = text;
1
2
3
4
5
6
7
8
9
10
11
12
13
Maarten Mulders (@mthmulders)
#reactin40mins

12. B JSX
Maarten Mulders (@mthmulders)
#reactin40mins

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
But it has its limitations
Needs to be transpiled to JavaScript
e.g. React.createElement(...)
Maarten Mulders (@mthmulders)
#reactin40mins

14. E
Elements can be regular DOM elements... (for now, but not for long)
Hello, Romania
const element = <div>Hello, Romania</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)
#reactin40mins

15. A
Elements can have attributes, but they can have different
names than HTML attributes:
Red
const element = <div className='red­text'>Red</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)
#reactin40mins

16. ... and they can behave differently:
Red and bold
const style = { color: 'red', fontWeight: 'bold' };
const element = <div style={ style }>Red and bold</div>
ReactDOM.render(element, document.getElementById('app'));
1
2
3
Maarten Mulders (@mthmulders)
#reactin40mins

17. 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)
#reactin40mins

18. C
Function that returns a React element.
Hello, world!
const Greeter = (props) => <div>Hello, world!</div>
ReactDOM.render(<Greeter />, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)
#reactin40mins

19. A JSX
Maarten Mulders (@mthmulders)
#reactin40mins

20. E JSX
The answer to the ultimate question of life, universe and
everything: 42
const answerToQuestionOfLife = 40 + 2;
const askQuestionOfLife = () => answerToQuestionOfLife;
const Example = () => <div>
The answer to the ultimate question of life,
universe and everything:
&nbsp;
<strong>{ askQuestionOfLife() }</strong>
</div>;
ReactDOM.render(<Example />, document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
Maarten Mulders (@mthmulders)
#reactin40mins

21. O /
Hello Romania!
const Greeter = (props) => <div>Hello { props.name }!</div>
ReactDOM.render(<Greeter name='Romania' />, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)
#reactin40mins

22. O /
Alternatively, using object decomposition:
Hello Romania!
const Greeter = ({ name }) => <div>Hello { name }!</div>
ReactDOM.render(<Greeter name='Romania' />, document.getElementById('app'));
1
2
Maarten Mulders (@mthmulders)
#reactin40mins

23. C JSX
Clapping hands...
const ClapHands = () => <span>Clapping hands...</span>;
const DryTears = () => <span>Drying tears...</span>;
const ShowEmotion = ({ happy }) => happy ? <ClapHands /> : <DryTears />;
ReactDOM.render(<ShowEmotion happy={ true } />,
document.getElementById('app'));
1
2
3
4
5
6
7
Maarten Mulders (@mthmulders)
#reactin40mins

24. C JSX (2)
HEIA
PHIA
const Ticker = ({ symbol }) => <div>{ symbol }</div>;
const TickerList = ({ symbols }) => symbols.map(
(symbol) => <Ticker symbol={ symbol } />
);
const symbols = ['HEIA', 'PHIA'];
ReactDOM.render(<TickerList symbols={ symbols } />,
document.getElementById('app'));
1
2
3
4
5
6
7
8
9
Maarten Mulders (@mthmulders)
#reactin40mins

25. R M
Maarten Mulders (@mthmulders)
#reactin40mins

26. A
So far, we've written components and wired them together.
Babel or tsc transpiles them to React.createElement(...)
invocations:
<Greeter name={ 'World' }
/** transpiles into
React.createElement(Greeter, { name: 'World' }, null)
Maarten Mulders (@mthmulders)
#reactin40mins

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)
#reactin40mins

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. This
tells React what makes two elements "the same".
Maarten Mulders (@mthmulders)
#reactin40mins

29. 1 E
Hei, Romania!
const DutchGreeter = ({ name }) => <div> Hallo, { name }!</div>;
const EnglishGreeter = ({ name }) => <div> Hello, { name }!</div>;
const RomanianGreeter = ({ name }) => <div> Hei, { name }!</div>;
const App = ({ lang, name }) => {
switch(lang) {
case 'ro': return <RomanianGreeter name={ name } />
case 'nl': return <DutchGreeter name={ name } />
case 'en':
default : return <EnglishGreeter name={ name } />
}
};
ReactDOM.render(<App name='Romania' lang='ro' />,
document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
11
12
13
Maarten Mulders (@mthmulders)
#reactin40mins

30. 2 T KEY
const randomPrice = () => 100 + Math.floor(Math.random() * 900)
const Ticker = ({ symbol }) => <span>{ symbol }: { randomPrice() } &mdash; </spa
const symbols = ['HEIA', 'PHIA', 'ASML', 'KLMR'].map(
(symbol) => <Ticker key={ key } symbol={ symbol } />
);
ReactDOM.render(<Shuffle children={ symbols } />,
document.getElementById('app'));
1
2
3
4
5
6
7
8
9
Maarten Mulders (@mthmulders)
#reactin40mins

31. Y E
1. Keeping state
2. Reacting to events
3. Fetching data over HTTP
4. Storing data
Maarten Mulders (@mthmulders)
#reactin40mins

32. L S C
Counter: 0
const Counter = () => {
const [ counter, setCounter ] = React.useState(0);
return <div>Counter: { counter }</div>
}
ReactDOM.render(<Counter />, document.getElementById('app'));
1
2
3
4
5
6
7
Maarten Mulders (@mthmulders)
#reactin40mins

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)
#reactin40mins

34. C C
Counter: 0
+ ‑
const Counter = () => {
const [ counter, setCounter ] = React.useState(0);
const increase = () => setCounter();
const decrease = () => setCounter();
return <div>Counter: { counter }<br />
<button onClick={ increase }> + </button> &nbsp;
<button onClick={ decrease }> ­ </button>
</div>
}
ReactDOM.render(<Counter />, document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
11
12
Maarten Mulders (@mthmulders)
#reactin40mins

35. C C
Greet!
const Greeter = () => {
const [ name, setName ] = React.useState('');
const updateName = (e) => setName(e.target.value);
const callback = () => alert(``);
return <div><input type='text' onChange={ updateName } ></input><br />
<button onClick={ callback }>Greet { name }!</button></div>
}
ReactDOM.render(<Greeter />, document.getElementById('app'));
1
2
3
4
5
6
7
8
9
10
Maarten Mulders (@mthmulders)
#reactin40mins

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

37. 1 A API
const url = 'https: hqd7fvgovgs2jyoosjgryaylcy.apigateway.eu frankfurt-1.oci
.customer oci.com/v1/joke';
const getJoke = () {
return fetch(url);
};
Maarten Mulders (@mthmulders)
#reactin40mins

38. 1 A API
const checkStatus = (response) {
if (response.status 200 response.status < 300) {
return Promise.resolve(response);
} else {
return Promise.reject(`HTTP ${response.status}: ${response.statusText}`);
}
};
const url = 'https: hqd7fvgovgs2jyoosjgryaylcy.apigateway.eu frankfurt-1.oci
.customer oci.com/v1/joke';
const getJoke = () {
return fetch(url)
.then(checkStatus);
};
Maarten Mulders (@mthmulders)
#reactin40mins

39. 1 A API
const checkStatus = (response) {
if (response.status 200 response.status < 300) {
return Promise.resolve(response);
} else {
return Promise.reject(`HTTP ${response.status}: ${response.statusText}`);
}
};
const parseJson = (response) response.json();
const url = 'https: hqd7fvgovgs2jyoosjgryaylcy.apigateway.eu frankfurt-1.oci
.customer oci.com/v1/joke';
const getJoke = () {
return fetch(url)
.then(checkStatus)
.then(parseJson);
};
Maarten Mulders (@mthmulders)
#reactin40mins

40. 1 A API
const checkStatus = (response) {
if (response.status 200 response.status < 300) {
return Promise.resolve(response);
} else {
return Promise.reject(`HTTP ${response.status}: ${response.statusText}`);
}
};
const parseJson = (response) response.json();
const url = 'https: hqd7fvgovgs2jyoosjgryaylcy.apigateway.eu frankfurt-1.oci
.customer oci.com/v1/joke';
const getJoke = () {
return fetch(url)
.then(checkStatus)
.then(parseJson)
.then(response response.joke);
};
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

43. D A
1. Debugging
2. Testing
3. Building
Maarten Mulders (@mthmulders)
#reactin40mins

44. D
Install the React Developer Tools for your browser of choice.
Maarten Mulders (@mthmulders)
#reactin40mins

45. I C T
Maarten Mulders (@mthmulders)
#reactin40mins

46. D
Maarten Mulders (@mthmulders)
#reactin40mins

47. T
Use Jest (test platform & library) and (React) Testing Library
(testing utilities)
Render a React component in a unit test
Make assertions about its output and behaviour
Maarten Mulders (@mthmulders)
#reactin40mins

48. T C
import { render, screen } from '@testing library/react'
describe('<Greeter ', () {
it('should render text', () {
render(<Greeter name='Romania' );
expect(screen.getByText(/hello, Romania/i)).toBeVisible();
});
});
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

51. 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)
#reactin40mins

52. T
Use Create React App
Think in (small) components
Think declaratively
U
Create React App:
Dad Jokes API:
Philippe De Ryck on "Building Secure React Applications":
https://bit.ly/c-r-a
https://bit.ly/dad-joke-api
http://bit.ly/secure-react
Maarten Mulders (@mthmulders)
#reactin40mins