React Cheat Sheet

A javascript library for building user interfaces.

Hello World ES6 Class Conditional Rendering

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

Core
return ( :
<h1> <p>Logged out.</p>
Stateless Components
It is {this.state.date.toLocaleTimeString()}. }
// Stateless React Component </h1> </div>
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
) // with new props or state
} }
componentDidUpdate() {
ReactDOM.render( // fires immediately after rendering with new P or S
<Intro />, }
document.getElementById('root') componentWillUnmount() {
); // fires immediately before component is unmounted
// from DOM (removed)
// Components and Props API - http://bit.ly/react-props }
// CodePen Demo: http://bit.ly/react-simple }
// CodePen Demo: http://bit.ly/react-es6-class

Created with ♥ www.gomycode.co