Download - A React Journey
![Page 1: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/1.jpg)
A React JourneyA tour of the latest trends in the React ecosystem
![Page 2: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/2.jpg)
JS Frontend Developer at LinkMe Srl
Twitter: @_denb
In love with React and Javascript in general.I’m a 7-month-old dad
Daniele Bertella
![Page 3: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/3.jpg)
JS Frontend Jr Developer at LinkMe Srl
Twitter: @paolorovella
In love with React and sushi, i’m an incurable tv shows binge watcher
Paolo Rovella
![Page 4: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/4.jpg)
React Ecosystem
React
JSX, State/Props, HoC, Routing
State management
Redux, Mobx
Tools
Babel, Webpack, CSS Modules, Testing
![Page 5: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/5.jpg)
ReactReact is a JavaScript library for creating user interfaces
https://facebook.github.io/react
![Page 6: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/6.jpg)
ReactMain concepts
Just the UI
React is only concerned about rendering UI
Virtual DOM
React uses a Virtual DOM Diff implementation for ultra-high performance
Data Flow
React introduces one-way reactive data flow
![Page 7: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/7.jpg)
Components
![Page 8: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/8.jpg)
ReactA basic component
JSX is a XML-like syntax extension to ECMAScript
JSX uses className because “class” in JavaScript is a
reserved word
![Page 9: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/9.jpg)
ReactProps
Input data that is passed into the component and can be accessed
via this.props
The propTypes object allows you to validate props being passed to
your components
PropTypes validation providedhttps://facebook.github.io/react/docs/reusable-components.html#prop-validation
![Page 10: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/10.jpg)
ReactState
Internal state dataA component can maintain internal state data (accessed via this.state)
Re-render on state changesWhen a component's state data
changes, the rendered markup will be updated by re-invoking render()
![Page 11: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/11.jpg)
ReactComponent Lifecycles
Various methods are executed at specific points in a component's
lifecycle
https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods
![Page 12: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/12.jpg)
ReactECMAScript 6 (ES6) is the upcoming sixth major release of
the ECMAScript language specification.
ES6 support is different among browsers(https://kangax.github.io/compat-table/es6/)
You can use ES6 today thanks to transpilers like Babel
ECMAScript 6 (ES6)
![Page 13: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/13.jpg)
BabelJavascript compiler
Transpile ES6/ES7 in ES5
(Classes / Destructuring / Arrow functions / Spread operator ...)
http://babeljs.io
http://babeljs.io/docs/learn-es2015/
![Page 14: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/14.jpg)
ReactES5 to ES6 ClassesECMAScript 6 equivalents in ES5 by @addyosmani
https://github.com/addyosmani/es6-equivalents-in-es5
![Page 15: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/15.jpg)
ReactES6 Destructuring
ES6 Arrow function
Expression that make it possible to extract data from arrays or object into dinstinct variables
Shorter syntax compared to function expressions and binds the “this” value (not its own this). They are always anonymous
![Page 16: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/16.jpg)
ReactES6 Object Spread operator
ES6 Decorators
Copy properties from one object to another. The specification order is important
Syntactic sugar which lets you annotate and modify classes at design time
![Page 17: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/17.jpg)
ReactStateless Functional Components
Kill boilerplate code
Dumb and predictable component
No state, no component lifecycles
![Page 18: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/18.jpg)
ReactHigh Order Components
Reuse other components functionalities
Reduce duplication of code
![Page 19: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/19.jpg)
ReactHigh Order Components
Thanks @cef62 (Matteo Ronchi)https://speakerdeck.com/cef62/higher-order-
components-in-react-at-voxxed-days-ticino-2016
![Page 20: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/20.jpg)
ReactRouting (react-router) https://github.com/reactjs/react-router
![Page 21: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/21.jpg)
State management
![Page 22: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/22.jpg)
ReduxBy Dan Abramov (@dan_abramov)
https://github.com/reactjs/redux
Predictable state container for JavaScript apps.
Three principles
- Single source of truth- State is read only- Changes are made with pure functions
![Page 23: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/23.jpg)
ReduxApp state
App state described as a plain object
This object is like a “model” except that there are no setters
![Page 24: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/24.jpg)
ReduxActions
The only way to mutate the state is to emit an action, an object describing what happened
![Page 25: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/25.jpg)
ReduxReducers
A function that takes previous state and action as arguments, and
returns the next state of the app
Split reducers in smaller functions managing parts of the state
![Page 26: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/26.jpg)
ReduxReducers
A reducer that manage the complete statecan call other small reducers
![Page 27: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/27.jpg)
ReduxAPI
combineReducers Combine different
reducers in one
createStoreTwo arguments, combined
reducers and persisted state (optional)
![Page 28: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/28.jpg)
Reduxsubscribe
Adds a change listener. Called any time an action is dispatched, and some part of the state
tree may potentially have changed
getStateReturns an object with the current state tree
of your application
dispatch Dispatches an action. This is the only way to
trigger a state change
Store
![Page 29: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/29.jpg)
Reduxreact-reduxReact bindings for Redux embrace the idea of separating
presentational and container components.
![Page 30: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/30.jpg)
Provider
makes the store available to all container components in the app
only need to use it once when you render the root component
Reduxreact-redux
![Page 31: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/31.jpg)
Reduxreact-redux
connect(params)(Component)
connects a React component to a Redux store.
returns a new, connected component class
![Page 32: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/32.jpg)
Reduxreact-redux
mapStateToProps
a function that tell how to transform the current Redux store state into the props
you want to pass.
mapDispatchToProps
a function that receives dispatch() method and returns a callback props.
![Page 33: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/33.jpg)
ReduxMiddlewares
Suggested way to extend Redux with custom functionality
They are called after an action is dispatched and before it reaches the
reducer
Multiple middlewares can be combined together
![Page 34: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/34.jpg)
Redux Saga middleware let you create Sagas, which are generators responsible for orchestrating complex/asynchronous operations, to gather all your side effects logic in a central place
Reduxredux-thunkhttps://github.com/gaearon/redux-thunk
Middlewares
Redux Thunk middleware allows you to write action creators that return a function instead of an action
The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met
redux-sagahttps://github.com/yelouafi/redux-saga
![Page 35: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/35.jpg)
MobXBy Michel Weststrate (@mweststrate)
https://github.com/mobxjs/mobx
MobX is a library that makes state management simple and scalable by transparently applying functional reactive programming
![Page 36: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/36.jpg)
Functional reactive programming
Functional reactive programming is programming with asynchronous data streams which you can listen to and react accordingly
The introduction to Reactive Programming you've been missing
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
![Page 37: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/37.jpg)
MobXStore (observable/computed)
@observable stateobservable capabilities to objects, arrays and class instances annotating properties
with the @observable decorator
@computedvalues that will be derived automatically
when relevant data is modified
![Page 38: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/38.jpg)
@actionaction is anything that modify
the state and is always triggered by some event (DOM events,
websockets etc)
MobXStore (action)
![Page 39: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/39.jpg)
MobX@observer
observer function / decorator is used to turn ReactJS components into
reactive components.
In this component store can be passed as a prop
mobx-react
![Page 40: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/40.jpg)
MobXFlow
API overview
https://mobxjs.github.io/mobx/refguide/api.html
In-depth explanation of MobX
https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-
explanation-of-mobservable-55995262a254
![Page 41: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/41.jpg)
One more thing...
![Page 42: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/42.jpg)
https://speakerdeck.com/paolorovella/react-native
![Page 43: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/43.jpg)
![Page 44: A React Journey](https://reader031.vdocuments.us/reader031/viewer/2022022203/5871aaf41a28abda6a8b5743/html5/thumbnails/44.jpg)