Understanding React in 5 mins

Looking for a quick way to grasp the basics of React? Feeling overwhelmed by lengthy tutorials? In just 5 minutes, you'll learn enough to read and understand most React code.

Table of Contents

What is React?
Core Concepts
Common Patterns
Putting It All Together
That's It!

What is React?

React is a JavaScript library for building UIs like buttons or forms.

Think of building with LEGO blocks. Instead of creating one big castle, you build using smaller, reusable pieces that connect together. React lets you build web interfaces using reusable pieces called "components".

Here's what React code looks like:

// A simple React component
function Greeting() {
  return <h1>Hello!</h1>;
}

This special syntax is called JSX - it lets you write HTML-like code in JavaScript.

React helps you:

Break down complex UIs into manageable pieces
Handle UI and data efficiently using a Virtual DOM system
Update webpages automatically whenever your data changes

Core Concepts

1. Components 🧩

Components are like LEGO blocks in React. They are reusable UI pieces you can combine.

// A simple component
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Using it
<Welcome name="Alice" />

2. Props 📨

Props are data passed to components - like function parameters.

// 'name' and 'age' are passed to UserCard() as props
function UserCard({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

<UserCard name="Alice" age={25} />

Note: Props are read-only.

3. State 📝

State is data that can change. When it changes, React updates the UI automatically.

function LikeButton() {
  // 'likes' is state
  // 'setLikes' is function to update the state
  const [likes, setLikes] = useState(0);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

Note: useState(0) sets up state with an initial value of 0 (more about Hooks below).

4. Hooks 🪝

Hooks are functions that let components use React features. They always start with "use".

useState: for managing changing data (state)

const [count, setCount] = useState(0); // Initialize count with 0

useEffect: for running code at specific times (like API calls)

useEffect(() => {
    fetchData(); // Get data
}, []);          // Run once when page loads

Common Patterns

Conditional Rendering

Show different content based on conditions:

function Greeting({ isLoggedIn }) {
  return isLoggedIn
   ? <h1>Welcome!</h1>
   : <h1>Please log in</h1>;
}

When isLoggedIn is true, shows "Welcome!", otherwise shows "Please log in".

Usage:

<Greeting isLoggedIn={true} />   // "Welcome!"
<Greeting isLoggedIn={false} />  // "Please log in"

Event Handling

Handle user interactions like clicks:

function ToggleButton() {
 // Track button state (ON/OFF)
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

When clicked, the button text switches between "ON" and "OFF".

Usage:

<ToggleButton />  // Shows: "OFF" by default

Putting It All Together 👀

Here's a real example using what we learned:

function LikeButton({ initialLikes = 0 }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onClick={() => setLikes(likes + 1)}>
      {likes === 0 ? '♡' : '🩷'} {likes > 0 && likes}
    </button>
  );
}

This LikeButton component:

Gets initial likes count as props
Shows empty heart (♡) when count is 0
Shows pink heart (🩷) with number when likes > 0
Updates heart and count when clicked

Usage Example:

<LikeButton initialLikes={0} />  // ♡
<LikeButton initialLikes={8} />  // 🩷 8

That's It! 🥳

You now know the React basics! While there's more to learn, you can understand most React code you see.

Ready to Start?

There are several ways to create a React project:

Next.js: Full-stack React framework, recommended for most new projects
Gatsby: React framework for fast CMS-backed websites
Vite: Modern and fast build tool, great for learning React and building single-page applications

Details are here.

Happy coding✨

Blog