Skip to content

Latest commit

 

History

History
377 lines (293 loc) · 12.2 KB

react.md

File metadata and controls

377 lines (293 loc) · 12.2 KB
layout title
../../layouts/CheatSheet.astro
ReactJS Cheatsheet

Synopsis

ReactJS is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Create React App

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

npx create-react-app my-app
cd my-app
npm start

React Components

function App() {
  return <div>Hello World</div>;
}

export default App;

React Props

function App() {
  return <User name="Dev" />;
}

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

React Children Props

function App() {
  return (
    <User>
      <h1>Hello, John Doe!</h1>
    </User>
  );
}

function User({ children }) {
  return children; // Hello, John Doe!
}

React Conditionals

function App() {
  const isAuthUser = useAuth();

  if (isAuthUser) {
    // if our user is authenticated, let them use the app
    return <AuthApp />;
  }

  // if user is not authenticated, show a different screen
  return <UnAuthApp />;
}

React Lists

Lists of React components can be output using the .map() function.

function SoccerPlayers() {
  const players = ["Messi", "Ronaldo", "Laspada"];

  return (
    <div>
      {players.map((playerName) => (
        <SoccerPlayer key={playerName} name={playerName} />
      ))}
    </div>
  );
}

React Context

React context allows us to pass data to our component tree without using props.

function App() {
  return <Body name="John Doe" />;
}

function Body({ name }) {
  return <Greeting name={name} />;
}

function Greeting({ name }) {
  return <h1>Welcome, {name}</h1>;
}

React Hooks

React hooks were introduced in React version 16.8 as a way to easily add reusable, stateful logic to React function components.

React useState Hooks

it allows us to use stateful values in function components.

import { useState } from "react";

function MyComponent() {
  const [stateValue, setStateValue] = useState(initialValue);
}

React useEffect Hooks

If we want to interact with the “outside world”, such as using an API, we use the useEffect hook.

import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    // perform side effect here
  }, []);
}

React useRef

It allows us to get direct access to a JSX element.

import { useRef } from "react";

function MyComponent() {
  const ref = useRef();

  return <div ref={ref} />;
}

useRef is a hook that lets you reference a value that’s not needed for rendering.

In this example when we click on the button, we focus and refer to the input.

import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputElement = useRef(null);

  const onButtonClick = () => {
    inputElement.current.focus();
  };

  return (
    <>
      <input ref={inputElement} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

React useContext

It provides an easier way of consuming context than using the standard Context.Consumer component.

The syntax involves passing the entire Context object that we want to consume into useContext. The returned value is the value passed down to Context.

import { createContext, useContext } from 'react';

const NameContext = createContext('');

function App() {
  return (
    <NameContext.Provider value="John Doe">
      <Body />
    <NameContext.Provider>
  );
}

function Body() {
  return <Greeting />;
}

function Greeting() {
	const name = useContext(NameContext);

  return (
    <h1>Welcome, {name}</h1>
  );
}

React useCallback

React useCallback is a hook that is used to memoize functions. It is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

function App() {
  const [player, setPlayer] = React.useState("");
  const [players, setPlayers] = React.useState(["Messi", "Ronaldo", "Laspada"]);

  function handleChangeInput(event) {
    setPlayer(event.target.value);
  }
  function handleAddPlayer() {
    setPlayers(players.concat(player));
  }
  const handleRemovePlayer = useCallback(
    (player) => {
      setPlayers(players.filter((p) => p !== player));
    },
    [players]
  );

  return (
    <>
      <input onChange={handleChangeInput} />
      <button onClick={handleAddPlayer}>Add Player</button>
      <PlayerList players={players} handleRemovePlayer={handleRemovePlayer} />
    </>
  );
}

function PlayerList({ players, handleRemovePlayer }) {
  return (
    <ul>
      {players.map((player) => (
        <li key={player} onClick={() => handleRemovePlayer(player)}>
          {player}
        </li>
      ))}
    </ul>
  );
}

React useMemo

React useMemo is a hook that allows us to memoize the result of a function call.

import * as React from "react";
import { getMDXComponent } from "mdx-bundler/client";

function Post({ code, frontmatter }) {
  const Component = React.useMemo(() => getMDXComponent(code), [code]);

  return (
    <>
      <header>
        <h1>{frontmatter.title}</h1>
        <p>{frontmatter.description}</p>
      </header>
      <main>
        <Component />
      </main>
    </>
  );
}

React Router

React Router is a collection of navigational components that compose declaratively with your application. React Router keeps your UI in sync with the URL.

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Contact() {
  return (
    <div>
      <h2>Contact</h2>
    </div>
  );
}

Configure-React CheatSheet for Developers

Create React Cluster App (Multiple React App in One Project) Build new React App in Second

Watch this video to create React Cluster App (Multiple React App in One Project)

Command Description
npx configure-react create-cluster <clustername> Create Big React Project with Tailwind, React Router Dom, Chakra UI, Context API, Redux, Redux Thunk, Redux Saga, Redux Persist, Utils, Axios
npx configure-react cluster-app <projectname> Create Cluster App with Tailwind, React Router Dom, Chakra UI, Context API, Redux, Redux Thunk, Redux Saga, Redux Persist, Utils, Axios
npx configure-react ic <package-name> Install package in Cluster App
npx configure-react help Display help for command

For more information about the package visit Configure-React Watch the video on Youtube

React Commands to Configure React App Faster (Specially for Beginners)

Command Description
npx configure-react axios . Install axios and create a folder named api and create a file named axios.js login.js, register.js, post.js getdata.js
npx configure-react react-redux-app <projectname> Install react-redux and create a folder named redux and create a file named store.js and actions.js and reducers.js and types.js
npx configure-react tailwind . Configure Exsisting React App with Tailwind Configuration to use Tailwind class
npx configure-react browser-router . Configure Exsisting React App with React Router Dom Configuration to use React Router Dom also create a folder named routes and create a file named index.js and AppRouter.js and edit App.js file and index.js file
npx configure-react chakra-ui . Configure Exsisting React App with Chakra UI Configuration to use Chakra UI also edit index.js file to wrap the App with ChakraProvider
npx configure-react context-api . Configure Exsisting React App with Context API Configuration to use Context API also create a folder named context and create a file named context.js and reducer.js and edit App.js file
npx configure-react redux . Configure Exsisting React App with Redux Configuration to use Redux also create a folder named redux and create a file named store.js and actions.js and reducers.js and types.js
npx configure-react utils . Configure Exsisting React App with Utils Configuration to use Utils also create a folder named utils and create a file named utils.js
npx configure-react redux-thunk . Configure Exsisting React App with Redux Thunk Configuration to use Redux Thunk also create a folder named redux and create a file named store.js and actions.js and reducers.js and types.js
npx configure-react redux-saga . Configure Exsisting React App with Redux Saga Configuration to use Redux Saga also create a folder named redux and create a file named store.js and actions.js and reducers.js and types.js
npx configure-react redux-persist . Configure Exsisting React App with Redux Persist Configuration to use Redux Persist also create a folder named redux and create a file named store.js and actions.js and reducers.js and types.js
npx configure-react refresh . Refresh the files and update the files if any changes in the package
npx configure-react help Display help for command