React cheat sheet

create-react-app Stateless component

create-react-app YOUR_APP_NAME import React from 'react'

const YourComponent = () => <div>aaa</div>

export default YourComponent

Class component Properties in stateless component

import React from 'react' const YourComponent = ({ propExample1,
example2 }) => (
class YourComponent extends <div>
React.Component { <h1>properties from parent
render() { component:</h1>
return <div>aaa</div> <ul>
} <li>{propExample1}</li>
} <li>{example2}</li>
</ul>
export default YourComponent </div>
)

// <YourComponent propExample1="aaa"
example2="bbb" />

Properties in class component Children

class YourComponent extends const Component1 = (props) => (
React.Component { <div>{props.children}</div>
render() { )
return (
<div> const Component2 = () => (
<h1> <Component1>
properties from parent <h1>Component 1</h1>
component: </Component1>
</h1> )
<ul>

<li>{this.props.propExample1}</li>
<li>{this.props.example2}
</li>
</ul>
</div>
)
}
}
State React Router
class CountClicks extends React.Component { import {
state = { BrowserRouter,
clicks: 0 Route
} } from 'react-router-dom'

onButtonClick = () => { const Hello = () => <h1>Hello world!</h1>

this.setState(prevState => ({
clicks: prevState.clicks + 1 const App = () => (
})) <BrowserRouter>
} <div>
<Route path="/hello"
render() { component={Hello}/>
return ( </div>
<div> </BrowserRouter>
<button )
onClick={this.onButtonClick}>
Click me // open: http://localhost:3000/hello
</button>
<span>
The button clicked
{this.state.clicks} times.
</span>
</div>
)
}
}

react-redux provider react-redux connect

import React from 'react' import { connect } from 'react-redux'
import { render } from 'react-dom'
import { Provider } from 'react-redux' YourComponent = connect(
import { createStore } from 'redux' mapStateToProps,
import todoApp from './reducers' mapDispatchToProps
import App from './components/App' )(YourComponent)

const store = createStore(todoApp) export default YourComponent

render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)

useState hook Ref

import React, { useState } from 'react' class AutoFocusTextInput extends
React.Component {
function Example() { constructor(props) {
const [count, setCount] = useState(0) super(props);
this.textInput = React.createRef();
return ( }
<div>
<p>You clicked {count} times</p> componentDidMount() {
<button onClick={() => this.textInput.current.focus();
setCount(count + 1)}> }
Click here to increase the
counter. render() {
</button> return (
</div> <input ref={this.textInput} />
) );
} }
}

Higher Order Component Render Props

import React from 'react' import React from 'react'
import Loading from '../components/Loading'
const MOBILE_VIEW_WIDTH_THRESHOLD =
const withLoading = WrappedComponent => { 600
return (props = {}) => {
if (props.isLoading) { class MediaQuery {
return <Loading /> state = {
} shouldShowMobileView: false
return <WrappedComponent {...props} / }
>
} componentDidMount() {
} addEventListener('resize',
this.updateResizeStatus)
export default withLoading }

// -------- componentWillUnmount() {
removeEventListener('resize',
const MyComponent = ({}) => <div /> // ... this.updateResizeStatus)
const WithLoadingComponent = }
withLoading(MyComponent)
updateResizeStatus() {
if (screen.width <=
MOBILE_VIEW_WIDTH_THRESHOLD) {
this.setState({
shouldShowMobileView: true
})
}
}

render() {
return this.props.children(
this.state.shouldShowMobileView
)
}
 }

export default MediaQuery

// --------

import React from 'react'

import MobileView from '../components/
MobileView'
import DefaultView from '../components/
DefaultView'

const Screen = () => (

<MediaQuery>
{shouldShowMobileView =>
shouldShowMobileView ? (
<MobileView />
):(
<DefaultView />
)
}
</MediaQuery>
)

Copyright © 2018 - 2020

www.developer-cheatsheets.com