Quick Start Guide: React for the Rest of Us (With a Dash of Humor!)
Tags: react, quickstartreactjs, javascript, componen
Published: 2024-06-10 14:45:05

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!

```jsx
function MyButton() {
  return <button>I'm a button</button>;
}
```

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.

```jsx
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
```

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.

```jsx
function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>
        Hello there.
        <br />
        How do you do?
      </p>
    </>
  );
}
```

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.

```jsx
<img className='avatar' />
```

Write the CSS rules in a separate file:

```css
/* In your CSS */
.avatar {
  border-radius: 50%;
}
```

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:

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

return <h1>{user.name}</h1>;
```

You can also use curly braces for attributes:

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

return <img className='avatar' src={user.imageUrl} />;
```

For complex expressions, like string concatenation:

```jsx
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,
        }}
      />
    </>
  );
}
```

---

## Conditional Rendering: Superhero Decisions

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

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

return <div>{content}</div>;
```

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

```jsx
<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>
```

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

```jsx
<div>{isLoggedIn && <AdminPanel />}</div>
```

---

## Rendering Lists: The Superhero Roster

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

```jsx
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>;
```

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:

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

  return <button onClick={handleClick}>Click me</button>;
}
```

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:

```jsx
import { useState } from 'react';
```

Declare a state variable inside your component:

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

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

  return <button onClick={handleClick}>Clicked {count} times</button>;
}
```

`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:

```jsx
import { useState } from 'react';

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

---

## 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`:

```jsx
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>
  );
}
```

Pass the state and click handler down as props:

```jsx
function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}
```

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](https://github.com/ahnaf4d)