Improving the User Experience with React

JAMES BONHAM

JAMES BONHAM

WHY REACT?

DEMOS

REACT

FLUX

STRUCTURE & CODE

TOOLS

THE END

JavaScript library for creating user interfaces

REACT

React consists of reusable UI components which present data that changes over time

REACT

Changing data? React will automatically manage all UI updates

REACT

Only the UI components that are different get updated

REACT

Flux complements React by utilizing a unidirectional data flow

https://facebook.github.io/flux/

FLUX

FLUX

Actions = Usually triggered by users or servers. Often contain a payload.

Dispatcher = Organise and distribute actions to stores.

FLUX

Stores = The data model. Provides the dispatcher with callbacks. Has functions containing logic and state.

Views = React components that listen for store changes​. 

STRUCTURE & CODE

├── app
│   ├── actions
│   │   ├── SearchActionCreators.js
│   │   └── ServerActionCreators.js
│   ├── app.js
│   ├── components
│   │   ├── Loader.react.js
│   │   ├── Post.react.js
│   │   ├── PostList.react.js
│   │   ├── Search.react.js
│   │   └── SearchForm.react.js
│   ├── constants
│   │   └── Constants.js
│   ├── dispatcher
│   │   └── AppDispatcher.js
│   ├── stores
│   │   └── PostStore.js
│   └── utils
│       └── ServerUtils.js
├── dist
│   ├── bundle.js
│   ├── bundle.js.map
│   └── bundle.min.js
├── node_modules
    └── ...
├── package.json
└── webpack.config.js

STRUCTURE & CODE

...

  render() {
    return (
      <div className="react-search">
        <SearchForm {...this.state} />
        <section className="react-search-results">
          <PostList {...this.state} />
          {this.renderLoading()}
        </section>
        {this.renderWaypoint()}
      </div>
    );
  }
}

Render of top-level component

STRUCTURE & CODE

...
 
  return (
    <article className={props.classes}>
      <a href={props.link}>
        <h2 className="h4" itemProp="name">
          {props.title}
        </h2>
        {hasImage}
        {hasExcerpt}
      </a>
    </article>
  );
};

Render of post component

NPM

TOOLS

The package manager for Javascript

npmjs.com

"dependencies": {
  "classnames": "^2.2.3",
  "flux": "^2.1.1",
  "keymirror": "^0.1.1",
  "react": "^0.14.7",
  "react-dom": "^0.14.7",
  "react-select": "^1.0.0-beta11"
}

ES2015 & Babel

TOOLS

Use the latest JS syntax now, without waiting for browser support

babeljs.io

Linting

TOOLS

Find problematic patterns or code that don’t adhere to certain style guidelines.

eslint.org

ERROR in ./app/components/Post.react.js

./app/components/Post.react.js
  19:6  error  There should be no spaces inside this paren  space-in-parens
  19:8  error  'thumbnail' is not defined                   no-undef

✖ 2 problems (2 errors, 0 warnings)

webpack

TOOLS

Module bundler, for linting, compiling, and minifying to one js file.

webpack.github.io

> webpack --progress --colors --watch

Hash: 3dd3b15fa71164ff3b44  
Version: webpack 1.12.15
Time: 8904ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   905 kB       0  [emitted]  path
bundle.js.map  1.09 MB       0  [emitted]  path
    + 317 hidden modules

"In order to innovate, you have to experiment."

THE END

Mike Schroepfer

Questions?

@jamesbonham

meetup.com/WordPress-Copenhagen

THE END