ReactJs Cheatsheet

Table of Contents

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

What is ReactJS?

Reactjs is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. 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

Components

Class component

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

Functional component

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

Props

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

function App() {
  return (
    <div>
      <Greetings name="foo" />
      <Greetings name="bar" />
    </div>
  );
}

Note: Props are read-only

Render

render() {
  return <div />;
}

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;

Conditional Rendering

Ternary Operator

 <button type="submit">{isloggedin ? "Login" : "Register"}</button>

Usage of &&

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

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;

Note

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

event.preventDefault();

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