React JS

Best practice in development 

with

Vít Jouda
vit.jouda@gmail.com

www.sqn.cz

Agenda

• Devstack
  • available solutions, from scratch
• React
  • best practice, optimization
• Routing
  •  react-router
• Redux
  • best practice, side-effect handling
• Application development in practice
  • material-ui, styling, testing
• Q&A

Prerequisites

Git (or browser)

https://github.com/sqn-sources/react-redux-workshop

NodeJS 8+

IDE of choice

Devstack

(Do you need one?)

create-react-app
 

Next.JS
 

starters (boilerplate)

custom solution ;)

Devstack cookbook

• build tool

  • Grunt, Gulp, npm?

• compiler

  • Babel

• module bundler

  • Webpack, Rollup, Parcel

• linter

  • ESLint, JSLint, JSHint

• test runner

  • Jest, Mocha, Karma

• API

  • Swagger

• prettifier

  • prettier

• component development

  • storybook

Ingredients

React

Component types

Functional (stateless)

• basic building blocks
• no lifecycle hooks
• easy to test
• not optimized by default

• holds internal state
• provides lifecycle hooks
• Component, PureComponent

Class

Design patterns

Higher order components

Render prop / children

• replaced mixins
• extends functionality
• intercepts actions
• easy composition (recompose)

• alternative to HOC
• less boilerplate
• clear data propagation
• render prop hell

React 16+

• Lifecycle changes
  • getDerivedStateFromProps
     
• Error boundaries
  • componentDidCatch
     
• New context API
  • React.createContext()
     
• <Fragment/>

Redux

• Etate container
• Evolution of Facebook Flux
• Created by Dan Abramov

Core concepts

• Single source or truth
• Immutability
• Predefined set of actions
• Reactive loop

Components

Store

• Application data storage
• Serializable
• Immutable

Actions

• Plain JS objects
• Source of information for the store
• Contain type and payload
• Usually created by action creators

Reducers

• Pure functions
• Describe how application state changes
• Evolve state using actions

Selectors

• Retreive data from state
• Can compute derived data
• Memoized
• Composable
• Reselect

Side effects handling

Redux middleware

• redux-thunk
• redux-saga

Redux (like) frameworks

• rematch
• react-waterfall

Application development in practice

Choosing the right tool for the job

Source code structure

GUI components

• Material-UI
• React-bootstrap
• ...

Styling solutions

• CSS
  • problematic with large projects
  • BEM
• Inline CSS
  • style property
  • dynamic behaviour
• Sass, Less
  • CSS preprocessors
• JSS
  • CSS in JS
  • default solution in Material-UI

Testing

• react-test-renderer
  • render components to AST or JSON
• enzyme
  • airbnb library
  • shallow, mount, render
• snapshots
  • controversial feature in use with React
  • snapshot-diff

Components

Higher level tests