Presentation on React for TucsonJS, November 2015

IntroToReact-TucsonJS.md

How to React

and why you should

---

{
  "name": "Dennis Snell",
  "title": "Spline Reticulator",
  "company": "Automattic, Inc.",
  "presentationDate": "Thurs, Nov 5, 2015"
}

---

This is not a tutorial

This is not a library

React is the implementation of
[the ideas behind React]
— Pete Hunt

---

What are the ideas behind React?

• Declarative UI
• Lifecycles
• Single responsibility principle

---

What are the ideas behind React?

Declarative UI

view = f( state )
view = f( state )
view = f( state )

UI views are a direct translation from their input parameters to the output display.

---

view = f( actions.reduce( handleAction ) )

---

Declarative UI

const Meetup = ( { title, date, description, attendees } ) => (
	<div>
		<h1>{ title }</h1>
		<h2>{ moment( date ).format( 'L' ) }</h2>
		<div className="description">{ description }</div>
		{ attendees.length ?
			<h2>Who's coming?</h2>
			<ul>
				{ attendees.map( user => (
					<li><User {...user} /></li>
				) ) }
			</ul>
		: <h2>Be the first to sign up!</h2> }
	</div>
);

---

No transitions means one-way data bindings.

---

import { togglePostLike } from 'actionHandler';

render( post ) {
	return (
		<LikeButton
			isLiked={ post.isLiked }
			onClick={ () => togglePostLike( post.ID ) }
		/>
	);
}

---

What are the ideas behind React?

Lifecycles

React components are objects with specific lifecycle methods that get called at the appropriate time if they exist.

---

Lifecycles

getInitialState()
getDefaultProps()
componentWillMount()
componentDidMount()
getInitialState()
shouldComponentUpdate()
componentWillUnmount()

---

componentDidMount() {
	productStore
		.fetchCategory( this.props.category )
		.then( products => products.map( prepareForDisplay ) )
		.then( products => this.setState( { products } ) );
}

render() {
	return (
		<div>
			{ this.state.products.map( product => (
				<Product {...product } />
			) }
		</div>
	);
}

---

Server-side, client-side, render-time are _lifecycle_ moments...

..._Isomorphic_ React apps

---

By using the appropriate lifecycle methods we can pre-render on the server and spit out valid HTML. Once the client JavaScript loads, React hooks up the event-handlers and starts building the Virtual DOM.

same code on the server and client

---

What are the ideas behind React?

Single responsibility principle

• Reusable component libraries
• Composable components and enhancers
• Separation of data, mutations, and views

---

componentDidMount() {
	fetch( LANGUAGE_USE_JSON_URL )
		.then( response => response.json() )
		.then( data => this.setState( { data } ) );
}

render: () => (
	<table>
		<tr><th>...</th></tr>
		{ this.state.data.languages.map( this.getLanguageRow ) }
	</table>
);

Not so good!

Hard-coded API requests

Interleaving of data

Not reusable

---

componentDidMount() {
	surveyStore.fetchResults()
		.then( data => this.setState( { data } ) );
}

render: () => (
	<table>
		<tr><th>...</th></tr>
		{ this.state.data.languages.map( this.getLanguageRow ) }
	</table>
);

Better...

👍 API is abstracted

👎 Data still interleaved

👎 Still not reusable

---

render: ( headers, rows ) => (
	<table>
		<tr>
			{ headers.map( header => (
				<th>{ header }</th>
			) ) }
		</tr>
		{ rows.map( row => (
			<tr>
				{ row.map( cell => (
					<td>{ cell }</td>
				) ) }
			</tr>
		) ) }
	</table>
);

Is a table

Only a table

---

// Data wrapper
componentDidMount() {
	surveyStore.fetchResults()
		.then( data => this.setState( { data } ) );
}

render: () => (
	<DataTable
		headers={ ... }
		rows={ this.state.data.languages }
	/>
);

Best

👍 API is abstracted

👍 Data fetching totally separate

👍 Table is completely reusable (_testable_)

---

// TableUnitTest
const fixture = {
	headers: [ 'Animal', 'Voice', 'Constraint' ],
	rows: [
		[ 'Cat', 'meow', 'must land on feet' ],
		[ 'Horse', 'neigh', 'follows carrots' ],
		[ 'Octocat', '*$%!', 'reverts when bugs spotted' ]
	]
}

let table = render( <DataTable {...fixture } /> );

assert( hasThreeRows( table ) );

table.sortByVoice();
assert( isSortedByVoice( table ) );

---

Composability lends itself to inserting via the AST

render: () => (
	<TransitionLogger {...this.props}>
		<ComponentVisualizer>
			<LanguageUseTable />
		</ComponentVisualizer>
	</TransitionLogger>
);

---

Why should I react?

---

React has the weight of Facebook behind it.

It's supported and stable.

---

It's more than a library;

it's a body of constraints that impose

certain assumptions on your code

---

Instead of freaking out about these constraints, embrace them. Let them guide you. Constraints drive innovation and force focus. Instead of trying to remove them, use them to your advantage.

— 37 Signals

---

...the imagination is unleashed by constraints. You break out of the box by stepping into shackles.

— Jonah Lehrer

---

Rules are the fence around a playground that allow us to have fun and explore and imagine without fear and without risk.

— Me? I swear I heard this somewhere before...

---

Enumerate the benefits

• Modular, composable, reusable components
• Low entry to barrier for new contributors
• Avoids the data disaster
• Can render to non-DOM media
• Plays well with others: jQuery, d3, etc...
• Makes designers happy
• Incremental application
• Great performance

---

Time for a live demo!