ES2015 and React
115
() => <React /> Stepan Parunashvili 1
-
Upload
stepan-parunashvili -
Category
Software
-
view
389 -
download
0
Transcript of ES2015 and React
() => <React />
Stepan Parunashvili
1
2
No more waiting
3
Babel $ npm install -g babel-cli
4
ES2015
5
Arrow Functions () =>
6
7
8
9
10
11
Classesclass Component {}
12
13
14
15
16
Modulesimport User from 'user'
17
18
19
Larger Standard LibraryMap, Set, WeakMap, Promise...
20
Smarter Object Expressions{users}
21
22
23
24
25
26
Destructuring in arguments({name, friends}) => console.log(name, friends)
27
28
29
30
31
Default Arguments(name = 'Bob') => console.log(name)
32
33
34
Template Strings`hello ${name}`
35
36
37
More destructuringvar [first, ...rest] = users
38
39
40
41
42
43
SplataddFriends(...friends)
44
45
46
47
48
49
Block scoping: let & constlet i = 0;
50
51
52
53
54
55
56
SymbolsIterators
Generators
57
Async / Await var users = await getUsers();
58
59
60
61
62
63
<React />
64
65
Declarative > Imperative{opened ? <FriendList /> : null}
66
67
68
69
70
71
72
incrementappend, decrement, replace
73
Now...
74
75
76
77
78
79
Instead...
80
(data) => markup
81
82
83
84
85
Composabilityfriends.map(friend => <Info friend={friend} />)
86
87
88
89
http://handlebarsjs.com/expressions.html
90
Separation of Concerns?
91
Coupling vs Cohesion
92
Cohesion<button onClick={this._handleClick}>Click me</button>
93
94
95
ui logic + markup are cohesive
96
97
Unit testing
98
Reusability
99
100
101
But, large apps are large
102
Keep components small
103
Keep state in a single place
104
Optimize last
105
Use Immutable Data Structures
106
107
108
109
110
111
112
There's more
113
flowredux
hot reloading
114
thank you :)
115
![[React Native Tutorial] Lecture 3: More on ES6/ES2015](https://static.fdocuments.net/doc/165x107/58728d3f1a28ab36118b57f1/react-native-tutorial-lecture-3-more-on-es6es2015.jpg)