DEV Community

Cover image for Quick Start Guide: React for the Rest of Us (With a Dash of Humor!)
Ahnaf Tahmid
Ahnaf Tahmid

Posted on

Quick Start Guide: React for the Rest of Us (With a Dash of Humor!)

Welcome to the ultimate guide to get you started with React.js. Let's dive into the React universe, where you’ll learn the essential concepts you’ll use daily. It’s like learning to cook: master the basics, and you can whip up anything from a simple sandwich to a fancy gourmet dish.

What You’ll Learn:

  • How to create and nest components
  • How to add markup and styles
  • How to display data
  • How to render conditions and lists
  • How to respond to events and update the screen
  • How to share data between components

Creating and Nesting Components: Assemble Your Superhero Squad

React apps are made out of components. Think of a component as a piece of the UI (user interface) with its own logic and appearance. It can be as small as a button or as large as an entire page.

Step 1: Creating a Simple Component

Imagine you’re introducing a new superhero to your squad. Here’s our first superhero: a button!

function MyButton() {
  return <button>I'm a button</button>;
}
Enter fullscreen mode Exit fullscreen mode

Our hero is simple but effective. It’s a JavaScript function that returns a bit of HTML (called JSX in React). Now, let’s nest this superhero into another component, like adding Batman to the Justice League.

Step 2: Nesting Components

Just like Batman works better with his team, our button can be part of a bigger component. Let’s create an app that welcomes users with a button.

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Notice that <MyButton /> starts with a capital letter. That’s the rule: React component names always start with a capital letter, while HTML tags are lowercase. Think of it as giving your heroes proper names.


Writing Markup with JSX: Speak the Superhero Language

The markup syntax you’ve seen above is called JSX. It’s optional but super convenient. JSX is stricter than HTML. You have to close tags like <br /> and wrap multiple tags in a shared parent, like <div>...</div> or an empty <>...</> wrapper.

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>
        Hello there.
        <br />
        How do you do?
      </p>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Think of JSX as the secret superhero language. You can use an online converter to turn regular HTML into JSX if you need help translating.


Adding Styles: Dressing Up Your Superheroes

In React, you specify a CSS class with className. It works the same way as the HTML class attribute. Let’s give our hero a stylish costume.

<img className='avatar' />
Enter fullscreen mode Exit fullscreen mode

Write the CSS rules in a separate file:

/* In your CSS */
.avatar {
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

React doesn’t dictate how you add CSS files. Use a <link> tag in your HTML or follow the documentation for your build tool or framework.


Displaying Data: Show Off Your Superhero Stats

JSX lets you mix JavaScript with HTML. Curly braces {} let you escape back into JavaScript to display data. For example, let’s display a user’s name:

const user = { name: 'Hedy Lamarr' };

return <h1>{user.name}</h1>;
Enter fullscreen mode Exit fullscreen mode

You can also use curly braces for attributes:

const user = { imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg' };

return <img className='avatar' src={user.imageUrl} />;
Enter fullscreen mode Exit fullscreen mode

For complex expressions, like string concatenation:

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className='avatar'
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
        }}
      />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Conditional Rendering: Superhero Decisions

React uses regular JavaScript for conditions. For example, you can use an if statement to include JSX conditionally:

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}

return <div>{content}</div>;
Enter fullscreen mode Exit fullscreen mode

For a more compact approach, use the conditional ? operator:

<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>
Enter fullscreen mode Exit fullscreen mode

Or use the logical && operator when you don’t need an else branch:

<div>{isLoggedIn && <AdminPanel />}</div>
Enter fullscreen mode Exit fullscreen mode

Rendering Lists: The Superhero Roster

Use JavaScript’s map() function to render lists of components. Imagine you have an array of products:

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map((product) => (
  <li key={product.id}>{product.title}</li>
));

return <ul>{listItems}</ul>;
Enter fullscreen mode Exit fullscreen mode

Each <li> needs a key attribute, usually from your data, like a database ID.


Responding to Events: Superhero Actions

Respond to events by declaring event handler functions inside your components:

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return <button onClick={handleClick}>Click me</button>;
}
Enter fullscreen mode Exit fullscreen mode

Notice how onClick={handleClick} has no parentheses at the end. You only pass the function; React will call it when the event occurs.


Updating the Screen: Superhero State

To remember some information, like how many times a button is clicked, add state to your component. First, import useState from React:

import { useState } from 'react';
Enter fullscreen mode Exit fullscreen mode

Declare a state variable inside your component:

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}
Enter fullscreen mode Exit fullscreen mode

useState gives you the current state (count) and a function to update it (setCount). Clicking the button updates the state and re-renders the component.

If you render the same component multiple times, each gets its own state:

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Sharing Data Between Components: Superhero Team Coordination

Sometimes, components need to share data and update together. Move the state “upwards” to the closest common component. Here’s how:

First, move the state up from MyButton into MyApp:

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Pass the state and click handler down as props:

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}
Enter fullscreen mode Exit fullscreen mode

When you click a button, handleClick updates the state in MyApp, which then passes the updated state to both MyButton components. This is called “lifting state up”.


Conclusion

Congratulations! You’ve taken your first steps into the world of React and learned how to create, nest, style, and manage state in components. With these superpowers, you’re ready to build amazing, interactive web apps. Keep experimenting, stay curious, and remember: with great power comes great responsibility (and lots of fun coding adventures)!

Happy Coding!


contact with me:

ahnaftahmid802@gmail.com

GitHub

Top comments (0)