React Basics: JSX, Props, & State (Casual Guide)

Posted on:October 25, 2023 at 10:00 AM

Hey there, Fellow Coder! 👋

Want to learn React but getting a headache reading the super stiff official documentation? Relax, you’re in the right place. Here, we’re going to talk about React like we’re just chilling with friends over coffee. No complicated jargon that makes you frown.

Today’s menu is React Basic Concepts. We’re going to dissect its three main pillars: JSX, Props, and State.

Ready? Let’s dive in! 🚀

What is React Anyway?

Imagine you’re playing with LEGOs. If you want to build a LEGO castle, you don’t mold one giant castle straight from the factory, right? You build it from small bricks. There are red bricks, blue bricks, windows, doors, roofs, etc.

Well, React is like playing LEGO for websites. We don’t create one massive index.html file that goes on forever. We break it down into small components (the LEGO bricks).

Then, these components are assembled into a complete page. Neat, reusable, and easy to manage. Cool, right? 😎

1. JSX: HTML Lost in JavaScript

When you first see React code, you might be shocked: “Wait, why is there HTML inside JavaScript? That’s an error!”

Example:

const Introduction = () => {
  return <h1>Hello, I'm Jules!</h1>;
};

Relax, that’s not an error. That’s called JSX (JavaScript XML). React allows us to write UI structure (similar to HTML) directly inside JavaScript logic.

Why? For convenience! You don’t need to jump back and forth between HTML and JS files to manage the view. Everything is in one place. Later, React (with the help of tools like Babel) will translate that into regular JavaScript that the browser understands.

Just remember a few rules:

2. Props: Passing Notes

Okay, we have a component. But a purely static component is boring. What if we want to create a “Business Card” component with different content for each person?

This is where Props (short for Properties) come in. Think of Props like function arguments or parameters. Or simply: like passing a note to a friend.

// BusinessCard component receives a "note" (props)
const BusinessCard = (props) => {
  return (
    <div className="card">
      <h3>Hello, my name is {props.name}</h3>
      <p>Job: {props.job}</p>
    </div>
  );
};

// How to use it:
<BusinessCard name="John" job="Code Carpenter" />
<BusinessCard name="Jane" job="Cool Designer" />

See? One BusinessCard component can be reused many times with different data. Important: Props are “given”. The component receiving props cannot change them. It can only read them.

3. State: The Component’s Memory

If Props are data from outside (given by someone), State is data from inside (owned by the component). State is like the component’s memory. It can change over time.

Classic example: a Counter. The number starts at 0. If a button is clicked, the number increases to 1, 2, 3, etc. This changing number must be stored in State.

In modern React (using Hooks), we use a magic spell called useState.

import { useState } from "react";

const Counter = () => {
  // We create a state 'count', initial value is 0
  // 'setCount' is the button/function to change the value
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me!</button>
    </div>
  );
};

Simple Analogy:

Closing

So, how was it? React isn’t that scary, is it? 😉 Basically, it’s just:

  1. Build Components (assemble LEGOs).
  2. Use JSX (write HTML in JS).
  3. Pass Data with Props.
  4. Store Changing Data with State.

In the next article, we’ll discuss something even more exciting: Hooks and how to fetch data from the internet (API Fetching). Stay tuned!

Don’t forget to code today! đŸ’»â˜•