React 101
...in 20 minutes
Me and React
- I've been getting to know it for 1+ year now
- We are adopting it at work with great success
- It has had a tremendous impact on me
- My development skills
- My career
- My life and family
Companies Using Contributing to Loving React
- AirBnb
- Netflix
- InVisionApp
- Facebook :)
- So many more...
You and React
- Exposure to many *new technologies/concepts
- ES6+
- Functional programming
- *Javascript
- A paradigm shift that sticks with you and transforms how you approach even non-React/JS projects
- Career Opportunities (💰💰💰)
It's not always about the money...
But sometimes... it's about the money
What is React?
React is a Javascript Library for Building User Interfaces
What isn't React?
- It is NOT "MVC"
- It is NOT "Batteries Included"
- It is NOT a "Framework"
React is a Javascript Library for Building User Interfaces
React !== React
- An entire ecosystem of concepts and libraries.
- GraphQL, Relay, Redux, etc...
- Accompanying tooling, setup, and config
- Hot Reloading
- Flux, Redux, MobX, [INSERT PREFERRED FLAVOR]
React is a Javascript Library for Building User Interfaces
Hello World
/**
* https://npmcdn.com/react@15.0.1/dist/react.js
* https://npmcdn.com/react-dom@15.0.1/dist/react-dom.js
*/
ReactDOM.render(
React.createElement('h1', null, 'Hello World!'),
document.getElementById('app')
)
Literally: Hello World Codepen
Components
React is all about components.
A component is essentially a description of a piece of user interface.
These are composed together to form an application.
Think... Legos :)
Components
Components all the way down
Components are composed of components are composed of components.
React.createElement(
'button', // 1st arg is type (string for DOM OR custom component)
{className: 'btn btn-md btn-primary', someProp: '2nd arg is props!'},
'3rd argument is the "props.children"'
)
React.createElement('div', null,
React.createElement('div', null,
React.createElement('div', null,
'Components inside of components inside of components'
)
)
)
*State
A component is a pure function of *state.
*state in, UI out.
Lifecycle
A component’s behavior is defined by its lifecycle methods.
*state being the combination of both this.state and this.props.
Stateless Function Components
The majority of components can be described, simply, as a pure function of props.
This is the "simplified" API which is the preferred method of defining Components.
No state. No Lifecycle.
/**
* See: http://facebook.github.io/react/docs/reusable-components.html#stateless-functions
*/
const SomeStatelessComponent = (props) => {
return (
<div>
<h1>Hello, I am SomeStatelessComponent!</h1>
<h3>{props.message}</h3>
// Only render children when we are not loading
{props.loading ? 'Loading...' : props.children}
</div>
)
};
Class Components
- Persist/Manage state
- Component lifecycle API
- Refs (to do DOM things)
- Things SFCs just don’t support.
Props + State + Lifecycle
/** See http://facebook.github.io/react/docs/component-specs.html */
const SomeStatefulComponent = React.createClass({
// Define the initial "state" of our component
getInitialState() {
// state is updated via this.setState({loading: true})
return {loading: false}
},
render() {
// Here, we have access to this.props as well as this.state
return (
<div>
<h1>Hello, I am SomeStatefulComponent!</h1>
<h3>{this.props.message}</h3>
// Only render children when we are not loading
{this.state.loading ? 'Loading...' : this.props.children}
</div>
)
}
});
+ More...
PropTypes
import React, {PropTypes} from 'react'
const examplePropTypes = {
// Require the title
title: PropTypes.string.isRequired,
// Optional function
doThisWhenClicked: PropTypes.func,
// Some array of "special things with a certain shape"
specialThings: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
deleteMe: PropTypes.func.isRequired,
specialOptionalAttribute: PropTypes.any,
tags: PropTypes.arrayOf(PropTypes.string),
})
).isRequired,
}
const MyComponent = (props) => {/*...*/}
MyComponent.propTypes = examplePropTypes
const MyComponent = React.createClass({
propTypes: examplePropTypes,
// ...
})
class MyComponent extends React.Component {/*...*/}
MyComponent.propTypes = examplePropTypes
An API to declare and validate props.
A component's propTypes are essentially its way of saying “if you are going to use me, this is what I need”.
Helpful console warnings + Great when visiting a component that you did not author (or after 6 months)
JSX
Would you like some sugar with your function calls?
But it's scary
Fear not!
It is nothing more than syntactical sugar on top of the Javascript function calls you already know and love.
import React from 'react';
const Header = ({title, subtitle}) => (
<section className="hero">
<h1 className="title">
{title}
</h1>
<h2 className="subtitle">
{subtitle}
</h2>
</section>
);
All 3 examples are equivalent
- With JSX
- Without
- Without (DOM helpers)
It may look like
- Writing HTML inside of JS (it is not)
- Some new templating language (it is not)
import { createElement as el } from 'react';
const HeaderWithoutJsx = ({title, subtitle}) => (
el('section', {className: 'hero'},
el('h1', {className: 'title'},
title
),
el('h2', {className: 'subtitle'},
subtitle + ' Without JSX'
)
)
);
import { DOM } from 'react';
const {section, div, h1, h2} = DOM;
const HeaderWithDomHelpers = ({title, subtitle}) => (
section({className: 'hero'},
h1({className: 'title'},
title
),
h2({className: 'subtitle'},
subtitle + ' Without JSX (using DOM helpers)'
)
)
);
Two Way Data Binding
Look into the light
Querying DOM Values
...you know what to do
One Way Data Flow
Data Flow
- Parents (higher up in the hierarchy) pass props down to their children.
- Some props represent “a piece of state” (read)
- Some props are functions that "update/affect state higher up the chain” (write)
In React, all data flows from the top to the bottom.
/**
* The parent "owns" and manages the state.
* It passes down props to its children
* Some props are data and the children simply display them "read"
* Some props are functions that can update/affect state "write"
*/
const ShoppingCart = React.createClass({
getInitialState() {
return {
cartQuantity: 0,
};
},
incrementQuantity() {
this.setState({
cartQuantity: this.state.cartQuantity + 1,
});
},
render() {
const { cartQuantity } = this.state;
return (
<div>
<h3>A Great Item</h3>
<QuantityDisplayer quanity={cartQuantity} />
<MoarButton increment={this.incrementQuantity} />
</div>
)
}
});
/**
* The children require/accept props from "the great above" (parent)
*/
const QuantityDisplayer = (props) => (
<div>
Quantity in cart: {props.quantity}
</div>
);
QuantityDisplayer.propTypes = {
quantity: React.PropTypes.number.isRequired,
};
const MoarButton = (props) => (
<button onClick={props.increment}>
MOAR!!!
</button>
);
MoarButton.propTypes = {
increment: React.PropTypes.func.isRequired,
};
"Controlled" Components
A Controlled component does not maintain its own internal state; the component renders purely based on props.
Example!
/** A Form w/ a "controlled" component (input) */
const SomeForm = React.createClass({
getInitialState() {
return {firstName: ''}
},
handleChangeFirstName(event) {
this.setState({
firstName: event.target.value
})
},
handleSubmit(event) {
event.preventDefault()
alert(`First Name: ${this.state.firstName}!`)
},
render() {
const {firstName} = this.state
return (
<div>
<h3>A Great Form</h3>
<form onSubmit={this.handleSubmit}>
First Name <input
type="text"
value={firstName}
onChange={this.handleChangeFirstName}
/>
<button>Submit</button>
</form>
</div>
)
}
})
input simply renders the value that is given. The DOM event is handled by handleChangeFirstName and the new value trickles back down.
Enough. Enough!
Recap
- It may be a worthwhile investment of time/energy to at least spend a week or so playing with React
- React is a Javascript Library for Building User Interfaces
- React is not MVC, a framework, or a complete solution
- Less opinionated, so more decisions
- Smaller/simpler, so must be augmented by other libraries
- Do not fear the JSX!
- One Way Data Flow
- Forget two way data binding and DOM querying
- Components all the way down
- Stateless Function Components
- Class Components
- PropTypes
- Controlled Components
Where to Start?
- The Official React Docs/Guide
- Pete Hunt's react-howto
- Tyler McGinnis' React.js Program
- Egghead React Videos
- Just. Start. Building!
- Reach out!
- Twitter: @erikthedev_
- Slack: STGJS
React 101: The Condensed Version - Erik Aybar
React 101
By Erik Aybar
React 101
A condensed introduction to the wonderful world of React
- 3,346