Table of Contents for
React Quickly: Painless web apps with React, JSX, Redux, and GraphQL

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition React Quickly: Painless web apps with React, JSX, Redux, and GraphQL by Azat Mardan Published by Manning Publications, 2017
  1. Cover
  2. React Quickly: Painless web apps with React, JSX, Redux, and GraphQL
  3. Copyright
  4. React Quickly: Painless web apps with React, JSX, Redux, and GraphQL
  5. Brief Table of Contents
  6. Table of Contents
  7. Praise for React Quickly
  8. Foreword
  9. Preface
  10. Acknowledgments
  11. About This Book
  12. About the Author
  13. About the Cover
  14. Part 1. React foundation
  15. Chapter 1. Meeting React
  16. Chapter 2. Baby steps with React
  17. Chapter 3. Introduction to JSX
  18. Chapter 4. Making React interactive with states
  19. Chapter 5. React component lifecycle events
  20. Chapter 6. Handling events in React
  21. Chapter 7. Working with forms in React
  22. Chapter 8. Scaling React components
  23. Chapter 9. Project: Menu component
  24. Chapter 10. Project: Tooltip component
  25. Chapter 11. Project: Timer component
  26. Part 2. React architecture
  27. Chapter 12. The Webpack build tool
  28. Chapter 13. React routing
  29. Chapter 14. Working with data using Redux
  30. Chapter 15. Working with data using GraphQL
  31. Chapter 16. Unit testing React with Jest
  32. Chapter 17. React on Node and Universal JavaScript
  33. Chapter 18. Project: Building a bookstore with React Router
  34. Chapter 19. Project: Checking passwords with Jest
  35. Chapter 20. Project: Implementing autocomplete with Jest, Express, and MongoDB
  36. Appendix A. Installing applications used in this book
  37. Appendix B. React cheatsheet
  38. Appendix C. Express.js cheatsheet
  39. Appendix D. MongoDB and Mongoose cheatsheet
  40. Appendix E. ES6 for success
  41. React Cheatsheet
  42. Index
  43. List of Figures
  44. List of Tables
  45. List of Listings

React Cheatsheet

INSTALLATION
React <script src="https://unpkg.com/react@15/dist/react.js"></script>
$ $ npm install react --save
$ $ bower install react --save

React DOM

<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
$ npm install react-dom
$ bower install react-dom --save
RENDERING
ES5 ReactDOM.render(
React.createElement(
Link,
{href: 'https://Node.University'}
)
),
document.getElementById('menu')
)

ES5+JSX

ReactDOM.render(
<Link href='https://Node.University'/>,
document.getElementById('menu')
)

Server-side rendering

const ReactDOMServer = require('react-dom/server')
ReactDOMServer.renderToString(Link, {href: 'https://Node.University'})
ReactDOMServer.renderToStaticMarkup(Link, {href:
'https://Node.University'})
propTypes
Types available under React.PropTypes: any array bool element func
node number object string

To make a property required (warning only), append .isRequired.

More methods

instanceOf(constructor)
oneOf (['News', 'Photos'])
oneOfType([propType, propType])

Custom validation

propTypes: {
customProp: function(props, propName, componentName) {
if (!/regExPattern/.test(props[propName])) {
return new Error('Validation failed!');
}
}
}
SPECIAL PROPERTIES
key—Unique identifier for an element to turn arrays/lists into hashes for better performance. For example: key={id}.

ref—Reference to an element via this.refs.NAME. For example: ref="email" will create a this.refs.email DOM node or ReactDOM.findDOMNode(this.refs.email).

style—Accepts an object for camelCased CSS styles instead of a string (immutable since v0.14). For example: style={{color: red}}.

className—HTML class attribute. For example: className="btn".

htmlFor—HTML for attribute. For example: htmlFor="email".

dangerouslySetInnerHTML—Sets inner HTML to raw HTML by providing an object with the key __html.

children—Sets the content of the element via this.props.children. For example: this.props.children[0].

data-NAME—Custom attribute. For example: data-tooltip-text="...".
LIFECYCLE EVENTS
componentWillMount function()
componentDidMount function()
componentWillReceiveProps function(nextProps)
shouldComponentUpdate function(nextProps, nextState) -> bool
componentWillUpdate function(nextProps, nextState)
componentDidUpdate function(prevProps, prevState)
componentWillUnmount function()
COMPONENT PROPERTIES AND METHODS
Properties this.refs—Lists components with a ref property. this.props—Lists any properties passed to an element (immutable). this.state—Lists states set by setState and getInitialState (mutable). Avoid setting state manually with this.state=... this.isMounted—Flags whether the element has a corresponding DOM node. Methods setState(changes)—Changes state (partially) to this.state, and triggers a rerender replaceState(newState)—Replaces this.state, and triggers a rerender forceUpdate()—Triggers an immediate DOM rerender
REACT ADDONS
As npm modules: react-addons-css-transition-group
react-addons-perf
react-addons-test-utils
react-addons-pure-render-mixin
react-addons-linked-state-mixin
react-addons-clone-with-props
react-addons-create-fragment
react-addons-css-transition-group
react-addons-linked-state-mixin
react-addons-pure-render-mixin
react-addons-shallow-compare
react-addons-transition-group
react-addons-update
COMPONENTS
ES5 var Link = React.createClass({
displayName: 'Link',
render: function() {
return React.createElement('a',
{className: 'btn', href: this.props.href}, 'Click ->',
this.props.href)
}
})

ES5 + JSX

var Link = React.createClass({
render: function() {
return <a className='btn' href={this.props.href}>Click ->
this.props.href</a>
}
})

ES6 + JSX

class Link extends React.Component {
render() {
return <a className='btn' href={this.props.href}>Click ->
this.props.href</a>
}
}
ADVANCED COMPONENTS
Options (ES5)

Type validation in development mode—propTypes object

Object of default properties—getDefaultProps function()

Object of the initial state—getInitialState function()

ES5

var Link = React.createClass ({
propTypes: { href: React.PropTypes.string },
getDefaultProps: function() {
return { initialCount: 0 }
},
getInitialState: function() {
return {count: this.props.initialCount}
},
tick: function() {
this.setState({count: this.state.count + 1})
},
render: function() {
return React.createElement(
'a',
{className: 'btn', href: '#', href: this.props.href,
onClick: this.tick.bind(this)},
'Click ->',
(this.props.href ? this.props.href : 'https://webapplog.com'),
' (Clicked: ' + this.state.count+')'
)
}
})

ES5 + JSX

var Link = React.createClass ({
propTypes: { href: React.PropTypes.string },
getDefaultProps: function() {
return { initialCount: 0 }
},
getInitialState: function() {
return {count: this.props.initialCount};
},
tick: function() {
this.setState({count: this.state.count + 1})
},
render: function() {
return (
<a onClick={this.tick.bind(this)} href="#" className="btn"
href={this.props.href}>
Click -> {(this.props.href ? this.props.href :
'https://webapplog.com')}
(Clicked: {this.state.count})
</a>
)
}
})

ES6 + JSX

export class Link extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<a onClick={this.tick.bind(this)} href="#" className="btn"
href={this.props.href}>
Click -> {(this.props.href ? this.props.href :
'https://webapplog.com')}
(Clicked: {this.state.count})
</a>
)
}
}
Link.propTypes = { initialCount: React.PropTypes.number }
Link.defaultProps = { initialCount: 0 }
INSTALLATION
React <script src="https://unpkg.com/react@15/dist/react.js"></script>
$ $ npm install react --save
$ $ bower install react --save

React DOM

<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
$ npm install react-dom
$ bower install react-dom --save
RENDERING
ES5 ReactDOM.render(
React.createElement(
Link,
{href: 'https://Node.University'}
)
),
document.getElementById('menu')
)

ES5+JSX

ReactDOM.render(
<Link href='https://Node.University'/>,
document.getElementById('menu')
)

Server-side rendering

const ReactDOMServer = require('react-dom/server')
ReactDOMServer.renderToString(Link, {href: 'https://Node.University'})
ReactDOMServer.renderToStaticMarkup(Link, {href:
'https://Node.University'})
propTypes
Types available under React.PropTypes: any array bool element func
node number object string

To make a property required (warning only), append .isRequired.

More methods

instanceOf(constructor)
oneOf (['News', 'Photos'])
oneOfType([propType, propType])

Custom validation

propTypes: {
customProp: function(props, propName, componentName) {
if (!/regExPattern/.test(props[propName])) {
return new Error('Validation failed!');
}
}
}
SPECIAL PROPERTIES
key—Unique identifier for an element to turn arrays/lists into hashes for better performance. For example: key={id}.

ref—Reference to an element via this.refs.NAME. For example: ref="email" will create a this.refs.email DOM node or ReactDOM.findDOMNode(this.refs.email).

style—Accepts an object for camelCased CSS styles instead of a string (immutable since v0.14). For example: style={{color: red}}.

className—HTML class attribute. For example: className="btn".

htmlFor—HTML for attribute. For example: htmlFor="email".

dangerouslySetInnerHTML—Sets inner HTML to raw HTML by providing an object with the key __html.

children—Sets the content of the element via this.props.children. For example: this.props.children[0].

data-NAME—Custom attribute. For example: data-tooltip-text="...".
LIFECYCLE EVENTS
componentWillMount function()
componentDidMount function()
componentWillReceiveProps function(nextProps)
shouldComponentUpdate function(nextProps, nextState) -> bool
componentWillUpdate function(nextProps, nextState)
componentDidUpdate function(prevProps, prevState)
componentWillUnmount function()
COMPONENT PROPERTIES AND METHODS
Properties this.refs—Lists components with a ref property. this.props—Lists any properties passed to an element (immutable). this.state—Lists states set by setState and getInitialState (mutable). Avoid setting state manually with this.state=... this.isMounted—Flags whether the element has a corresponding DOM node. Methods setState(changes)—Changes state (partially) to this.state, and triggers a rerender replaceState(newState)—Replaces this.state, and triggers a rerender forceUpdate()—Triggers an immediate DOM rerender
REACT ADDONS
As npm modules: react-addons-css-transition-group
react-addons-perf
react-addons-test-utils
react-addons-pure-render-mixin
react-addons-linked-state-mixin
react-addons-clone-with-props
react-addons-create-fragment
react-addons-css-transition-group
react-addons-linked-state-mixin
react-addons-pure-render-mixin
react-addons-shallow-compare
react-addons-transition-group
react-addons-update
COMPONENTS
ES5 var Link = React.createClass({
displayName: 'Link',
render: function() {
return React.createElement('a',
{className: 'btn', href: this.props.href}, 'Click ->',
this.props.href)
}
})

ES5 + JSX

var Link = React.createClass({
render: function() {
return <a className='btn' href={this.props.href}>Click ->
this.props.href</a>
}
})

ES6 + JSX

class Link extends React.Component {
render() {
return <a className='btn' href={this.props.href}>Click ->
this.props.href</a>
}
}
ADVANCED COMPONENTS
Options (ES5)

Type validation in development mode—propTypes object

Object of default properties—getDefaultProps function()

Object of the initial state—getInitialState function()

ES5

var Link = React.createClass ({
propTypes: { href: React.PropTypes.string },
getDefaultProps: function() {
return { initialCount: 0 }
},
getInitialState: function() {
return {count: this.props.initialCount}
},
tick: function() {
this.setState({count: this.state.count + 1})
},
render: function() {
return React.createElement(
'a',
{className: 'btn', href: '#', href: this.props.href,
onClick: this.tick.bind(this)},
'Click ->',
(this.props.href ? this.props.href : 'https://webapplog.com'),
' (Clicked: ' + this.state.count+')'
)
}
})

ES5 + JSX

var Link = React.createClass ({
propTypes: { href: React.PropTypes.string },
getDefaultProps: function() {
return { initialCount: 0 }
},
getInitialState: function() {
return {count: this.props.initialCount};
},
tick: function() {
this.setState({count: this.state.count + 1})
},
render: function() {
return (
<a onClick={this.tick.bind(this)} href="#" className="btn"
href={this.props.href}>
Click -> {(this.props.href ? this.props.href :
'https://webapplog.com')}
(Clicked: {this.state.count})
</a>
)
}
})

ES6 + JSX

export class Link extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<a onClick={this.tick.bind(this)} href="#" className="btn"
href={this.props.href}>
Click -> {(this.props.href ? this.props.href :
'https://webapplog.com')}
(Clicked: {this.state.count})
</a>
)
}
}
Link.propTypes = { initialCount: React.PropTypes.number }
Link.defaultProps = { initialCount: 0 }