React Syntax Cheat Sheet

Functional Components

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

// or with arrow function
const Hello = ({ name }) => <h1>Hello, {name}!</h1>;

JSX Basics

const element = <div className="box">Hello</div>;
const list = [1, 2, 3].map(n => <li key={n}>{n}</li>);

Props

const Welcome = ({ name }) => <h1>Hi, {name}</h1>;
<Welcome name="Madeline" />;

useState

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
};

useEffect

import { useEffect } from 'react';

useEffect(() => {
  console.log("Component mounted or updated");

  return () => {
    console.log("Cleanup on unmount");
  };
}, [/* dependencies */]);

Event Handling

const handleClick = () => alert("Clicked!");
<button onClick={handleClick}>Click Me</button>

Conditional Rendering

{isLoggedIn ? <Dashboard /> : <Login />}
{show && <Modal />}

Lists & Keys

const items = ['a', 'b', 'c'];
<ul>
  {items.map((item, i) => <li key={i}>{item}</li>)}
</ul>

Fragments

<>
  <h1>Title</h1>
  <p>Paragraph</p>
</>

Inline Styles

const style = { color: 'blue', fontSize: '1.5rem' };
<div style={style}>Styled Text</div>

Import & Export

// Export
export default MyComponent;
export const Helper = () => {};

// Import
import MyComponent, { Helper } from './MyComponent';

Component Composition

const Page = () => (
  <Layout>
    <Header />
    <Main />
    <Footer />
  </Layout>
);