Scribd Logo
Upload

Welcome to Scribd!

  • 16K views

    React - Js Cheat Sheet: Quick Learning

    Uploaded by

    Chepuri Sravan Kumar
    This document provides a cheat sheet on React.js concepts and components. It includes: 1) How to import React and create a basic component with state. 2) Details on using properties, children, state, nesting components, default props and states, functional components, and the React component API. 3) An introduction to React hooks for managing state, including useState, declaring multiple state variables, and setting default states.

    Copyright:

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

    React - Js Cheat Sheet: Quick Learning

    Uploaded by

    Chepuri Sravan Kumar
    16K views16 pages
    This document provides a cheat sheet on React.js concepts and components. It includes: 1) How to import React and create a basic component with state. 2) Details on using properties, children, state, nesting components, default props and states, functional components, and the React component API. 3) An introduction to React hooks for managing state, including useState, declaring multiple state variables, and setting default states.

    Original Description:

    Original Title

    React Js

    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 on React.js concepts and components. It includes: 1) How to import React and create a basic component with state. 2) Details on using properties, children, state, nesting components, default props and states, functional components, and the React component API. 3) An introduction to React hooks for managing state, including useState, declaring multiple state variables, and setting default states.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    16K views16 pages

    React - Js Cheat Sheet: Quick Learning

    Uploaded by

    Chepuri Sravan Kumar
    This document provides a cheat sheet on React.js concepts and components. It includes: 1) How to import React and create a basic component with state. 2) Details on using properties, children, state, nesting components, default props and states, functional components, and the React component API. 3) An introduction to React hooks for managing state, including useState, declaring multiple state variables, and setting default states.

    Copyright:

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

    React.

    js Cheat sheet

    Quick Learning
    Components
    import React from 'react’
    import ReactDOM from 'react-dom'

    class Hello extends React.Component {


    render ()
    { return <div className='message-box'> Hello {this.props.name}
    </div> }
    }

    const el = document.body
    const el = document.body ReactDOM.render(<Hello name='John' />, el)

    Use the React.js jsfiddle to start hacking. (or the unofficial jsbin)

    Official website: www.mcqstop.com


    Import Multiple Exports
    import React, {Component} from 'react’
    import ReactDOM from 'react-dom'

    class Hello extends Component


    {
    ...
    }

    Official website: www.mcqstop.com


    Properties
    <Video fullscreen={true} autoplay={false} />

    render () {
    this.props.fullscreen const
    { fullscreen, autoplay } = this.props
    ···
    }

    Use this.Props to Access Properties Passed to the compentent

    Official website: www.mcqstop.com


    Children
    <AlertBox> <h1>You have pending notifications</h1> </AlertBox>

    class AlertBox extends Component {


    render () {
    return <div className='alert-box’>
    {
    this.props.children}
    </div>
    }
    }

    Children are passed as Child Property

    Official website: www.mcqstop.com


    States
    constructor(props)
    {
    super(props)
    this.state = { username: undefined
    }
    }
    this.setState({ username: 'rstacruz’ })

    render ()
    { this.state.username const { username } = this.state ··· }

    Use this.State to manage Dynamic Data With Babel you can use proposal-
    class-fields and get rid of constructor

    class Hello extends Componen


    t { state = { username: undefined }; ... }
    Nesting
    class Info extends Component {
    render ()

    { const { avatar, username } = this.props return


    <div>

    <UserAvatar src={avatar} />

    <UserProfile username={username} />


    </div>
    }
    }

    As of React v16.2.0, fragments can be used to return multiple children


    without adding extra wrapping nodes to the DOM.

    Official website: www.mcqstop.com


    States
    constructor(props)
    {
    super(props)
    this.state = { username: undefined
    }
    }
    this.setState({ username: 'rstacruz’ })

    render ()
    { this.state.username const { username } = this.state ··· }

    Use this.State to manage Dynamic Data With Babel you can use proposal-
    class-fields and get rid of constructor

    class Hello extends Componen


    t { state = { username: undefined }; ... }
    Official website: www.mcqstop.com
    Nesting
    import React,
    { Component,
    Fragment
    } from 'react’
    class Info extends Component {
    render () {
    const { avatar, username } = this.props
    return
    ( <Fragment>
    <UserAvatar src={avatar} />
    <UserProfile username={username} />
    </Fragment> )
    }
    }

    Nest components to separate concerns.


    Official website: www.mcqstop.com
    Setting Default Props
    Hello.defaultProps = { color: 'blue' }

    See: defaultProps

    Official website: www.mcqstop.com


    Setting Default States
    class Hello
    extends Component
    { constructor (props)
    { super(props) this.state = { visible: true }
    }
    }

    See: defaultProps

    Official website: www.mcqstop.com


    Functional Components
    function MyComponent
    ({ name })
    {
    return
    <div className='message-box'> Hello {name}
    </div>
    }
    Functional components have no state. Also their props are passed as the
    First Parameter to the Function.

    Official website: www.mcqstop.com


    Pure Components
    import React, {PureComponent} from 'react’
    class MessageBox
    extends PureComponent
    {
    ···
    }

    Official website: www.mcqstop.com


    Components API
    this.forceUpdate()

    this.setState({ ... })

    this.setState(state => { ... })

    this.state this.props

    Official website: www.mcqstop.com


    State Hooks
    import React, { useState } from 'react’;
    function Example()
    { // Declare a new state variable, which we'll call "count" const [count,
    setCount] = useState(0);
    return
    (
    <div> <p>You clicked {count} times</p> <button onClick={() =>
    setCount(count + 1)}> Click me </button> </div>
    );
    }

    Official website: www.mcqstop.com


    Declare Multiple State variables
    function ExampleWithManyStates()
    { // Declare multiple state variables!
    const [age, setAge] = useState(42);
    const [fruit, setFruit] = useState('banana’);
    const [todos, setTodos] = useState([{ text: 'Learn Hooks’ }
    ]);
    //
    ...
    }

    You might also like