Revisiting React: Basics I Learned About React.

Building this https://chatbot-frontend-gamma-one.vercel.app/ , let me think that I need to learn React and FastAPI.
Some time ago, I touched React but didn’t do much with it. Now, I’m revisiting it, and this time I’ll learn it fully.

React — a popular tool used in web development. At first, it seemed like just another JavaScript thing, but after looking deeper, I realized it’s actually really helpful.

What Is React?

React is a JavaScript library for building user interfaces. That means it helps you create the parts of a website or app that people see and use — like buttons, menus, pages, etc.

It’s not a full stack framework like many others, and it’s not for the backend like Node.js. React focuses only on the frontend, the stuff users interact with.

But just calling it a library for building UIs doesn’t explain why it’s so popular.

Why Use React?

There are some websites like Netflix. When you click around, the page doesn’t reload. It feels smooth and fast — more like a mobile app than a website.

React helps create that kind of experience. Instead of reloading the whole page every time something changes, React only updates the parts that need to change. This makes the site feel faster and smoother.

It’s like JavaScript is watching the page, and when something changes (like clicking a tab), it quickly updates just that part — without touching the rest of the page.

React vs Vanilla JavaScript

It’s thinkable: “Why not just use regular JavaScript to build everything?”

Well, you can, but it gets hard quickly. Writing complex user interfaces with plain JavaScript becomes messy and repetitive. You have to manually update every part of the page when something changes.

React makes this easier by doing the hard work for you. It manages changes to the screen, handles user input, and lets organize code in a clean way — using components.

So instead of writing 100 lines of code to update one element, React lets you write just a few lines — and it takes care of the rest.

There is one more question which everyone must know:

Why Do We Need Tools Like Vite?

Why you can’t just write React code in a normal HTML file. Why? Because of something called JSX.

JSX looks like HTML inside JavaScript, like this:

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

That’s valid JSX, but browsers don’t understand JSX directly. It needs to be converted to regular JavaScript first.

That’s where tools like Vite come in. They take your React code, convert the JSX into browser-friendly JavaScript, and also optimize your code to make it load faster.

At first, setting up tools like Vite seemed scary, but they actually make development easier. And there are also platforms like CodeSandbox are even simpler — you just open it and start coding.

Note

It really helped understand what React is all about. It’s a tool that makes websites feel fast, clean, and modern. And now that I understand how it works, I’m even more excited to learn more.

One more question that everyone ask.

How much Javascript needs to start learning react?

As you start learning React, you will quickly realized something important:
👉 Before you can build with React, you need to understand JavaScript really well.

Learning the JavaScript tools React depends on — like import/export, arrow functions, destructuring, the spread operator, and more.

To get better at React, you had to relearn some JavaScript fundamentals. Here’s what you need to work on:

Variables, Values & Operators

practice using const, let, and var again. Understanding why we mostly use const.

Also, these:

• Comparison (===), math (+, %)
• Logic (&&, ||)
• String templates like `Hello, ${name}` instead of "Hello " + name

Functions: Regular and Arrow

Functions are used everywhere in React.

Things like parameters, return values, and scope.

Then must learn about arrow functions, which are a shorter way to write functions:

const add = (a, b) => a + b;

They look cleaner, but also change how this behaves inside them. this 🤔

Arrays, Objects & Methods

React often works with data in arrays, so practicing:

• map() – for displaying lists
• filter() and find() – for picking items from a list
• push(), slice(), concat() – for changing arrays

Example:

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

Also review objects and even classes — ways to group data and behavior.

A Few More Cool Things

Some extra lessons that helpful:

• Destructuring & Spread Operator
• Functions inside functions — great for organizing code
• Reference vs primitive values — like how objects and numbers behave differently
• if, for, switch — still super useful for writing logic

I also watched a video explaining how React doesn’t update the real DOM directly like normal JavaScript. It uses something called a virtual DOM, which is faster and more efficient. That I also want to understand.

At first, setting up a React project felt strange. In older HTML projects, we just added a <script> tag and wrote some JavaScript.

But with React, we know there’s something called a build process involved.

You need tools like Vite or Webpack to help prepare your code so that it runs correctly in the browser. This is because:

• React uses JSX, which the browser doesn’t understand directly.
• React code is written in multiple files, and we connect them using import and export.

Example:

// In one file
export const greeting = "Hello";

// In another file
import { greeting } from './message.js';

This makes large projects more organized and easier to manage.

Thanks for reading!
— Ranjan