Successfully reported this slideshow.
Your SlideShare is downloading. ×

React in 40 minutes (Voxxed Days Romania)

Ad

R 
 
40
M
Maarten
Mulders
(@mthmulders)
#reactin40mins

Ad

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

Ad

R 
 

No
two-way
data
binding
No
templating
language
Just
user
interface
(no
routing,
no
HTTP
client)
Plain
JavaScript
(or...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 52 Ad
1 of 52 Ad

React in 40 minutes (Voxxed Days Romania)

Download to read offline

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!

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!

More Related Content

More from Maarten Mulders (20)

React in 40 minutes (Voxxed Days Romania)

  1. 1. R 
 
40
M Maarten
Mulders
(@mthmulders) #reactin40mins
  2. 2. “React
is
a
library
for
declaratively building
user
interfaces
using JavaScript
and
(optionally)
XML. Maarten
Mulders
(@mthmulders) #reactin40mins
  3. 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. 4. M 
J S Maarten
Mulders
(@mthmulders) #reactin40mins
  5. 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. 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. 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. 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. 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. 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. 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. 12. B 
JSX Maarten
Mulders
(@mthmulders) #reactin40mins
  13. 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. 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. 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. 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. 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. 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. 19. A 
JSX Maarten
Mulders
(@mthmulders) #reactin40mins
  20. 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. 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. 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. 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. 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. 25. R 
 M Maarten
Mulders
(@mthmulders) #reactin40mins
  26. 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. 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. 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. 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. 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. 31. Y 
E 1.
Keeping
state 2.
Reacting
to
events 3.
Fetching
data
over
HTTP 4.
Storing
data Maarten
Mulders
(@mthmulders) #reactin40mins
  32. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 43. D 
A 1.
Debugging 2.
Testing 3.
Building Maarten
Mulders
(@mthmulders) #reactin40mins
  44. 44. D Install
the
React
Developer
Tools
for
your
browser
of
choice. Maarten
Mulders
(@mthmulders) #reactin40mins
  45. 45. I 
C 
T Maarten
Mulders
(@mthmulders) #reactin40mins
  46. 46. D Maarten
Mulders
(@mthmulders) #reactin40mins
  47. 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. 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. 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. 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. 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. 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

×