Intro to React - Featuring Modern JavaScript

Intro to React Featuring Modern JavaScript By / & /Brian Scaturro @scaturr Jason Sich @jasich

React A JavaScript library for building user interfaces http://facebook.github.io/react/ And to steal bullet point's from React's website:

JUST THE UI Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

Virtual Dom React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.

Data Flow React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.

Components FTW It's about separation of (application) concerns.

Components as state machines Components have various states, and we render different views for different states.

Components are composable render() { return <div> <MealList meals={this.state.meals} /> <ChoiceFilter /> <ChoiceList allChoices={this.state.allChoices} / > </div> } State can live at the top and be passed down via properties.

Styling Components So like....I've heard React is all about inline styles. Whhuuuutttt?

Well.....yes and no Styles are really just state too. const dropState = this.getDropState('choice'); let styles = {}; if (dropState.isHovering) { //yup that's state styles.backgroundColor = '#FFD34E'; } if (this.props.selection) { //yeah that's state too styles.backgroundImage = 'url(' + this.props.selection.picUrl + } The end result is that styles benefit from reactive goodness. State change = style change.

And it's still HTML At the end of the day, the end result is an HTML document. HTML documents can have links to stylesheets.

Using ES6 in React Introducing React with idiomatic ES6. React v0.13.0 allows for implementing components using JavaScript classes JSX transformers allow for transpiling of ES6 to ES5 code

Classes and modules example import React from 'react'; class ChoiceRow extends React.Component { } export default ChoiceRow;

ES6 in action // `let` keyword let choices = this.props.choices; // arrow and map function let children = choices.map(c => (<Choice item={c} />)); return <div className="row"> {children} </div>

proxies, promises, let, const, generators, etc... Bottomline, the next evolution of JavaScript gives us a lot of cool stuff, and it would be really nice to use today.

Unfortunately... ES6 is not very well supported in most browsers.

There is hope! A lot of really smart people are working towards making ES6 usable today.

Perceived (and maybe some actual) Downsides

Building React Applications With Flux Immutability! Unidirectional data flow! The dispatcher, stores and views are independent nodes with distinct inputs and outputs. The actions are simple objects containing the new data. https://facebook.github.io/flux/docs/overview.html#content

Perhaps with a search form? class ChoiceFilter extends React.Component { render() { return <input type="text" onChange={this._onChange} /> } _onChange(event) { ChoiceActions.filter(event.target.value); //create an action! } } ChoiceActions.js

Stores respond to actions Stores respond to actions, and emit change events. const store = new ChoiceStore(); AppDispatcher.register(function (action) { switch(action.actionType) { case ChoiceConstants.CHOICE_FILTER: store.filter(action.search); store.emit(CHANGE_EVENT); //there is a change! break; default: break; } }); export default store; //yup that's a single store

Views ASK for data In a departure from the prevalent "two-way binding" sorcery, views listen for changes and ask for data.

An example let getState = () => { allChoices: ChoiceStore.getChoices() //asking for data } class MealPlanner extends React.Component { constructor() { this.state = getState(); //initial state } componentWillMount() { ChoiceStore.addChangeListener(this._onChange.bind(this)); //listen } _onChange() { this.setState(getState()); //there was a change - ask for data

But why?!?!?! We found that two-way data bindings led to cascading updates, where changing one object led to another object changing, which could also trigger more updates. As applications grew, these cascading updates made it very difficult to predict what would change as the result of one user interaction. When updates can only change data within a single round, the system as a whole becomes more predictable. https://facebook.github.io/flux/docs/overview.html#content

The Tools Currently we have to jump through hoops to transpile ES6 to ES5, and use handy things like JSX. It's nice necessary to have tools to do it for us

What we want out of a workflow 1. Transpile ES6 to ES5 2. Compile JSX to JavaScript 3. Launch or reload a browser 4. Compile SCSS, Jade, whatever 5. Do this all when we change a file The less we have to focus on building and running, the better

There are a lot of tools out there, here are a few we find useful babel browserify gulp webpack

Testing With Jest Hey! It's worth a mention.

Oh... another Jasmine style testing framework? The Angular team built karma The React team built Jest OK

So... this one does what? Mock by default Fake DOM via jsdom Some new things, it's cool (but so is anything that lets you test your code)

In the land of React jest.dontMock('../ChoiceStore'); jest.dontMock('../../data.json'); describe('ChoiceStore', function () { let ChoiceStore; let data; beforeEach(function () { ChoiceStore = require('../ChoiceStore'); data = require('../../data.json'); }); describe('.getChoices()', function () { it('should return all meal options by default', function () let choices = ChoiceStore.getChoices();

A note on ES6 in tests It requires the babel-jestpackage (or a similar transpile hook), and a little tweak to your package.json file. "jest": { "scriptPreprocessor": "<rootDir>/node_modules/babel-jest", "testFileExtensions": [ "js" ], "moduleFileExtensions": [ "js" ] }

Mixins React doesn't really go for subclassing components, but it does provide support for the timeless JavaScript classic, the mixin.

Quick review A mixin is an object that typically gets merged into the prototype of another object - effectively adding that behavior to instances of the target object.

Add hover functionality? let HoverMixin = { componentWillMount() { this.state = this.state || {}; this.state.hovered = false; }, componentDidMount() { this.getDomNode().addEventListener('mouseover', this._onMouseOver.bi this.getDomNode().addEventListener('mouseout', this._onMouseOut.bind }, componentWillUnmount() { this.getDomNode().removeEventListener('mouseover', this._onMouseOver this.getDomNode().removeEventListener('mouseout', this._onMouseOut.b }, _onMouseOver() { this.setState({hovered: true}); The component* life cycle events can be duplicated. React allows multiple definitions for those when creating mixins.

Do the mixing import HoverMixin from 'HoverMixin'; import React from 'react'; const MyComponent = React.createClass({ mixins: [HoverMixin] }); export default MyComponent;

The struggle of mixins Note the React.createClasscall. Unfortunately ES6 does not have an official mixin mechanism, so we have to use this means of creating a component.

React On The Server And Client Isomorphic JavaScript applications can run on both the server and client. React has a node module which allows it to be rendered on the server.

Future React https://github.com/reactjs/react-future

Examples A React app using webpack and friends https://github.com/jasich/meal-planner A React app using browserify and friends https://github.com/brianium/plan-and-eat

Intro to React - Featuring Modern JavaScript

More Related Content

What's hot

Viewers also liked

Similar to Intro to React - Featuring Modern JavaScript

Recently uploaded

Intro to React - Featuring Modern JavaScript