This document outlines a Reactjs workshop covering an introduction to Reactjs, its core concepts, and coding with Reactjs. The workshop introduces Reactjs as a library for building user interfaces, discusses its core concepts including components, virtual DOM, JSX, state and props, and demonstrates how to install and start coding with Reactjs. The document provides resources for further learning Reactjs.

1. Reactjs
Workshop

2. Plan
◎ What is Reactjs ?
◎ Reactjs Core Concepts
◎ Let’s code
2

3. Hello!
I am Rebai Ahmed
Who AM I ?
➢ React Lover
➢ Someone try to learn new
thing every day
3

4. I’m web developer
I want to create
this web page :)

5. 5

6. How is that possible ?
6

7. 7

8. Solution ?
8

9. 9

10. 10
This is solution !!! ?

11. Issues !
11
➢ Search & modify elements
manually !
➢ Data synchronisation!

12. 1. Fb created
Reactjs
12

13. 1.
What is Reactjs ?
13

14. Short summary
➢ A Facebook & Instagram
collaboration.
➢ Initial release from 2013
➢ 114.894 Star in GitHub
14

15. A library for creating User
interfaces
15

16. React is not a Framework
16

17. Big Companies using
reactjs
17

18. 18
React vs Angular !

19. Why Reactjs ?
19

20. Core Problem !!!!!
20
Separation of Concerns :
➢ app/partials/button.html
➢ app/css/button.css
➢ app/js/directives/button.js

21. 21
➢ SEO Friendly - Components are client side as
well as server side render hence they are SEO
friendly and no 3 rd party plugin required
➢ Coding is simpler because of JSX
➢ Big minds are backing Reactjs

22. 22
➢ Virtual DOM - Reactjs use the concept of virtual
DOM which helps in the performance
➢ Unidirectional Data Flow - Compare to the 2 way
data binding. Reactjs use the concept of
Unidirectional data flow which improve the over
all performance.

23. Reactjs installation:
Include as a plain Javascript
23

24. Reactjs installation:
Use live sandboxes
24

25. Reactjs installation:
using npm
25

26. 2.
Reactjs core concepts
26

27. 27
JSX Components
Unidirectional
Data Flow
Virtual
DOM

28. React core concepts
:Component
28

29. React Components
Self-contained reusable building
blocks
of web application
29

30. React Components
( reusable )
➢ Pinterest open sourced its full React
component UI library
30

31. React Components
( reusable )
➢ Office UI Fabric
31

32. React Components LifeCycle !
32

33. React is
about
components
33

34. 34

41. How does
component
look like?

42. React core concepts :Virtual
DOM
42

43. 43
What is DOM ?

44. 44
React Virtual DOM ?
➢ Keep track of state in DOM is hard !
➢ It’ll be so easier to re-render the whole
DOM on every change
➢ Unfortunately the DOM API is not so fast.

45. 45
React
Re-render everything for
every update

46. 46
Seems Expensive ?

47. 47
React Virtual DOM ?

48. 48
React Virtual DOM ?
➢ Use different algorithm with the browser DOM tree to
identify the changes
➢ Instead of creating new object, Reactjs just identify what
change is took place and once identify update that state

49. 49
React Virtual DOM
Re-rendering process ?
➢ Build new virtual DOM subtree
➢ Diff with the old one
➢ Compute the minimal set of DOM
mutations
➢ Batch execute all update
DÉMO

50. React core concepts :JSX
50

51. 51
React JSX ?
➢ React components are written in JSX, a
JavaScript extension syntax allowing
easy quoting of HTML
and using HTML tag syntax to render
components
<div>
<h1> Shopping list for
{this.props.name} </h1>
<ul>
<li>Instagram </li>
<li>Whatsap </li>
<li>Oculus </li>
</ul>
</div>

52. 52
React JSX ?
<div>
<h1> Shopping list for
{this.props.name} </h1>
<ul>
<li>Instagram </li>
<li>Whatsap </li>
<li>Oculus </li>
</ul>
</div>

53. 53
React JSX expressions ?

54. 54
React JSX expressions ?

55. React core concepts :state &&
props !
55

56. React :Data Flow State && props
56

57. React :Data Flow State && props
57

58. React :Data Flow Children
58

59. ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW? modern syntax ,better suited for big
applications
59
➢ Variable types
➢ Arrow functions
➢ Modules
➢ Classes
➢ A lot more…
➢

60. ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW?
60
➢ Arrow functions

61. ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW?
61
➢ Template Literals (Strings)

62. ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW?
62
➢ Classes

63. ECMASCRIPT 6 / ECMASCRIPT 2015
WHAT’S NEW?
63
➢ Modules

64. 3.
Let’s start coding
64
HELP

65. Use React
65

66. Component
66

67. Render
67

68. State
68

69. FORMS
69

70. Thanks!
Any questions?
70
You can find me at:
➢ Rebaiahmed.github.io
➢ github.com/Rebaiahmed
➢ @RebaiAhmed_
➢ rebai.ahmed@outlook.com

71. Ressources
◎ https://devhints.io/react
◎ https://github.com/enaqx/awesome-react
◎ https://medium.freecodecamp.org/all-the-f
undamental-react-js-concepts-jammed-int
o-this-single-medium-article-c83f9b53eac2
◎ https://github.com/TunisiaJavascriptCom
munity/react-in-patterns
71