ReactJS - obalając mity


https://twitter.com/btmpl/
https://medium.com/@baphemot/

Bartosz Szczeciński
JS Fatigue

JS Fatigue
https://javascript-game.firebaseapp.com/

JS Fatigue

Czym (nie) jest ReactJS?
React NIE JEST frameworkiem
React NIE JEST aplikacją "serwerem"
React JEST biblioteką UI
React JEST punktem startu

Co React nam daje?
System zarządzania warstwą UI
(JSX, VDOM, kompozycja)
Zarządzanie danymi (stan komponentu)
Funkcje lifecycle
Ujednolicony system eventów

Swobodę doboru rozwiązań
React Native, React Native XP, React VR
Czego React wymaga?
Znajomości JS
(mutacje, scope, binding, event bubbling)
Autonomii w podejmowaniu decyzji
Trzymania się raz podjętych decyzji
(nie chodzimy na skróty "ten jeden raz")

Zaakceptowania pewnych decyzji
i nie walczenia z nimi - one direction data flow
React jest zły bo ...


"To tylko kolejny framework", "React, Preact, Phoenix, Inferno..."
React jest zły bo ...

"Breaking changes co 6 miesięcy", "Skok z 0.14 do 15.0"

"Kolejne API do nauczenia się"
"Restrykcyjna licencja"

React jest zły bo ...

"Chcesz włożyć swój HTML GDZIE?!"

React jest zły bo ...

JSX "Muszę?"

React jest zły bo ...

"OK, ale ... CSS w JS?"



React jest zły bo ...

"Potrzebuje 500 zależności
i 150MB w node_modules"



React jest zły bo ...

"Ale milion paczek?"

"ReactJS wymaga Webpacka, Reduxa, hot module reloads, redux-saga, action creatorów, Babel, npm, css-modules, dekoratorów, biegłej znajomości łaciny, subskrypcji eggheads.io, tytułu magistra lub oceny Przekraczający Oczekiwania
z Czaroznawstwa w Hogwarcie"
Jak zacząć?


Jak zacząć?




Jak zacząć?
Ok... może coś mniejszego


Jak zacząć?
create-react-app


Jak zacząć?
create-react-app




Jak zacząć?
create-react-app


ES6 + object spread, async/await, class properties, jsx
linter (eslint), środowisko testowania (jest, enzyme, coverage), debugger (VSC)
css modules, autoprefixer, static assets (fonty, obrazki)
webpack, webpack-dev-server
API proxy (CORS), https
wyjście awaryjne (eject)
Co dalej?
dev, build, deploy!

1. npm run build
2. ???
3. profit

Co dalej?
learn - use - refactor


https://github.com/markerikson
Co dalej?
learn - question - share

https://www.reactiflux.com/

Q & A

React - Obalając mity
By btmpl
React - Obalając mity
- 648