React Cheat Sheet (Javascript)
ADVERTISEMENT
1React Cheat Sheet
DEMO: https://s.codepen.io/ericnakagawa/debug/ALxakj
GITHUB:
DOCUMENTATION: https://facebook.github.io/react/docs/
A javascript library for building user interfaces.
CDN:
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() {
:
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:
}
componentWillMount() {
Tools and Resources
// fires immediately before the initial render
// Component that receives props
}
const
Greetings
= (props) => {
// Create React App
componentDidMount() {
return
<p>You will love it {props.name}.</p>
// fires immediately after the initial render
}
// React Dev Tools for Chrome
}
componentWillReceiveProps() {
// Component must only return ONE element (eg. DIV)
// React Code Snippets for Visual Studio Code
const
Intro
= () => {
// fires when component is receiving new props
return
(
}
// Babel for Sublime Text 3
shouldComponentUpdate() {
<div>
// fires before rendering with new props or state
<Headline
/>
}
<p>Welcome to the React world!</p>
componentWillUpdate() {
<Greetings
name=”Petr” />
Free Online Course
// fires immediately before rendering
</div>
// with new props or state
React.js 101
)
}
}
componentDidUpdate() {
The Quickest Way To Get
// fires immediately after rendering with new P or S
ReactDOM.render(
Started With React.js
}
<Intro
/>,
document.getElementById('root')
componentWillUnmount() {
);
// fires immediately before component is unmounted
// from DOM (removed)
}
// Components and Props API -
Coming Soon!
}
// CodePen Demo:
// CodePen Demo:
Created with ♥ by Petr Tichy, happy coding! v0.8
https://
ADVERTISEMENT
0 votes
Related Articles
Related forms
Related Categories
Parent category: Education