Prezentacja pokazana na warsztatach DreamLab Academy #12 w Krakowie. Na spotkaniu staraliśmy się wprowadzić uczestników w świat Reacta. Opowiedzieliśmy o możliwościach jakie daje nam to narzędzie i wspólnie stworzymy prostą aplikację internetową. DreamLab Academy to otwarte i darmowe warsztaty z programowania gdzie specjaliści z DreamLabu dzielą się tym co potrafią.

1. Wprowadzenie
do ReactJS
DreamLab Academy // Kamil Wojtanowski, Marek Mitis

2. 2

3. First Application
3
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);

4. First Application
4
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);

5. First Application
5
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);

6. Base Application
6
Controllers
Services
Templates
Models

7. Base Application
7
Controllers
Services
Templates
Models
Components

8. Sample Application
8

9. Sample Application
9

10. Sample Application
10

11. First Application
11
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
);
ReactDOM is the glue
between React and the DOM

12. Example component
12
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;

13. Example component
13
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;

14. Example component
14
import React from 'react';
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
export default TodoApp;
import React from 'react';
export class TodoApp extends React.Component {
render() {
return (
<h1>Learn React</h1>
);
}
}
export default TodoApp;

15. 15
Hooks

16. 16
Dummy/not dummy

17. 17
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
XML?

18. 18
JSX

19. 19
export function TodoApp() {
return (
<h1>Learn React</h1>
);
}
function TodoApp() {
return React.createElement(
"h1",
null,
"Learn React"
);
}
Compilation

20. Props
20
function TodoApp({task}) {
return (
<h1>{task}</h1>
);
}
<TodoApp task={"Learn React"}/>

21. Props
21
function TodoApp({task}) {
return (
<h1>{task}</h1>
);
}
<TodoApp task={"Learn React"}/>

22. class TodoApp extends React.Component {
render() {
return (
<h1>{this.props.task}</h1>
);
}
}
Props
22

23. class TodoApp extends React.Component {
render() {
this.props.task = 'New task';
return (
<h1>{this.props.task}</h1>
);
}
}
Props are immutable
23

24. class TodoApp extends React.Component {
render() {
this.props.task = 'New task';
return (
<h1>{this.props.task}</h1>
);
}
}
Props are immutable
24

25. class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
task: 'Learn React'
}
}
render() {
return (
<h1>{this.state.task}</h1>
);
}
}
State
25

26. State
26
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
task: 'Learn React'
}
}
render() {
return (
<h1>{this.state.task}</h1>
);
}
}

27. addNewTask() {
this.setState({
task: 'My new task’
});
}
State is mutable
27

28. 28
ContextAPI

29. addTask(e) {
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}
Events
29

30. addTask(e) {
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}
Events
30

31. addTask(e) {
...
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}
Events
31

32. addTask(e) {
e.preventDefault();
}
render() {
return (
<form onSubmit={this.addTask}>
...
</form>
);
}
Events
32

33. Child components
33
import TodoList from './TodoList';
export class TodoApp extends React.Component {
render() {
return (
<div>
...
<TodoList items={this.state.items} />
</div>
);
}}

34. Child components
34
import TodoList from './TodoList';
export class TodoApp extends React.Component {
render() {
return (
<div>
...
<TodoList items={this.state.items} />
</div>
);
}}

35. Render multiple components
35
render() {
return (
<ul>
{this.props.items.map((item) => {
return (
<li key={item.id}>{item.text}</li>
)
})}
</ul>
)
}

36. 36
{children}

37. Render multiple components
37
render() {
return (
<ul>
{this.props.items.map((item) => {
return (
<li key={item.id}>{item.text}</li>
)
})}
</ul>
)
}

38. import React, {PropTypes} from 'react';
export class TodoList extends React.Component {
...
}
TodoList.propTypes = {
items: PropTypes.arrayOf(PropTypes.string)
};
Typechecking with PropTypes
38

39. import React from 'react';
export class TodoList extends React.Component {
...
}
TodoList.propTypes = {
items: PropTypes.arrayOf(PropTypes.string)
};
Typechecking with PropTypes
39

40. Component Lifecycle
40
constructor()
getDerivedStateFromProps()
render()
componentDidMount()
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
componentWillUnmount()
componentDidCatch()

41. Component Lifecycle
41
constructor()
getDerivedStateFromProps()
render()
componentDidMount()
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
componentWillUnmount()
componentDidCatch()

42. 42
Wady?

43. 43
Inny framework?

44. 44
Społeczność?

45. 45
Społeczność

46. 46
Podsumowanie

47. 47
Components

48. 48
JSX

49. 49
r
State/Props

50. 50
Events

51. 51
Lifecycle

52. DreamLab – hub technologiczny Ringier Axel Springer
Warsztaty

53. 53
http://tiny.cc/kadq4y

54. DreamLab – hub technologiczny Ringier Axel Springer
Quiz

55. 55
Ile gwiazdek na platformie GitHub posiada
rezpozytorium React?
A) 126k
B) 86k
C) 111k
D) 67k

56. 56
Ile gwiazdek na platformie GitHub posiada
rezpozytorium React?
A) 126k
B) 86k
C) 111k
D) 67k

57. 57
Jaka metoda nie występuje w cyklu życia komponentu
React?
A) componentDidMount
B) componentUpdate
C) componentWillUnmount
D) shouldComponentUpdate

58. 58
Jaka metoda nie występuje w cyklu życia komponentu
React?
A) componentDidMount
B) componentUpdate
C) componentWillUnmount
D) shouldComponentUpdate

59. 59
Za pomocą jakiego stałego props’a wyświetlić
elementy owrapowane przez komponent?
A) slots
B) notes
C) children
D) content

60. 60
Za pomocą jakiego stałego props’a wyświetlić
elementy owrapowane przez komponent?
A) slots
B) notes
C) children
D) content

61. 61
Jakie rozwiązanie stanowi o wysokiej wydajności
React’a?
A) NativeDOM
B) DOM
C) VirtualDOM
D) ShadowDOM

62. 62
Jakie rozwiązanie stanowi o wysokiej wydajności
React’a?
A) NativeDOM
B) DOM
C) VirtualDOM
D) ShadowDOM

63. 63
Jaki atrybut pozwala na optymalizacje renderowania
w momencie wyświetlania danych tablicowych?
A) id
B) key
C) order
D) unique

64. 64
Jaki atrybut pozwala na optymalizacje renderowania
w momencie wyświetlania danych tablicowych?
A) id
B) key
C) order
D) unique

65. 65
Jakie działania nie powodują przerenderowanie
elementu?
A) Zmiana zewnętrznych propsów
B) Metoda forceUpdate
C) Metoda applyRender
D) Metoda setState

66. 66
Jakie działania nie powodują przerenderowanie
elementu?
A) Zmiana zewnętrznych propsów
B) Metoda forceUpdate
C) Metoda applyRender
D) Metoda setState

67. 67
Na jakie wywołanie w React transpilowany jest
pojedynczy znacznik z JSX?
A) React.createNode
B) React.createElement
C) new React.Element
D) new React.Node

68. 68
Na jakie wywołanie w React transpilowany jest
pojedynczy znacznik z JSX?
A) React.createNode
B) React.createElement
C) new React.Element
D) new React.Node