Skip to content

Latest commit

 

History

History
131 lines (96 loc) · 2.24 KB

react-cheatsheet.md

File metadata and controls

131 lines (96 loc) · 2.24 KB
Raw
title description created
React CheatSheet
The most important and useful methods of React are given here.
2022-10-30

Table of Contents

React CheatSheet for Developers

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

🔼Back to Top

React Components

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

export default App;

🔼Back to Top

React Props

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

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

🔼Back to Top

React Children Props

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

function User({ children }) {
  return children;
}

🔼Back to Top

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 />;
}

🔼Back to Top

React Context

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

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

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

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

🔼Back to Top

React useEffect Hooks

import { useEffect } from 'react';

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

🔼Back to Top