Skip to main content

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​

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

export default App;

React Props​

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

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

React Children Props​

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

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

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

React useEffect Hooks​

import { useEffect } from 'react';

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