A React Journey - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

React React is a JavaScript library for creating user interfaces https://facebook.github.io/react

Slide 5

Slide 5 text

React Main 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

Slide 6

Slide 6 text

Components

Slide 7

Slide 7 text

React A basic component

Slide 8

Slide 8 text

React JSX JSX is a XML-like syntax extension to ECMAScript https://facebook.github.io/jsx/

Slide 9

Slide 9 text

React Component 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. propTypes The propTypes object allows you to validate props being passed to your components

Slide 10

Slide 10 text

React Props 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 provided https://facebook.github.io/react/docs/reusable-components.html#prop-validation

Slide 11

Slide 11 text

React State Internal state data A component can maintain internal state data (accessed via this.state) Re-render on state changes When a component's state data changes, the rendered markup will be updated by re-invoking render()

Slide 12

Slide 12 text

React Component Lifecycles Various methods are executed at specific points in a component's lifecycle. https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods

Slide 13

Slide 13 text

React Mixins Share common functionality Break repetitive tasks out into standalone pieces optionally included within one or more components.

Slide 14

Slide 14 text

React ECMAScript 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)

Slide 15

Slide 15 text

Babel Javascript compiler Transpile ES6/ES7 in ES5 (Classes / Destructuring / Arrow functions / Spread operator ...) http://babeljs.io

Slide 16

Slide 16 text

Babel Learn ES6 http://babeljs.io/docs/learn-es2015/

Slide 17

Slide 17 text

React ES5 to ES6 Classes ECMAScript 6 equivalents in ES5 by @addyosmani https://github.com/addyosmani/es6-equivalents-in-es5

Slide 18

Slide 18 text

React ES6 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

Slide 19

Slide 19 text

React ES6 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

Slide 20

Slide 20 text

React Stateless Functional Components Kill boilerplate code Dumb and predictable component No state, no component lifecycles

Slide 21

Slide 21 text

React High 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

Slide 22

Slide 22 text

React High Order Components Thanks @cef62 (Matteo Ronchi) https://speakerdeck.com/cef62/higher-order- components-in-react-at-voxxed-days-ticino-2016

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

State management

Slide 25

Slide 25 text

Redux By 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

Slide 26

Slide 26 text

Redux App state App state described as a plain object This object is like a “model” except that there are no setters

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Redux Reducers 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

Slide 29

Slide 29 text

Redux Reducers A reducer that manage the complete state can call other small reducers

Slide 30

Slide 30 text

Redux API combineReducers Combine different reducers in one createStore Two arguments, combined reducers and persisted state (optional)

Slide 31

Slide 31 text

Redux subscribe Adds a change listener. Called any time an action is dispatched, and some part of the state tree may potentially have changed getState Returns 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

Slide 32

Slide 32 text

Redux react-redux Presentational and Container Components

Slide 33

Slide 33 text

Provider makes the store available to all container components in the app only need to use it once when you render the root component Redux react-redux

Slide 34

Slide 34 text

Redux react-redux connect(params)(Component) connects a React component to a Redux store. returns a new, connected component class

Slide 35

Slide 35 text

Redux react-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.

Slide 36

Slide 36 text

Redux Middlewares 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

Slide 37

Slide 37 text

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 Redux redux-thunk https://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-saga https://github.com/yelouafi/redux-saga

Slide 38

Slide 38 text

MobX By 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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

MobX Store (observable/computed) @observable state observable capabilities to objects, arrays and class instances annotating properties with the @observable decorator @computed values that will be derived automatically when relevant data is modified

Slide 41

Slide 41 text

@action action is anything that modify the state and is always triggered by some event (DOM events, websockets etc) MobX Store (action)

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

MobX Flow 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

Slide 44

Slide 44 text

Testing

Slide 45

Slide 45 text

Enzyme By 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

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

Enzyme Enzyme Selectors can find nodes by 4 categories: CSS selectors React component constructor React component display name Object properties Enzyme selectors

Slide 48

Slide 48 text

Enzyme Concise 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

Slide 49

Slide 49 text

Webpack Module bundler Loaders Plugins http://webpack.github.io

Slide 50

Slide 50 text

Webpack Module bundler

Slide 51

Slide 51 text

Webpack Loaders Test A regular expression that matches the file extensions that should run through this loader (required) Include / Exclude Set which folders and files the loader should add or ignore Loader The name of the loader (required) Query Used to pass Additional options to the loader

Slide 52

Slide 52 text

Webpack Plugins 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.

Slide 53

Slide 53 text

CSS in JS https://github.com/MicheleBertoli/css-in-js React: CSS in JS techniques comparison

Slide 54

Slide 54 text

CSS Modules Concept of using a module bundler, such as webpack, to load CSS scoped to a particular document https://github.com/css-modules/css-modules

Slide 55

Slide 55 text

CSS Modules Webpack configuration https://github.com/css-modules/webpack-demo

Slide 56

Slide 56 text

CSS Modules How to use

Slide 57

Slide 57 text

CSS Modules Composition https://github.com/css-modules/webpack- demo/tree/master/src/components/3-ClassComposition

Slide 58

Slide 58 text

CSS Modules Composition

Slide 59

Slide 59 text

Atomic CSS Modules https://medium.com/yplan-eng/atomic-css-modules-cb44d5993b27 https://speakerdeck.com/michelebertoli/css-in-js