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

  • 538