{"id":12322,"date":"2022-08-02T11:56:48","date_gmt":"2022-08-02T11:56:48","guid":{"rendered":"https:\/\/ui-lib.com\/blog\/?p=12322"},"modified":"2023-10-30T15:25:24","modified_gmt":"2023-10-30T15:25:24","slug":"reactjs-cheatsheet","status":"publish","type":"post","link":"https:\/\/ui-lib.com\/blog\/reactjs-cheatsheet\/","title":{"rendered":"Reactjs cheatsheet of 2023"},"content":{"rendered":"\n

Coding Cheat Sheets for programmers are useful to have besides. These often help us to remember various code syntax, and shortcuts and see different concepts visually. Now, ReactJS is one of the most popular frameworks for front-end development, and as it is a huge programming framework, you can’t always memorize every bit of it (especially if you’re new to this field). For that reason, we have carefully created an Ultimate Reactjs Cheatsheet<\/strong> for you to have a smooth experience while coding with Reactjs.<\/p>\n\n\n\n

What is ReactJS?<\/h2>\n\n\n\n

JavaScript or JS is a common term amongst web developers. It is a scripting language that is highly used to build UI elements that make a website more assertive, responsive, and interactive. But building a functional reactive UI element that gains an appreciable user experience may seem very complex and time-consuming. That’s where Reactjs enters the game.<\/p>\n\n\n\n

React is a front-end JavaScript library that helps us create UI components without hassle. These components are also reusable so sometimes if we are lucky enough we may not need to write code at all. It is a UI Component Library that only works in our application’s view layer.<\/p>\n\n\n\n

ReactJS Cheatsheet<\/h2>\n\n\n\n

Here, you will find the ultimate Reactjs cheatsheet for 2022.<\/p>\n\n\n\n

\"reactjs<\/figure><\/div>\n\n\n\n

<\/a>New Features<\/h2>\n\n\n\n

<\/a><\/h3>\n\n\n\n

Automatic Batching<\/h3>\n\n\n
\n\/\/ Before: only React events were batched.\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \/\/ React will render twice, once for each state update (no batching)\n}, 1000);\n\n\/\/ After: updates inside of timeouts, promises,\n\/\/ native event handlers or any other event are batched.\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \/\/ React will only re-render once at the end (that's batching!)\n}, 1000);\n<\/pre><\/div>\n\n\n
Details<\/a><\/strong><\/p>\n\n\n\n
Returning Multiple Elements<\/h3>\n\n\n\n
You can return multiple elements as arrays or fragments.<\/p>\n\n\n\n
<\/a>Arrays<\/h4>\n\n\n
\nrender () {\n  \/\/ Don't forget the keys!\n  return [\n    &lt;li key="A">First item&lt;\/li>,\n    &lt;li key="B">Second item&lt;\/li>\n  ]\n}\n<\/pre><\/div>\n\n\n
<\/a>Fragments<\/h4>\n\n\n
\nrender () {\n  \/\/ Fragments don't require keys!\n  return (\n    &lt;Fragment>\n      &lt;li>First item&lt;\/li>\n      &lt;li>Second item&lt;\/li>\n    &lt;\/Fragment>\n  )\n}\n<\/pre><\/div>\n\n\n
<\/a>Returning Strings<\/h3>\n\n\n
\nrender() {\n  return 'Look ma, no spans!';\n}\n<\/pre><\/div>\n\n\n
You can return just a string.<\/p>\n\n\n\n
Fragments and Strings<\/strong><\/a><\/p>\n\n\n\n
<\/a>Errors<\/h3>\n\n\n
\nclass MyComponent extends Component {\n  \u00b7\u00b7\u00b7\n  componentDidCatch (error, info) {\n    this.setState({ error })\n  }\n}\n<\/pre><\/div>\n\n\n
Catch errors via componentDidCatch<\/code>. (React 16+)<\/p>\n\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>Portals<\/h3>\n\n\n
\nrender () {\n  return React.createPortal(\n    this.props.children,\n    document.getElementById('menu')\n  )\n}\n<\/pre><\/div>\n\n\n
This renders this.props.children<\/code> into any location in the DOM.<\/p>\n\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>Hydration<\/h3>\n\n\n
\nconst el = document.getElementById('app');\nReactDOM.hydrate(&lt;App \/>, el);\n<\/pre><\/div>\n\n\n
Use ReactDOM.hydrate<\/code> instead of using ReactDOM.render<\/code> if you’re rendering over the output of ReactDOMServer<\/a>.<\/p>\n\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
Hooks<\/h2>\n\n\n\n
<\/a><\/h3>\n\n\n\n
State Hook<\/h3>\n\n\n
\nimport React, { useState } from 'react';\n\nfunction Example() {\n  \/\/ Declare a new state variable, which we'll call "count"\n  const [count, setCount] = useState(0);\n\n  return (\n    &lt;div>\n      &lt;p>You clicked {count} times&lt;\/p>\n      &lt;button onClick={() => setCount(count + 1)}>Click me&lt;\/button>\n    &lt;\/div>\n  );\n}\n<\/pre><\/div>\n\n\n
Details<\/strong><\/a><\/a><\/p>\n\n\n\n
Declaring Multiple State Variables<\/h3>\n\n\n
\nfunction ExampleWithManyStates() {\n  \/\/ Declare multiple state variables!\n  const [age, setAge] = useState(42);\n  const [fruit, setFruit] = useState('banana');\n  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);\n  \/\/ ...\n}\n<\/pre><\/div>\n\n\n
<\/a>Effect Hook<\/h3>\n\n\n
\nimport React, { useState, useEffect } from 'react';\n\nfunction Example() {\n  const [count, setCount] = useState(0);\n\n  \/\/ Similar to componentDidMount and componentDidUpdate:\n  useEffect(() => {\n    \/\/ Update the document title using the browser API\n    document.title = `You clicked ${count} times`;\n  }, [count]);\n\n  return (\n    &lt;div>\n      &lt;p>You clicked {count} times&lt;\/p>\n      &lt;button onClick={() => setCount(count + 1)}>Click me&lt;\/button>\n    &lt;\/div>\n  );\n}\n<\/pre><\/div>\n\n\n
Details<\/a><\/strong><\/a><\/p>\n\n\n\n
Building Your Hooks<\/h3>\n\n\n\n
<\/a><\/h4>\n\n\n\n
Define FriendStatus<\/h4>\n\n\n
\nimport React, { useState, useEffect } from 'react';\n\nfunction FriendStatus(props) {\n  const [isOnline, setIsOnline] = useState(null);\n\n  useEffect(() => {\n    function handleStatusChange(status) {\n      setIsOnline(status.isOnline);\n    }\n\n    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);\n    return () => {\n      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);\n    };\n  }, [props.friend.id]);\n\n  if (isOnline === null) {\n    return 'Loading...';\n  }\n  return isOnline ? 'Online' : 'Offline';\n}\n<\/pre><\/div>\n\n\n
<\/a>Use FriendStatus<\/h4>\n\n\n
\nfunction FriendStatus(props) {\n  const isOnline = useFriendStatus(props.friend.id);\n\n  if (isOnline === null) {\n    return 'Loading...';\n  }\n  return isOnline ? 'Online' : 'Offline';\n}\n<\/pre><\/div>\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
Components<\/h2>\n\n\n\n
<\/a><\/h3>\n\n\n\n
Components<\/h3>\n\n\n
\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n<\/pre><\/div>\n\n
\nclass Hello extends React.Component {\n  render() {\n    return &lt;div className="message-box">Hello {this.props.name}&lt;\/div>;\n  }\n}\n<\/pre><\/div>\n\n
\nconst el = document.body;\nReactDOM.render(&lt;Hello name="John" \/>, el);\n<\/pre><\/div>\n\n\n
Use the React.js jsfiddle<\/a> or the unofficial jsbin<\/a> to start hacking. <\/p>\n\n\n\n
<\/a>Import Multiple Exports<\/h3>\n\n\n
\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\n<\/pre><\/div>\n\n
\nclass Hello extends Component {\n  ...\n}\n<\/pre><\/div>\n\n\n
<\/a>Properties<\/h3>\n\n\n
\n&lt;video fullscreen="{true}" autoplay="{false}" \/>\n\n<\/pre><\/div>\n\n
\nrender () {\n  this.props.fullscreen\n  const { fullscreen, autoplay } = this.props\n  \u00b7\u00b7\u00b7\n}\n<\/pre><\/div>\n\n\n
Use this.props<\/code> to access properties passed to the component.<\/p>\n\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>States<\/h3>\n\n\n
\nconstructor(props) {\n  super(props)\n  this.state = { username: undefined }\n}\n<\/pre><\/div>\n\n
\nthis.setState({ username: 'rstacruz' });\n\n<\/pre><\/div>\n\n
\nrender () {\n  this.state.username\n  const { username } = this.state\n  \u00b7\u00b7\u00b7\n}\n<\/pre><\/div>\n\n\n
Use states (this.state<\/code>) to manage dynamic data.<\/p>\n\n\n\n
With Babel<\/a>, you can use proposal-class-fields<\/a> and get rid of constructor<\/p>\n\n\n
\nclass Hello extends Component {\n  state = { username: undefined };\n  ...\n}\n<\/pre><\/div>\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>Nesting<\/h3>\n\n\n
\nclass Info extends Component {\n  render() {\n    const { avatar, username } = this.props;\n\n    return (\n      &lt;div>\n        &lt;UserAvatar src={avatar} \/>\n        &lt;UserProfile username={username} \/>\n      &lt;\/div>\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
Now, fragments can be used to return multiple children without adding extra wrapping nodes to the DOM.<\/p>\n\n\n
\nimport React, { Component, Fragment } from 'react';\n\nclass Info extends Component {\n  render() {\n    const { avatar, username } = this.props;\n\n    return (\n      &lt;Fragment>\n        &lt;UserAvatar src={avatar} \/>\n        &lt;UserProfile username={username} \/>\n      &lt;\/Fragment>\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>Children<\/h3>\n\n\n
\n&lt;AlertBox>\n  &lt;h1>You have pending notifications&lt;\/h1>\n&lt;\/AlertBox>\n<\/pre><\/div>\n\n
\nclass AlertBox extends Component {\n  render() {\n    return &lt;div className="alert-box">{this.props.children}&lt;\/div>;\n  }\n}\n<\/pre><\/div>\n\n\n
Children are passed as the children<\/code> property.<\/p>\n\n\n\n
<\/a>Defaults<\/h2>\n\n\n\n
<\/a><\/h3>\n\n\n\n
Setting Default Props<\/h3>\n\n\n
\nHello.defaultProps = {\n  color: 'blue',\n};\n<\/pre><\/div>\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>Setting Default State<\/h3>\n\n\n
\nclass Hello extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { visible: true };\n  }\n}\n<\/pre><\/div>\n\n\n
Set the default state in the constructor()<\/code>.<\/p>\n\n\n\n
And without constructor using Babel<\/a> with proposal-class-fields<\/a>.<\/p>\n\n\n
\nclass Hello extends Component {\n  state = { visible: true };\n}\n<\/pre><\/div>\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>Other Components<\/h2>\n\n\n\n
<\/a><\/h3>\n\n\n\n
Functional components<\/h3>\n\n\n
\nfunction MyComponent({ name }) {\n  return &lt;div className="message-box">Hello {name}&lt;\/div>;\n}\n<\/pre><\/div>\n\n\n
Functional components have no state. Also, their props<\/code> are passed as the first parameter to a function.<\/p>\n\n\n\n
Function and Class Components<\/strong><\/a><\/p>\n\n\n\n
<\/a>Pure components<\/h3>\n\n\n
\nimport React, {PureComponent} from 'react'\n\nclass MessageBox extends PureComponent {\n  \u00b7\u00b7\u00b7\n}\n<\/pre><\/div>\n\n\n
Performance-optimized version of React.Component<\/code>. Doesn’t rerender if props\/state hasn’t changed.<\/p>\n\n\n\n
Pure Components<\/strong><\/a><\/p>\n\n\n\n
<\/a>Component API<\/h3>\n\n\n
\nthis.forceUpdate();\n<\/pre><\/div>\n\n
\nthis.setState({ ... })\nthis.setState(state => { ... })\n<\/pre><\/div>\n\n
\nthis.state;\nthis.props;\n<\/pre><\/div>\n\n\n
These methods and properties are available for Component<\/code> instances.<\/p>\n\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
DOM Nodes<\/h2>\n\n\n\n
<\/a>References<\/h3>\n\n\n
\nclass MyComponent extends Component {\n  render() {\n    return (\n      &lt;div>\n        &lt;input ref={(el) => (this.input = el)} \/>\n      &lt;\/div>\n    );\n  }\n\n  componentDidMount() {\n    this.input.focus();\n  }\n}\n<\/pre><\/div>\n\n\n
Allows access to DOM nodes.<\/p>\n\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>DOM Events<\/h3>\n\n\n
\nclass MyComponent extends Component {\n  render() {\n    &lt;input type="text" value={this.state.value} onChange={(event) => this.onChange(event)} \/>;\n  }\n\n  onChange(event) {\n    this.setState({ value: event.target.value });\n  }\n}\n<\/pre><\/div>\n\n\n
Pass functions to attributes like onChange<\/code>.<\/p>\n\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>Other Features<\/h2>\n\n\n\n
<\/a>Transferring Props<\/h3>\n\n\n
\n&lt;VideoPlayer src="video.mp4" \/>\n<\/pre><\/div>\n\n
\nclass VideoPlayer extends Component {\n  render() {\n    return &lt;VideoEmbed {...this.props} \/>;\n  }\n}\n<\/pre><\/div>\n\n\n
Propagates src=\"...\"<\/code> down to the sub-component.<\/p>\n\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>Top-level API<\/h3>\n\n\n
\nReact.createClass({ ... })\nReact.isValidElement(c)\n<\/pre><\/div>\n\n
\nReactDOM.render(&lt;Component \/>, domnode, [callback]);\nReactDOM.unmountComponentAtNode(domnode);\n<\/pre><\/div>\n\n
\nReactDOMServer.renderToString(&lt;Component \/>);\nReactDOMServer.renderToStaticMarkup(&lt;Component \/>);\n<\/pre><\/div>\n\n\n
There are more, but these are the most common.<\/p>\n\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>JSX patterns<\/h2>\n\n\n\n
<\/a>Style Shorthand<\/h3>\n\n\n
\nconst style = { height: 10 };\nreturn &lt;div style={style}>&lt;\/div>;\n<\/pre><\/div>\n\n
\nreturn &lt;div style={{ margin: 0, padding: 0 }}>&lt;\/div>;\n<\/pre><\/div>\n\n\n
Inline Styles<\/strong><\/a><\/p>\n\n\n\n
<\/a>Inner HTML<\/h3>\n\n\n
\nfunction markdownify() {\n  return '&lt;p>...&lt;\/p>';\n}\n&lt;div dangerouslySetInnerHTML={{ __html: markdownify() }} \/>;\n<\/pre><\/div>\n\n\n
Details<\/strong><\/a><\/p>\n\n\n\n
<\/a>Lists<\/h3>\n\n\n
\nclass TodoList extends Component {\n  render() {\n    const { items } = this.props;\n\n    return (\n      &lt;ul>\n        {items.map((item) => (\n          &lt;TodoItem item={item} key={item.key} \/>\n        ))}\n      &lt;\/ul>\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
Always supply a key<\/code> property.<\/p>\n\n\n\n
<\/a>Conditionals<\/h3>\n\n\n
\n&lt;Fragment>{showMyComponent ? &lt;MyComponent \/> : &lt;OtherComponent \/>}&lt;\/Fragment>\n<\/pre><\/div>\n\n\n
<\/a>Short-Circuit Evaluation<\/h3>\n\n\n
\n&lt;Fragment>\n  {showPopup &amp;&amp; &lt;Popup \/>}\n  ...\n&lt;\/Fragment>\n<\/pre><\/div>\n\n\n
<\/a>Property Validation<\/h2>\n\n\n\n
<\/a><\/h3>\n\n\n\n
PropTypes<\/h3>\n\n\n
\nimport PropTypes from 'prop-types';\n<\/pre><\/div>\n\n\n
Typechecking with PropTypes<\/strong><\/a><\/p>\n\n\n\n
Basic Types<\/h3>\n\n\n
\nMyComponent.propTypes = {\n  email: PropTypes.string,\n  seats: PropTypes.number,\n  callback: PropTypes.func,\n  isClosed: PropTypes.bool,\n  any: PropTypes.any,\n};\n<\/pre><\/div>\n\n\n
<\/a>Required Types<\/h3>\n\n\n
\nMyCo.propTypes = {\n  name: PropTypes.string.isRequired,\n};\n<\/pre><\/div>\n\n\n
<\/a>Elements<\/h3>\n\n\n
\nMyCo.propTypes = {\n  \/\/ React element\n  element: PropTypes.element,\n\n  \/\/ num, string, element, or an array of those\n  node: PropTypes.node,\n};\n<\/pre><\/div>\n\n\n
<\/a>Enumerables (oneOf)<\/h3>\n\n\n
\nMyCo.propTypes = {\n  direction: PropTypes.oneOf(['left', 'right']),\n};\n<\/pre><\/div>\n\n\n
<\/a>Arrays and Objects<\/h3>\n\n\n
\nMyCo.propTypes = {\n  list: PropTypes.array,\n  ages: PropTypes.arrayOf(PropTypes.number),\n  user: PropTypes.object,\n  user: PropTypes.objectOf(PropTypes.number),\n  message: PropTypes.instanceOf(Message),\n};\n<\/pre><\/div>\n\n
\nMyCo.propTypes = {\n  user: PropTypes.shape({\n    name: PropTypes.string,\n    age: PropTypes.number,\n  }),\n};\n<\/pre><\/div>\n\n\n
Use .array[Of]<\/code>, .object[Of]<\/code>, .instanceOf<\/code>, .shape<\/code>.<\/p>\n\n\n\n
<\/a>Custom Validation<\/h3>\n\n\n
\nMyCo.propTypes = {\n  customProp: (props, key, componentName) => {\n    if (!\/matchme\/.test(props[key])) {\n      return new Error('Validation failed!');\n    }\n  },\n};\n<\/pre><\/div>\n\n\n
Wrapping Up<\/h3>\n\n\n\n
Your search for Reactjs Cheatsheet appears to have ended. Coding with React and remembering all of its code snippets is a long period of work. It will take time, but sticking to its guidelines, cheatsheets, and roadmaps will help you stay ahead of the game in the long run.<\/p>\n\n\n\n
Similar ReactJS Blogs from UI-Lib <\/span><\/h3>\n\n\n\n