React CheatSheet

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

React Components 

1
2
3
4
5

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

export default App;

React Props 

1
2
3
4
5
6
7

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

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

React Children Props 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

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

React Conditionals 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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 Context

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

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

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

React useEffect Hooks 

1
2
3
4
5
6
7

import { useEffect } from 'react';

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