Improving the User Experience with React
JAMES BONHAM
JAMES BONHAM
WHY REACT?
DEMOS
REACT
FLUX
STRUCTURE & CODE
TOOLS
THE END
JAMES BONHAM


Organiser
Team Lead
@jamesbonham
jQuery = DOM master
React = UI master
WHY REACT?
from react.rocks
DEMOS
Calypso
DEMOS
sundogbaelt.dk/publications
DEMOS
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.
search.php
DEMOS
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
Improving the User Experience with React
By James Bonham
Improving the User Experience with React
- 2,337