Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React in 50 Minutes (OpenValue)

93 views

Published on

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!

Published in: Software
  • Be the first to comment

  • Be the first to like this

React in 50 Minutes (OpenValue)

  1. 1. R 
 
50
M Maarten
Mulders
(@mthmulders)#reactin50mins
  2. 2. “React
is
a
library
for
declaratively building
user
interfaces
using JavaScript
and
(optionally)
XML. Maarten
Mulders
(@mthmulders)#reactin50mins
  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)#reactin50mins
  4. 4. M 
J S Maarten
Mulders
(@mthmulders)#reactin50mins
  5. 5. C class
Amount
{ 



constructor(currency,
value)
{ 







this.currency
=
currency; 







this.value
=
value; 



} 



getCurrency()
{ 







return
this.currency; 



} } const
text
=
''; document.getElementById('app').innerText
=
text; 1 2 3 4 5 6 7 8 9 10 11 12 13 Maarten
Mulders
(@mthmulders)#reactin50mins
  6. 6. F function
isEven(number)
{ 


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


return
number
%
2
==
0; } const
text
=
'' document.getElementById('app').innerText
=
text; 1 2 3 4 5 6 Maarten
Mulders
(@mthmulders)#reactin50mins
  8. 8. O 
D const
person
=
{
name
:
'Jane
Doe',
age:
42,
occupancy:
'JavaScript
dev'
}; const
{
name,
age
}
=
person; const
text
=
''; document.getElementById('app').innerText
=
text; 1 2 3 4 5 Maarten
Mulders
(@mthmulders)#reactin50mins
  9. 9. A 
D const
numbers
=
[
'one',
'two',
'three'
]; const
[
first,
second
]
=
numbers; const
text
=
''; document.getElementById('app').innerText
=
text; 1 2 3 4 5 Maarten
Mulders
(@mthmulders)#reactin50mins
  10. 10. O 
S 
N const
name
=
'Jane
Doe'; const
age
=
42; const
person
=
{
name,
age
}; const
text
=
''; document.getElementById('app').innerText
=
text; 1 2 3 4 5 6 Maarten
Mulders
(@mthmulders)#reactin50mins
  11. 11. S 
I class
Amount
{ 



constructor(currency,
value)
{ 







this.currency
=
currency; 







this.value
=
value; 



} 



toString()
{ 







return
``; 



} } const
text
=
new
Amount('USD',
150).toString(); document.getElementById('app').innerText
=
text; 1 2 3 4 5 6 7 8 9 10 11 12 13 Maarten
Mulders
(@mthmulders)#reactin50mins
  12. 12. B 
JSX Maarten
Mulders
(@mthmulders)#reactin50mins
  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 Needs
to
be
transpiled
to
JavaScript e.g.
React.createElement(...) Maarten
Mulders
(@mthmulders)#reactin50mins
  14. 14. E Elements
can
be
regular
DOM
elements...
(for
now,
but
not
for
long) const
element
=
<div></div> ReactDOM.render(element,
document.getElementById('app')); 1 2 Maarten
Mulders
(@mthmulders)#reactin50mins
  15. 15. A Elements
can
have
attributes... const
element
=
<div
id='example'></div> ReactDOM.render(element,
document.getElementById('app')); 1 2 Maarten
Mulders
(@mthmulders)#reactin50mins
  16. 16. ...
but
they
can
have
different
names
than
HTML
attributes: const
element
=
<div
className='red­text'></div> ReactDOM.render(element,
document.getElementById('app')); 1 2 Maarten
Mulders
(@mthmulders)#reactin50mins
  17. 17. ...
and
they
can
behave
differently: const
style
=
{
color:
'red',
fontWeight:
'bold'
}; const
element
=
<div
style={
style
}></div> ReactDOM.render(element,
document.getElementById('app')); 1 2 3 Maarten
Mulders
(@mthmulders)#reactin50mins
  18. 18. S 
R 
N Values
must
have
a
single
root
node
(or
an
array) const
element
=
<div>x</div><div>y</div> ReactDOM.render(element,
document.getElementById('app')); unknown:
Adjacent
JSX
elements
must
be
wrapped
in
an
enclosing
tag.
Did
you
want
a
JSX
fragment
<> 
 >
1
|
const
element
=
<div>x</div><div>y</div>
 



|




























^
 

2
|
ReactDOM.render(element,
document.getElementById('app'));
 

3
|
 1 2 3 Maarten
Mulders
(@mthmulders)#reactin50mins
  19. 19. C Function
that
takes
props
(think:
arguments)
and
returns
a React
element. Hello,
OpenValue! const
Greeter
=
(props)
=>
<div>Hello,
OpenValue!</div> ReactDOM.render(<Greeter
/>,
document.getElementById('app')); 1 2 Maarten
Mulders
(@mthmulders)#reactin50mins
  20. 20. A 
JSX Maarten
Mulders
(@mthmulders)#reactin50mins
  21. 21. E 
 
JSX The
answer
to
the
ultimate
question
of
life,
universe
and everything:
  const
answerToQuestionOfLife
=
40
+
2; const
askQuestionOfLife
=
()
=>
answerToQuestionOfLife; const
Example
=
()
=>
<div> 



The
answer
to
the
ultimate
question
of
life, 



universe
and
everything: 



&nbsp; 



<strong>{

}</strong> </div>; ReactDOM.render(<Example
/>,
document.getElementById('app')); 1 2 3 4 5 6 7 8 9 10 Maarten
Mulders
(@mthmulders)#reactin50mins
  22. 22. O 
 
 
 
/
 Hello
! const
Greeter
=
(props)
=>
<div>Hello
{
}!</div> ReactDOM.render(<Greeter
name='OpenValue'
/>,
document.getElementById('app')); 1 2 Maarten
Mulders
(@mthmulders)#reactin50mins
  23. 23. O 
 
 
 
/
 Alternatively,
using
object
decomposition: Hello
! const
Greeter
=
({
name
})
=>
<div>Hello
{
}!</div> ReactDOM.render(<Greeter
name='OpenValue'
/>,
document.getElementById('app')); 1 2 Maarten
Mulders
(@mthmulders)#reactin50mins
  24. 24. 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)#reactin50mins
  25. 25. 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)#reactin50mins
  26. 26. R 
 M Maarten
Mulders
(@mthmulders)#reactin50mins
  27. 27. A 
 
 So
far,
we've
written
components
and
wired
them
together. Babel
or
tsc
transpiles
them
to
React.createElement(...) invocations: <Greeter
name={
'OpenValue'
}
 
 
 /**
transpiles
into
 
 
 React.createElement(Greeter,
{
name:
'OpenValue'
},
null)
 Maarten
Mulders
(@mthmulders)#reactin50mins
  28. 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. 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. 30. 1 
E 
 
 
 
Hallo,
OpenValue! 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='OpenValue'
lang='nl'
/>, 

document.getElementById('app')); 1 2 3 4 5 6 7 8 9 10 11 12 13 Maarten
Mulders
(@mthmulders)#reactin50mins
  31. 31. 2 
T 
KEY
 HEIA PHIA const
Ticker
=
({
symbol
})
=>
<div>{
symbol
}</div>; const
TickerList
=
({
symbols
})
=>
symbols.map( 
(symbol)
=>
<Ticker
key={
symbol
}
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)#reactin50mins
  32. 32. Y 
E 1.
Keeping
state 2.
Reacting
to
events 3.
Fetching
data
over
HTTP 4.
Storing
data Maarten
Mulders
(@mthmulders)#reactin50mins
  33. 33. 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)#reactin50mins
  34. 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
  35. 35. 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)#reactin50mins
  36. 36. 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)#reactin50mins
  37. 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
  38. 38. 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)#reactin50mins
  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
url
=
'https: hqd7fvgovgs2jyoosjgryaylcy.apigateway.eu frankfurt-1.oci
 












.customer oci.com/v1/joke';
 const
getJoke
=
()
 
{
 



return
fetch(url)
 















.then(checkStatus);
 
 
 };
 Maarten
Mulders
(@mthmulders)#reactin50mins
  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);
 
 };
 Maarten
Mulders
(@mthmulders)#reactin50mins
  41. 41. 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)#reactin50mins
  42. 42. 2 
A
 
 
 
 
 
 Loading... 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(); 







//
? 



} 



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
  43. 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
  44. 44. D 
A 1.
Debugging 2.
Testing 3.
Building Maarten
Mulders
(@mthmulders)#reactin50mins
  45. 45. D Install
the
React
Developer
Tools
for
your
browser
of
choice. Maarten
Mulders
(@mthmulders)#reactin50mins
  46. 46. I 
C 
T Maarten
Mulders
(@mthmulders)#reactin50mins
  47. 47. D Maarten
Mulders
(@mthmulders)#reactin50mins
  48. 48. 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
  49. 49. T 
 
 
C import
{
shallow
}
from
'enzyme';
 
 describe('<Greeter
 ',
()
 
{
 



it('should
render
text',
()
 
{
 







const
wrapper
=
shallow(<Greeter
name='DevNexus'
 );
 







expect(wrapper.text()).toBe('Hello
DevNexus');
 



});
 });
 Maarten
Mulders
(@mthmulders)#reactin50mins
  50. 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. 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
  52. 52. 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
  53. 53. G 
B Maarten
Mulders
(@mthmulders)#reactin50mins
  54. 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
  55. 55. C 
H I
tried
to
organize
a
Hide
and
Seek
tournament,
but
I eventually
gave
up.
Good
players
are
hard
to
find. 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
  56. 56. 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

×