Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
18K views

React - Js Cheat Sheet: Quick Learning

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.

Uploaded by

sdfsahd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18K views

React - Js Cheat Sheet: Quick Learning

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.

Uploaded by

sdfsahd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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