1. React is a JavaScript library that uses components to build user interfaces by rendering data to the DOM. 2. Components are plain JavaScript functions that receive data as attributes and return markup using JSX. 3. React handles updating the UI automatically when the underlying data changes, solving issues with manually updating the DOM.

1. Introduction to
ReactJS
&
fundamentals

4. How is that
possible?

5. Issue:
web page is
static

7. Solution:
Use browser
API & JS

13. Problem
solved?
Not yet

14. Issues

15. Issues
1. Search & modify elements
manually

16. Issues
1. Search & modify elements
manually
2. Data synchronisation!

17. FB created
ReactJS

18. What is ReactJS?

19. What is ReactJS?
1. Javascript library

20. What is ReactJS?
1. Javascript library
2. Solves one problem

21. What is ReactJS?
1. Javascript library
3. Has a cool name
2. Solves one problem

22. Data Sync
var brentOil = {
"23-07-2018": 72.9, "24-07-2018": 71.2,
"25-07-2018": 72.5, "26-07-2018": 73.7,
}

23. var brentOil = {
"23-07-2018": 72.9, "24-07-2018": 71.2,
"25-07-2018": 72.5, "26-07-2018": 73.7,
}
Data Sync

24. var brentOil = {
"23-07-2018": 72.9, "24-07-2018": 71.2,
"25-07-2018": 72.5, "26-07-2018": 73.7,
}
$USD € EUR
Data Sync

25. var brentOil = {
"23-07-2018": 72.9, "24-07-2018": 71.2,
"25-07-2018": 72.5, "26-07-2018": 73.7,
}
$USD € EUR
Data Sync

26. var brentOil = {
"23-07-2018": 72.9, "24-07-2018": 71.2,
"25-07-2018": 72.5, "26-07-2018": 73.7,
}
$USD € EUR
Data Sync
React help needed!

27. var brentOil = {
"23-07-2018": 72.9, "24-07-2018": 71.2,
"25-07-2018": 72.5, "26-07-2018": 73.7,
}
$USD € EUR
Data Sync
1. Gets signal to
modify data
React does:

28. var brentOil = {
"23-07-2018": 72.9, "24-07-2018": 71.2,
"25-07-2018": 72.5, "26-07-2018": 73.7,
}
$USD € EUR
Data Sync
1. Gets signal to
modify data
2. Changes UI
automatically!
React does:

29. var brentOil = {
"23-07-2018": 72.9, "24-07-2018": 71.2,
"25-07-2018": 72.5, "26-07-2018": 73.7,
}
$USD € EUR
Data Sync
1. Gets signal to
modify data
2. Changes UI
automatically!
React does:

30. Getting started
with
ReactJS

31. Installation

32. Installation
Include as a plain Javascript

33. Installation
Include as a plain Javascript
Use live sandboxes

34. Installation
Include as a plain Javascript
Use live sandboxes
using npm

36. 1. React is
about
components

44. How does
component
look like?

47. JSX

48. 1. It is a plain function

49. 2. Component name
starts with capital letter
1. It is a plain function

50. 2. Component name
starts with capital letter
1. It is a plain function
3. Component receives
list of attributes

51. 2. What is
JSX

52. Using JSX
Plain Javascript

53. Using JSX
Plain Javascript

54. Using JSX
Plain Javascript
document.createElement

55. Using JSX
Plain Javascript

56. Using JSX
Plain Javascript

57. Using JSX
Plain Javascript

58. 3. Using JS
expressions in
JSX

66. 3.1. Why use
classes?

67. Component as Class
Own state (data)

68. Component as Class
Own state (data)
e.g. fetched list of users
stored in “state” of component

69. Component as Class
Own state (data)
e.g. fetched list of users
stored in “state” of component
Lifecycle methods

70. 4. Events

72. camelCase

73. Passing as a reference

74. Supports native methods

75. 5. Private state
(data)

77. Initial state

81. Cons
You do not get:
Own event system
AJAX
Model layer
State management (pr. v16)

82. Who uses?

83. Thanks a lot!