A React JourneyA tour of the latest trends in the React ecosystem

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

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

ReactReact is a JavaScript library for creating user interfaces

https://facebook.github.io/react

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

Components

ReactA basic component

ReactJSX

JSX is a XML-like syntax extension to ECMAScript

https://facebook.github.io/jsx/

ReactComponent Specs

getInitialState()Invoked once before the component is

mounted. The return value will be used as the initial value of this.state.

getDefaultProps()Invoked once, before any instances are created. The return value will be used

as the initial value of this.props.

propTypesThe propTypes object allows you to validate props being

passed to your components

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

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()

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

ReactMixins

Share common functionality

Break repetitive tasks out into standalone pieces optionally included within one or more

components.

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)

BabelJavascript compiler

Transpile ES6/ES7 in ES5

(Classes / Destructuring / Arrow functions / Spread operator ...)

http://babeljs.io

BabelLearn ES6

http://babeljs.io/docs/learn-es2015/

ReactES5 to ES6 ClassesECMAScript 6 equivalents in ES5 by @addyosmani

https://github.com/addyosmani/es6-equivalents-in-es5

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

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

ReactStateless Functional Components

Kill boilerplate code

Dumb and predictable component

No state, no component lifecycles

ReactHigh Order Components

Reuse other components functionalities

Reduce duplication of code

Mixins Are Dead. Long Live Composition

https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

ReactHigh Order Components

Thanks @cef62 (Matteo Ronchi)https://speakerdeck.com/cef62/higher-order-

components-in-react-at-voxxed-days-ticino-2016

ReactRouting (react-router) https://github.com/reactjs/react-router

State management

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

ReduxApp state

App state described as a plain object

This object is like a “model” except that there are no setters

ReduxActions

The only way to mutate the state is to emit an action, an object describing what happened

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

ReduxReducers

A reducer that manage the complete statecan call other small reducers

ReduxAPI

combineReducers Combine different

reducers in one

createStoreTwo arguments, combined

reducers and persisted state (optional)

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

Reduxreact-reduxPresentational and Container Components

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

Reduxreact-redux

connect(params)(Component)

connects a React component to a Redux store.

returns a new, connected component class

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.

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

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

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

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

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

@actionaction is anything that modify

the state and is always triggered by some event (DOM events,

websockets etc)

MobXStore (action)

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

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

Testing

EnzymeBy Airbnb (@airbnb)

https://github.com/airbnb/enzyme

Enzyme is a JavaScript testing utility for React.

React components are easy to test because they simply return a description for what UI of the component should look like.

This “description” is the “Virtual DOM” and is a tree-like data structure

Enzyme

Shallow is the recommended mode to start with since it does a better job of isolating your

tests to just a single component

Shallow rendering

Enzyme exports three different “modes” to render and test components: shallow, mount, and render.

EnzymeEnzyme Selectors can find nodes by 4 categories:

CSS selectors

React component constructor

React component display name

Object properties

Enzyme selectors

EnzymeConcise and elegant way of simulating user events, one of the trickier aspects

of UI testing.

Just pass the name of the event you want to simulate, along with any

required data

Event simulations

WebpackModule bundler

Loaders

Plugins

http://webpack.github.io

WebpackModule bundler

WebpackLoaders

TestA regular expression that matches the file extensions that

should run through this loader (required)

Include / ExcludeSet which folders and files the loader should add or ignore

LoaderThe name of the loader (required)

Query

Used to pass Additional options to the loader

WebpackPlugins

Tutorial

http://www.pro-react.com/materials/appendixA

Plugins have the ability to inject themselves into the build process to

introduce custom behaviors.

They do not operate like loaders on individual source files: they influence

the build process as a whole.

CSS in JShttps://github.com/MicheleBertoli/css-in-js

React: CSS in JS techniques comparison

CSS ModulesConcept of using a module bundler, such

as webpack, to load CSS scoped to a particular document

https://github.com/css-modules/css-modules

CSS ModulesWebpack configurationhttps://github.com/css-modules/webpack-demo

CSS ModulesHow to use

CSS ModulesCompositionhttps://github.com/css-modules/webpack-

demo/tree/master/src/components/3-ClassComposition

CSS ModulesComposition

Atomic CSS Moduleshttps://medium.com/yplan-eng/atomic-css-modules-cb44d5993b27

https://speakerdeck.com/michelebertoli/css-in-js

One more thing...

https://speakerdeck.com/paolorovella/react-native