Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 16, 2021 03:23 pm GMT

React (work in progress) Cheat sheet

I don't use React often and so whenever I need to do even the smallest thing in React, I have to check out the documentation, a tutorial, or post a question on a forum.

That's why I decided to do this memory aid and given that my memory is not that good I thought why not make a monstrous memory aid with all the concepts I know about React.

So I can read it from time to time and thereby strengthen my knowledge of React.

It will take couples of days to put all that together so every day I will post an updated Cheat Sheet version until the final version.

If you have ideas or recommendation do not hesitate and do so in the comments section.

React Cheat Sheet (draft day 2)

Create a React App

// Create a new appnpx create-react-app my-app-name// Run the created appcd my-app-nameyarn start// http://localhost:3000

First React functional Component

  • No need to import React from 'react' (since React 17)
  • Must have uppercase first letter
  • Must return JSX

(src/App.js)

// React componentfunction App(){  return <h1>Hello World</h1>} export default App;

How this component get render to the browser? The main project file is src/index.js and in that file there are instruction to render the component

ReactDOM.render(<App />, document.getElementById('root'))

The App component will then be rendered inside public/index.html 'root' div

Import Component

Component will be created in separate files. Each component need to be export and then import

function Greeting(){    return <h1>Hello World</h2>}export default Greeting

This component can then be import

import Greeting from './Gretting'function App(){    return <Greeting />}

or name export...

export function Greeting(){    return <h1>Hello World</h2>}

This component can then be import

import {Greeting} from './Gretting'

JSX Rules

Return a single element (only one parent element)

// not validreturn <h1>Hello world</h1><h2>Hi!</h2>// valid with fragment. return (    <>        <h1>Hello World</h1>        <h2>Hi!</h2>    </>)// Noted the parenthesis for multi-line formatting

Use className instead of class
Also all attribute name need to be camelCase

// not validreturn (    <div class="title">        Hello World    </div>)// validreturn (    <div className="title">    </div>)

Close every element

return (    <img src="http:example.com/image.jpg" />    <input type="text" name="first_name" />)

Nested Components

// Arrow function shorthand componentconst Person = () => <h1>Mike Taylor</h1>// Arrow function componentconst Message = () => {    return <h1>Hello</h1>}// Function componentfunction HelloWorld(){  return (      <>          <Message />          <Person />      </>  )} 

Component CSS

(src/App.css)

h1 {    color: red;}

(src/App.js)
Import the CSS file

import './App.css'function App(){  return <h1>Hello World</h1>} 

Inline CSS

function App(){  return <h1 style={{ color: 'red' }}>Hello World</h1>} 

Javascript in JSX

  • Enclose between {}
  • Must be an expression (return a value)
function App(){    const name = 'Mike'    return (      <>          <h1>Hello {name}</h1>          <p>{name === 'Mike' ? '(admin)': '(user)'}</p>      </>    )} 

Component Properties (Props)

function App()    return <Person name='Mike' age={29} />} const Person = (props) => {    return <h1>Name: {props.name}, Age: {props.age}</h1>}// or props object deconstructingconst Person = ({name, age}) => {    return <h1>Name: {name} Age: {age}</h1>}

Children Props (slot)

function App()    return (        <Person name='Mike' age={29}>            Hi, this is a welcome message        </Person>    )} const Person = (props) => {    return (        <h1>Name: {props.name}, Age: {props.age}</h1>        <p>{props.children}</p>    )}// or props object deconstructingconst Person = ({name, age, children}) => {    return (        <h1>Name: {name} Age: {age}</h1>        <p>{children}</p>    )}

List

const people = [  {id: 1, name: 'Mike', age: 29},  {id: 2, name: 'Peter', age: 24},  {id: 3, name: 'John', age: 39},]function App(){    return (        people.map(person => {            return <Person name={person.name} age={person.age}/>        })    )} const Person = (props) => {  return (      <h1>Name: {props.name}, Age: {props.age}</h1>  )}

List with key (for React internal reference)

function App(){    return (        people.map(person => {            return <Person key={person.id} name={person.name} age={person.age}/>        })     )} 

Props object deconstructing

function App(){  return people.map(person => <Person key={person.id} {...person} />)}const Person = (name, age) => {  return (      <h1>Name: {name}, Age: {age}</h1>  )} 

Click Event

const clickHandler = () => alert('Hello World')function App(){    return (        <>            <h1>Welcome to my app</h1>            <button onClick={clickHandler}>Say Hi</button>        </>     )} 

or inline...

function App(){    return (        <>            <h1>Welcome to my app</h1>            <button onClick={ () => alert('Hello World') }>Say Hi</button>        </>     )} 

To pass arguments we need to use arrow function

const clickHandler = (message) => alert(message)function App(){    return (        <>            <h1>Welcome to my app</h1>            <button onClick={() => clickHandler('Hello World')}>Say Hi</button>        </>     )} 

e for event arguments

const clickHandler = (e) => console.log(e.target)function App(){    return (        <>            <h1>Welcome to my app</h1>            <button onClick={() => clickHandler('Hello World')}>Say Hi</button>        </>     )} 

useState Hook

  • Hook always start with use prefix
  • Must be invoke in the component/function body
  • Declaration cannot be call conditionally
  • useState return an array of 2 [state value, set state function]
import React, {useState} from 'react';const DisplayTitle = () => {  const [title, setTitle] = useState('This is the Title')  const handleClick = () => setTitle('New Title')  return <>    <h2>{title}</h2>    <button type="button" className="btn" onClick={handleClick}>      Change Title    </button>  </>};export default DisplayTitle;

useState with object

const DisplayTitle = () => {  const [person, setPerson] = useState({name: 'Mike', age: 29})  const handleClick = () => setPerson({...person, age: 35})  return <>    <h2>{title}</h2>    <button type="button" className="btn" onClick={handleClick}>      Change Age    </button>  </>};

setState functional form

function Counter() {  const [count, setCount] = useState(0)  // Use a function to set State  const increase = () => setCount(() => count + 1)  return (    <>      <h1>Counter</h1>      <p>{count}</p>      <button onClick={increase} className='btn'> + </button>      <button onClick={() => setCount(() => count - 1)} className='btn'> - </button>    </>  )}

useEffect

By default useEffect run after every re-render

import React, { useState, useEffect } from 'react';function IncreaseValue() {    const [value, setValue] = useState(0)    useEffect(() => {        document.title = `New value: ${value}`     })    return <button onClick={() => setValue(value + 1)}>Increase</button>}

Conditional useEffect

Conditional need to be place inside useEffect function

useEffect(() => {    if (value > 0) {        document.title = `New value: ${value}`     }})

useEffect Dependency List

useEffect will run only if state is in the Dependency List.
If the list is empty [] the useEffect will only run on initial render.

useEffect(() => {    document.title = `New value: ${value}` }, [])// Noted the empty array. useEffect will then only run once on initial renderuseEffect(() => {    document.title = `New value: ${value}` }, [value])// Will run each time 'value' state change.

useEffect cleanup function

This useEffect return function is execute each time the component unmount. Think at this return function like a cleaning code when the component unmount.

useEffect(() =>  {     const timer = window.setInterval(() => {         setCount(count => count + 1)    }, 1000)    return () => clearInterval(timer)}, [])

Component multiple returns

function DisplayGreeting() {    const [name, setName] = useState('Mike')    if (name === 'Mike') {        return <h1>Hello admin {name}</h1>     }    return <h1>Hello user {name}</h1> }

Form

const UserForm = () => {  const [userName, setUserName] = useState('')  const handleSubmit = (e) => {    e.preventDefault()    console.log(userName)  }return (<>    <form onSubmit={handleSubmit}>      <input           value={userName}           onChange={(e) => setUserName(e.target.value)}           type="text" id="userName"           name="userName"      />       <button type="submit">Submit</button>    </form></>)};export default UserForm;

Conclusion

That's it for today. We still have a lot to do, so see you tomorrow... If you want to be sure to miss nothing click follow me!

I am new on twitter so if you want to make me happy
Follow me!: Follow @justericchapman


Original Link: https://dev.to/ericchapman/react-work-in-progress-cheat-sheet-13fb

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To