React Cheat Sheet DEMO: https://s.codepen.

io/ericnakagawa/debug/ALxakj
GITHUB: https://github.com/facebook/react
DOCUMENTATION: https://facebook.github.io/react/docs/
A javascript library for building user interfaces. CDN: https://cdnjs.com/libraries/react/

Hello World ES6 Class Conditional Rendering

// conditional rendering of elements and CSS class
// Import React and ReactDOM // use class for local state and lifecycle hooks
render() {
import React from 'react' class App extends React.Component {
const {isLoggedIn, username} = this.state;
import ReactDOM from 'react-dom'
return (
constructor(props) {
<div className={`login ${isLoggedIn ? 'is-in'
// Render component into the DOM - only once per app // fires before component is mounted
: 'is-out'}`}>
ReactDOM.render( super(props); // makes this refer to this component
{
<h1>Hello, world!</h1>, this.state = {date: new Date()}; // set state
!!isLoggedIn ?
document.getElementById('root') }
<p>Logged in as {username}.</p>
); render() {

Core
:
return (
<p>Logged out.</p>
Stateless Components <h1>
}
It is {this.state.date.toLocaleTimeString()}.
</div>
// Stateless React Component </h1>
)
const Headline = () => { )
}
return <h1>React Cheat Sheet</h1> }
// CodePen Demo: http://bit.ly/react-if-statements
}
componentWillMount() {
// Component that receives props // fires immediately before the initial render Tools and Resources
const Greetings = (props) => { }
return <p>You will love it {props.name}.</p> componentDidMount() { // Create React App
} // fires immediately after the initial render http://bit.ly/react-app
} // React Dev Tools for Chrome
// Component must only return ONE element (eg. DIV) componentWillReceiveProps() { http://bit.ly/react-dev-tools
const Intro = () => { // fires when component is receiving new props // React Code Snippets for Visual Studio Code
return ( } http://bit.ly/react-es6-snippets-for-vscode
<div> shouldComponentUpdate() { // Babel for Sublime Text 3
Lifecycle Methods

<Headline /> // fires before rendering with new props or state http://bit.ly/babel-sublime
<p>Welcome to the React world!</p> }
<Greetings name=”Petr” /> componentWillUpdate() {
</div> // fires immediately before rendering Free Online Course

}
)
}
// with new props or state
React.js 101
componentDidUpdate() { The Quickest Way To Get
ReactDOM.render( // fires immediately after rendering with new P or S
<Intro />, }
Started With React.js
document.getElementById('root') componentWillUnmount() {
); // fires immediately before component is unmounted http://bit.ly/get-react-101
// from DOM (removed)
// Components and Props API - http://bit.ly/react-props }
// CodePen Demo: http://bit.ly/react-simple } Coming Soon!
// CodePen Demo: http://bit.ly/react-es6-class

Created with ♥ by Petr Tichy, happy coding! v0.8 https://www.ihatetomatoes.net