In partnership with

👋 Hey Devs!

Today, I started learning React, and I just have to say:

“WHAT WAS I DOING ALL THIS TIME?!”

But why React?

Because it’s 🔥. It lets you create small, reusable UI components that can be used across multiple pages effortlessly.

Back in the day, I used to copy-paste the same component for every page and wonder:
"There has to be a better way than repeating myself..."

Well, that’s exactly where React shines. And today, we’re diving into why learning React can level up your dev game.

WHY IT MATTERS:

• Declarative Programming → You focus on what you want, not how to do it, which makes your code cleaner and easier to maintain.

• Solid JavaScript Fundamentals → Strong JS basics let you harness React’s full power and avoid common pitfalls.

• Composability & Reusable Components → Build once, use everywhere, saving time and making your projects scalable and organized.

REACT: Let’s start why?

React is a powerful JavaScript library for building user interfaces, particularly single-page applications (SPAs) that need to be fast and highly interactive. Developed by Facebook, React has become a standard tool in modern web development, trusted by companies worldwide.

Made in 2013, and the best part is recruiters still asking for React not like other frameworks which are changing every year

Key Features of React

1. Declarative

   • You describe what the UI should look like for a given state, and React handles the updates.

   • Example: Showing a list of items in JSX without manually manipulating the DOM.

2. Component-Based

   • UIs are built using components, which are reusable and self-contained pieces of code.

   • Example: A button, a header, or a form can each be a component.

3. Virtual DOM

   • React uses a virtual DOM to efficiently update the UI. Instead of changing the actual DOM directly, React updates a virtual representation first, then syncs only what changed.

4. JSX Syntax

   • React uses JSX, which looks like HTML inside JavaScript.

function Hello() {
  return <h1>Hello, React!</h1>;
}

5. State and Props

   • State: Holds data that changes over time inside a component.

   • Props: Pass data from parent components to child components.

FROM OUR PARTNERS:

The future of AI customer service is at Pioneer

There’s only one place where CS leaders at the cutting edge will gather to explore the incredible opportunities presented by AI Agents: Pioneer.

Pioneer is a summit for AI customer service leaders to come together and discuss the trends and trajectory of AI and customer service. You’ll hear from innovators at Anthropic, Toast, Rocket Money, Boston Consulting Group, and more—plus a special guest keynote delivered by Gary Vaynerchuk.

You’ll also get the chance to meet the team behind Fin, the #1 AI Agent for customer service. The whole team will be on site, from Intercom’s PhD AI engineers, to product executives and leaders, and the solutions engineers deploying Fin in the market.

Join Pioneer in-person or online on October 9th, 2025. Register today.

My Experience

So today I started learning through Scrimba and I made a simple React Facts project

Note: I will be going to the what I learned for the Installation guide you can read this great article from FreeCodeCamp

Once you install the React it will create many folders (You can see it in the below picture)

Remember how in vanilla HTML, CSS, and JavaScript we worked with just three separate files? In React, things are a bit different. We now have JSX files, and each component is typically broken down into its own file.

For example, in a project, the Navbar component would have its own dedicated file, making your code more organized, modular, and easier to maintain.

import ReactLogo from '../assets/react.svg';

export default function Navbar() {
  return (
    <header className="header">
      <img src={ReactLogo} alt="React Logo" />
      <h1 className="header-text">React Facts</h1>
    </header>
  );
}

In React, we create a main.jsx file just like navbar.jsx. Instead of writing everything in a single HTML file, we break down the UI into separate components, giving each its own dedicated file.

Later, we use import and export to connect these components, which is why main.jsx and navbar.jsx are linked to App.jsx. This approach keeps your code modular, organized, and easier to maintain.

import Navbar from './components/navbar.jsx';
import Main from './components/main.jsx';

export default function App() {
  return (
    <>
      <Navbar />
      <Main />
    </>
  );
}

Finally, we use App.jsx to connect everything to index.jsx, which is the entry point that renders our React application to the browser. This flow—from individual components → App.jsx → index.jsx—makes the app modular, organized, and easy to manage.

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

The reason is simple — what if your app has tons of data? You can’t hardcode every single page or element.

This is where React really shines. It uses “props” to pass data to components dynamically, letting you reuse components and render different content easily without repeating code.

What are Props?

Props (short for properties) are a way to pass data from a parent component to a child component in React. They make components reusable and dynamic.

Think of props like arguments you pass to a function. The child component receives them and can use them to display content or control behavior.

Key Points

1. Props are read-only inside the child component.

2. They allow customization of components without changing their internal code.

3. Props help in component reusability.

For example:

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

// Using the component
function App() {
  return (
    <>
      <Greeting name="Harman" />
      <Greeting name="Nav" />
      <Greeting name="Matt" />
    </>
  );
}

What happens here:

• Greeting receives a prop called name.

• Inside Greeting, props.name is used to show the dynamic value.

• You can reuse Greeting for anyone without rewriting it.

Using Destructuring for Cleaner Code

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

• This is the same as above but cleaner.

• { name } directly pulls the prop from props.

Props with Multiple Values

function Profile({ name, age, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Role: {role}</p>
    </div>
  );
}

function App() {
  return <Profile name="Harman" age={22} role="Developer" />;
}

Props don’t have to be just strings—they can be numbers, objects, arrays, or even functions.

✅ Takeaway:
Props let you customize and reuse components dynamically. They are immutable inside the child, meaning the child can read them but cannot modify them—for state changes, you’d use state instead.