Author: Akshay Kulkarni

React Hooks You’ve already been using one of React’s most important hooks — useState — since the very early posts in this series. But you haven’t yet learned what a “hook” actually is, why they were introduced, or the rules you need to follow when using them. In this post, we’ll properly define hooks, revisit useState with a bit more context, and introduce a second essential hook: useEffect. What Is a Hook? A hook is a special function that lets you “hook into” React features — like state, lifecycle behavior, and context — from within a functional component. Hooks always…

React Forms Forms are everywhere in web applications — login pages, search bars, checkout flows, settings panels. You’ve already seen a few form examples in earlier posts, but now it’s time to dig deeper into how React actually manages form input, and understand the important distinction between controlled and uncontrolled components. The Problem: How Does React “Know” What’s in an Input? In plain HTML, form elements like <input>, <textarea>, and <select> maintain their own internal state — the browser keeps track of what the user has typed, and you only read that value when you need it (for example, on…

Lists and Keys in React Almost every real application needs to display collections of data — a list of products, a feed of posts, search results, a table of users. Rather than writing out repetitive JSX for each item by hand, React lets you dynamically render lists from arrays of data. Along the way, you’ll run into a special prop called key, which trips up a lot of beginners at first but is actually solving a very important problem. Rendering a Basic List The most common way to render a list in React is using JavaScript’s built-in .map() array method…

Conditional Rendering in React Real applications rarely show the exact same UI to everyone at all times. A logged-in user sees a dashboard; a logged-out user sees a login button. A page shows a loading spinner while data is fetching, and the actual content once it arrives. This kind of “show this, or show that, depending on a condition” logic is called conditional rendering, and React gives you several clean ways to handle it. Why You Can’t Use if Directly Inside JSX In an earlier post, you learned that JSX only accepts expressions inside curly braces {}, not statements. Since…

Handling Events in React Over the last two posts, you learned how components hold data through props and state. But data alone doesn’t make an app interactive — you also need a way to respond when users click buttons, type into inputs, submit forms, or hover over elements. That’s where event handling comes in. React’s event system looks a lot like standard JavaScript DOM events, but with some important differences that make it more consistent and predictable. Let’s dig in. Basic Event Handling Syntax In plain HTML/JavaScript, you might attach an event like this: html <button onclick=”handleClick()”>Click Me</button> In React,…

State in React In the last post, you learned that props let a component receive data from its parent, but that data is read-only and can’t be changed by the component itself. So what happens when you need a component to remember and update its own data — like a counter that increases when clicked, a form field the user is typing into, or a toggle that switches on and off? That’s exactly what state is for. What Is State? State is data that a component manages internally, and that can change over time as a result of user interaction,…

Props in React – Passing Data Between Components In the last post, you learned how to break your UI into reusable components. But a component that always renders the exact same thing isn’t very useful. What if you want a Greeting component that says “Hello, John” in one place and “Hello, Sarah” in another? That’s exactly the problem props solve. Props allow you to pass data from one component to another, making your components dynamic, reusable, and configurable. What Are Props? Props (short for “properties”) are how data flows from a parent component to a child component in React. They…

Components in React (Functional vs Class Components) So far, you’ve set up a React project and learned how JSX lets you describe UI in a readable way. But real applications aren’t built as one giant block of markup — they’re broken down into small, reusable, self-contained pieces called components. Components are the single most important concept in React. Once you understand them well, everything else — props, state, hooks — builds naturally on top of this foundation. What Is a Component? A component is simply a JavaScript function (or class) that returns a piece of UI, described using JSX. Think…

Understanding JSX in React If you looked at the code in our previous post and thought, “Wait, isn’t that HTML sitting inside JavaScript?” — you’re right to notice that, and it’s the very first thing that surprises most newcomers to React. That syntax is called JSX, and understanding it properly will make everything else in React click into place much faster. In this post, we’ll break down what JSX actually is, how it works behind the scenes, and the rules you need to follow when writing it. What Is JSX? JSX stands for JavaScript XML. It’s a syntax extension for…

Setting Up Your First React App If you’ve read our introduction to React, you already know why React is worth learning. Now it’s time to get your hands dirty and actually build something. Before you can write a single line of JSX, though, you need a working React environment on your machine. In this post, we’ll walk through two popular ways to set up a React project — Vite (the modern, recommended approach) and Create React App (the older, still-common approach) — and explain what actually happens under the hood when you run these commands. Prerequisites Before setting up React,…