Scribd Logo
Upload

Welcome to Scribd!

  • 188 views

    React Cheat Sheet

    Uploaded by

    chayma taba
    This document provides a cheat sheet for React, a JavaScript library for building user interfaces. It summarizes key aspects of React including: rendering a "Hello World" component into the DOM, using ES6 classes for local component state and lifecycle hooks, conditional rendering of elements and CSS classes, core React concepts like stateless components and components that receive props, and React component lifecycle methods. The cheat sheet also provides links to additional React resources and tools.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    React Cheat Sheet

    Uploaded by

    chayma taba
    188 views1 page
    This document provides a cheat sheet for React, a JavaScript library for building user interfaces. It summarizes key aspects of React including: rendering a "Hello World" component into the DOM, using ES6 classes for local component state and lifecycle hooks, conditional rendering of elements and CSS classes, core React concepts like stateless components and components that receive props, and React component lifecycle methods. The cheat sheet also provides links to additional React resources and tools.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides a cheat sheet for React, a JavaScript library for building user interfaces. It summarizes key aspects of React including: rendering a "Hello World" component into the DOM, using ES6 classes for local component state and lifecycle hooks, conditional rendering of elements and CSS classes, core React concepts like stateless components and components that receive props, and React component lifecycle methods. The cheat sheet also provides links to additional React resources and tools.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    188 views1 page

    React Cheat Sheet

    Uploaded by

    chayma taba
    This document provides a cheat sheet for React, a JavaScript library for building user interfaces. It summarizes key aspects of React including: rendering a "Hello World" component into the DOM, using ES6 classes for local component state and lifecycle hooks, conditional rendering of elements and CSS classes, core React concepts like stateless components and components that receive props, and React component lifecycle methods. The cheat sheet also provides links to additional React resources and tools.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 1

    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

    You might also like