React.md

React cheat sheet PDF create-react-app create-react-app YOUR_APP_NAME Stateless component import React from 'react'

const YourComponent = () =>

aaa

export default YourComponent Class component import React from 'react'

class YourComponent extends React.Component { render() { return

aaa

} }

export default YourComponent Properties in stateless component const YourComponent = ({ propExample1, example2 }) => (

properties from parent component:

• {propExample1}
• {example2}

)

// Properties in class component class YourComponent extends React.Component { render() { return (

properties from parent component:

• {this.props.propExample1}
• {this.props.example2}

) } } Children const Component1 = (props) => (

{props.children}

)

const Component2 = () => (

Component 1

) Architecture In event handlersupdate the state React detects state changeand re-renders the relevant components UI State State class CountClicks extends React.Component { state = { clicks: 0 }

onButtonClick = () => { this.setState(prevState => ({ clicks: prevState.clicks + 1 })) }

render() { return (

Click me The button clicked {this.state.clicks} times.

) } } React Router React-Router Cheat Sheet import { BrowserRouter, Route } from 'react-router-dom'

const Hello = () =>

Hello world!

const App = () => (

)

// open: http://localhost:3000/hello react-redux provider Redux Cheat Sheet import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import { createStore } from 'redux' import todoApp from './reducers' import App from './components/App' ​ const store = createStore(todoApp) ​ render( , document.getElementById('root') ) react-redux connect Redux Cheat Sheet import { connect } from 'react-redux' ​ YourComponent = connect( mapStateToProps, mapDispatchToProps )(YourComponent) ​ export default YourComponent useState hook import React, { useState } from 'react'

function Example() { const [count, setCount] = useState(0)

return (

You clicked {count} times

<button onClick={() => setCount(count + 1)}> Click here to increase the counter.

) } Ref class AutoFocusTextInput extends React.Component { constructor(props) { super(props); this.textInput = React.createRef(); }

componentDidMount() { this.textInput.current.focus(); }

render() { return ( ); } }