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