ReactJs Cheatsheet

In this ReactJS Cheatsheet, you can review commands for creating react app, import, components, Props, Hooks, Conditional Rendering, and forms.

What is ReactJS?

Table of Contents

React. js is an open-source JavaScript library that is used for u003cstrongu003ebuilding user interfaces specifically for single-page applicationsu003c/strongu003e. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

Create React App

npx create-react-app my-app

Import

import React from 'react'
import React, {Component} from 'react'; //multiple imports
Code language: JavaScript (javascript)

Components

Class component

class Greetings extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
Code language: JavaScript (javascript)

Functional component

function Greetings(props) {
  return <h1>Hello, {props.name}</h1>;
}
Code language: JavaScript (javascript)

Props

function Greetings(props) {
  return <h1>Hello {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Greetings name="foo" />
      <Greetings name="bar" />
    </div>
  );
}
Code language: JavaScript (javascript)

Note: Props are read-only

Render

render() {
  return <div />;
}
Code language: JavaScript (javascript)

Hooks

Below is a sample code, which increases the count value when you click + and decreases the count value when you click -.

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <h1>{count}</h1>
      <button onClick={()=>setCount(count-1)}>-</button>
      <button onClick={()=>setCount(count+1)}>+</button>
    </div>
  );
}

export default App;
Code language: JavaScript (javascript)

Conditional Rendering

Ternary Operator

 <button type="submit">{isloggedin ? "Login" : "Register"}</button>
Code language: HTML, XML (xml)

Usage of &&

&& also used to execute a block of code only if condition is true.

      {!isloggedin && (
            <button type="submit">{isloggedin ? "Login" : "Register"}</button>
      )}
Code language: HTML, XML (xml)

Forms

Below is example of a simple form which displays the given name along with Hello. For example, if you give Foo in the input field, then when you click submit button it should display Hello Foo.

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [displayName, setDisplayName] = useState("");

  function handleClick(event) {
    setDisplayName(name);
    event.preventDefault();
  }

  return (
    <div className="container">
      <h1>Hello {displayName}</h1>
      <form>
        <input
          placeholder="Enter your name?"
          value={name}
          onChange={(event)=>setName(event.target.value)}
        />
        <button type="submit" onClick={handleClick}>Submit</button>
      </form>
    </div>
  );
}

export default App;
Code language: JavaScript (javascript)

Note

When you click a submit button, the usually page gets refreshed. You can prevent this by preventing the default settings.

event.preventDefault();
Code language: CSS (css)

Check out ReactJS Roadmap For Developers by ThemeSelection.

Hope you like this cheatSheet on ReactJs.

Thank you for reading, If you have reached it so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback !

cheatsheet