React Cheat Sheet

Commands for starting a new React Project

Some alternatives:

Writing Components

Class Component

class MyComponent extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>Hello World</h1>
}
}

Functional Component

const MyComponent = (props) => <h1>Hello World</h1>//////////////////////////////////////////const MyComponent = function(props){
return <h1>Hello World</h1>
}
////////////////////////////////////////////function MyComponent(props){
return <h1> Hello World <h1>
}

Using Props

Class Components

;<MyComponent myProp="Hello World" />/////////////////////////////////////////////class MyComponent extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>{this.props.myProp}</h1>
}
}

Function Components

;<MyComponent myProp="Hello World" />/////////////////////////////////////////////const MyComponent = props => <h1>{props.myProp}</h1>

Using State

Class Components

class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
count: 0,
}
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button
onClick={event => this.setState({ count: this.state.count + 1 })}
>
Click Me
</button>
</div>
)
}
}

Function Components

const MyComponent = props => {
const [count, setCount] = React.useState(0)
return (
<div>
<h1>{count}</h1>
<button onClick={event => setCount(count + 1)}>Click Me</button>
</div>
)
}

Lifecycle

Class Components

class MyComponent extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>{this.props.myProp}</h1>
}
componentDidMount() {
console.log("I happen when the component first mounts")
}
componentDidUpdate() {
console.log("I happen when the component updates")
}
componentWillUnmount() {
console.log("I happen before the component is removed")
}
}

Function Components

const MyComponent = props => {
React.useEffect(() => {
console.log(
"I happen when the component first mounts or when any value in the dependency array changes"
)
return () => console.log("I run when the component is removed")
}, [dependency1, dependency2])
return <h1> Hello World </h1>
}

Handling Forms

Class Components

class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state({
textfield: ""
})
this.handleChange.bind(this)
this.handleSubmit.bind(this)
}
handleChange(event){
this.setState({[current.target.name]: current.target.value})
}
handleSubmit(event){
console.log("lets take a look at the form data in our state")
console.log(this.state)
}
render() {
return (<form onSubmit={this.handleSubmit}>
<input type="text" name="textfield" value={this.state.textfield} onChange={this.handleChange}>
<input type="submit" value="submit">
</form>)
}
}

Function Components

const MyComponent = props => {  const [formData, setFormData] = React.useState({
textfield: ""
})
const handleChange = (event) => {
setState({[current.target.name]: current.target.value})
}
const handleSubmit = (event) => {
console.log("lets take a look at the form data in our state")
console.log(formData)
}
return (<form onSubmit={handleSubmit}>
<input type="text" name="textfield" value={this.state.textfield} onChange={handleChange}>
<input type="submit" value="submit">
</form>)
}

Rules of JSX

React Function Component Hooks

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store