ES2015 & React

Talk on ES2015, and react at futureadvisor

Transcript

1. () => <React /> Stepan Parunashvili 1
3. No more waiting 3
4. Babel $ npm install -g babel-cli 4
5. ES2015 5
6. Arrow Functions () => 6
12. Classes class Component {} 12
17. Modules import User from 'user' 17
20. Larger Standard Library Map, Set, WeakMap, Promise... 20
21. Smarter Object Expressions {users} 21
27. Destructuring in arguments ({name, friends}) => console.log(name, friends) 27
32. Default Arguments (name = 'Bob') => console.log(name) 32
35. Template Strings `hello ${name}` 35
38. More destructuring var [first, ...rest] = users 38
44. Splat addFriends(...friends) 44
50. Block scoping: let & const let i = 0; 50
57. Symbols Iterators Generators 57
58. Async / Await var users = await getUsers(); 58
64. <React /> 64
66. Declarative > Imperative {opened ? <FriendList /> : null} 66
73. increment append, decrement, replace 73
74. Now... 74
80. Instead... 80
81. (data) => markup 81
86. Composability friends.map(friend => <Info friend={friend} />) 86
89. 89 http://handlebarsjs.com/expressions.html
91. Separation of Concerns? 91
92. Coupling vs Cohesion 92
93. Cohesion <button onClick={this._handleClick}>Click me</button> 93
96. ui logic + markup are cohesive 96
98. Unit testing 98
99. Reusability 99
102. But, large apps are large 102
103. Keep components small 103
104. Keep state in a single place 104
105. Optimize last 105
106. Use Immutable Data Structures 106
113. There's more 113
114. flow redux hot reloading 114
115. thank you :) 115