DEV Community: Sravanthi

Event Handling in React

Sravanthi — Fri, 17 Jul 2026 10:06:37 +0000

Introduction

After learning about state, I started wondering how React responds when a user interacts with the application.

For example:

What happens when a button is clicked?
How do we update state when a user types into an input field?
How do we respond when a form is submitted?

The answer is event handling.

Event handling allows React components to respond to user actions such as clicks, keyboard input, form submissions, and mouse events.

In this article, I'll explain how event handling works in React, how it differs from HTML events, and how it interacts with state.

What is an Event?

An event is an action performed by the user or the browser that React can respond to.

Some common events include:

Clicking a button (click event)
Typing in a text box (change event)
Submitting a form (submit event)
Moving the mouse (mouseOver event)
Pressing a key (keyDown event)

React uses JavaScript functions called event handlers to respond to these events.

What is Event Handling?

Event handling is the process of responding to user or browser events by executing JavaScript functions.

Example:

When a user clicks a button, run a function.
When a user types, update state.
When a form is submitted, prevent the page from refreshing and process the data.

onClick

onClick is triggered when the user clicks an element such as a button.

When the user clicks the button, React executes the function.

If no arguments are needed, you can pass the function directly. Otherwise, use an arrow function.

Why Do We Use an Arrow Function?

We use an arrow function when we need to pass arguments to an event handler. The arrow function delays calling the function until the button is clicked.

What Happens If We Don't Use an Arrow Function?

The function executes immediately when the component renders instead of waiting for the click event.

This means:

The alert appears as soon as the page loads.
Clicking the button does nothing because the function has already been called. This is not the desired behavior.

onChange

onChange is triggered whenever the value of an input field changes. It is commonly used with textboxes, dropdowns, and checkboxes.

It is commonly used together with state to keep the UI synchronized with the user's input.

onSubmit

onSubmit is triggered when a form is submitted. It is commonly used to process form data.

What is preventDefault()?

The preventDefault() method is commonly used with onSubmit to stop the browser from refreshing the page, allowing React to process the form data without reloading the application.

For a form, the default behavior is:

Submit the form.
Refresh the page.

React applications usually don't want the page to refresh, so we use:

e.preventDefault();

This keeps the page open so React can handle the form submission.

Without preventDefault()

User clicks Submit
       ↓
Browser refreshes the page
       ↓
Data is lost

With preventDefault()

User clicks Submit
       ↓
React handles the form
       ↓
Page does NOT refresh
       ↓
Data is processed

Common Events

Event	Description
`onClick`	Button click
`onChange`	Input value changes
`onSubmit`	Form submitted
`onMouseOver`	Mouse moves over an element
`onKeyDown`	Keyboard key pressed
`onFocus`	Element receives focus
`onBlur`	Element loses focus

Event Object

An event object is an object that React automatically passes to an event handler whenever an event occurs (such as a click, typing in a textbox, or submitting a form).

It contains information about the event and the element that triggered it, such as:

Which element triggered the event.
The current value of an input.
The type of event.
Methods like preventDefault().

The event object is usually named e or event.

Commonly Used Properties

Property	Description
`e.target`	The element that triggered the event.
`e.target.value`	Gets the current value of an input field.
`e.type`	Returns the event type (e.g., click, change, submit).
`e.preventDefault()`	Prevents the browser's default behavior, such as refreshing the page on form submission.

Event Handling in HTML vs React

HTML	React
Uses lowercase event names (`onclick`)	Uses camelCase (`onClick`)
Uses strings	Uses JavaScript functions
`onclick="save()"`	`onClick={save}`

Rules of Event Handling

Use camelCase event names.
Pass a function, not the result of a function.
Use arrow functions when passing arguments.
Update state using the setter function.
Use preventDefault() for forms when needed.

Conclusion

Event handling is what makes React applications interactive. By connecting user actions to JavaScript functions, React can respond to clicks, keyboard input, and form submissions.

Combined with state, event handling allows React components to respond to user actions and automatically update the UI.

As I continue learning React, I'm starting to see how state and event handling work together to build dynamic and interactive user interfaces.

Key Takeaways

Event handling allows React to respond to user actions such as clicking, typing, and submitting forms.
React event names use camelCase, such as onClick, onChange, and onSubmit.
Event handlers are passed as functions, not function calls.
Use an arrow function when you need to pass arguments to an event handler.
React automatically passes an event object (e) to the event handler.
The event object provides information about the event, such as the element that triggered it and its value.
Use e.preventDefault() to stop the browser's default behavior, such as refreshing the page after a form submission.
State is commonly updated inside event handlers using setter functions like setState or setCount.
Event handling makes React applications interactive and responsive to user input.

What's Next?

Now that I know how to respond to user interactions, the next step is learning how to render lists of data in React using the map() method.

In the next article, I'll explore how to display collections of data efficiently and assign keys to list items.

Thanks for reading, and happy coding!

Understanding React State: How Components Remember and Update Data

Sravanthi — Tue, 14 Jul 2026 22:49:34 +0000

Introduction

After learning about props, I started wondering how React components keep track of information that changes over time.

For example:

A counter that increases when you click a button.
A text box that updates as you type.
A Like button that changes when it's clicked.

Props allow components to receive data, but they can't change that data.

So how does React handle values that need to change?

The answer is state.

In this article, I'll explain what state is, why React uses it, and how to update state using the useState Hook.

What is State?

State is data managed by a React component that can change over time. Unlike props, state belongs to the component and can be updated. When state changes, React automatically re-renders the component and updates the UI.

Why Do We Need State?

JavaScript variables can change, but changing them does not tell React to update the UI. State solves this problem by notifying React whenever its value changes, causing the component to re-render.

Examples:

Counter
Login status
Form input
Shopping cart
Theme (Dark/Light)

useState

useState is a React Hook used to create and manage state in a functional component.

const [count, setCount] = useState(0);

count → Current value
setCount() → Updates the value
0 → Initial value

Whenever setCount() is called, React updates the state and re-renders the component.

How React Updates the UI

When a state value changes, React automatically re-renders the component.

For example:

The component renders with the initial state.
The user performs an action, such as clicking a button.
The setter function (for example, setCount) updates the state.
React re-renders the component.
The updated state is displayed on the screen.

This automatic re-rendering is what makes React applications interactive.

Updating State

To update state, React provides a setter function returned by useState.

Example:

In this example, the App component passes both count and setCount (named counter) to the Count component.

How it works

Whenever state changes, React re-renders the component.

The initial state is:

const [count, setCount] = useState(0);

Output:

When the user clicks Increment:

The counter prop refers to the setCount function passed from the parent, so calling:

counter(count + 1);

updates the state to the new value.

In this example, the state is created in the App component using useState. The current value (count) and the setter function (setCount) are passed to the Count component as props. When a button is clicked, the child component calls the setter function to update the parent's state. React then automatically re-renders the UI and displays the new count.

Multiple State Variables

A component can have more than one state.

import { useState } from "react";

function User() {

  const [name, setName] = useState("Srav");
  const [age, setAge] = useState(10);

  return (
    <>
      <h2>{name}</h2>
      <h2>{age}</h2>
    </>
  );
}

Each call to useState creates a separate piece of state, allowing a component to manage multiple values independently.

State vs Variables

State	Variables
Stored and managed by React	Stored and managed by JavaScript
Updating state causes the component to re-render	Updating a variable does not cause the component to re-render
Created using `useState`	Created using `const`, `let`, or `var`
Persists between renders	Recreated every time the component renders
Used to store data that changes over time	Used to store temporary values or calculations

State vs Props

Props	State
Passed from a parent component	Managed inside the component
Read-only	Can be updated
Used to pass data between components	Used to store data that changes over time
Controlled by the parent component	Controlled by the component itself
Received through function parameters	Created using `useState`
Can be passed to child components	Can also be passed to child components as props

Rules of State

Always use the setter function returned by useState (for example, setCount) to update state.
Don't modify state directly.
State updates trigger a re-render.
Each component manages its own state.

Conclusion

State is one of the most important concepts in React because it allows components to remember information and update the user interface when that information changes.

Unlike props, which receive data from a parent component, state belongs to the component itself. By combining props and state, React components become both reusable and interactive.

As I continue learning React, I'm beginning to see that state is what makes React applications interactive. It allows the UI to respond to user actions and keeps the interface in sync with changing data.

Key Takeaways

State stores data inside a component.
State can change over time.
useState creates state in a functional component.
Updating state causes React to re-render the component.
State makes React applications interactive.

What's Next?

After learning how components manage their own data with state, the next step is understanding events.

In the next article, I'll explore event handling in React and learn how to respond to user actions such as button clicks, typing in input fields, and submitting forms.

Understanding Props in React

Sravanthi — Mon, 13 Jul 2026 22:18:18 +0000

Introduction

After learning conditional rendering, I started wondering how React components share data with each other.

For example, suppose I have a Welcome component.

Instead of hardcoding the same text every time, how can I display a different name for each user?

The answer is props.

Props allow a parent component to pass data to a child component, making components more reusable and flexible.

In this article, I'll explain what props are, how they work, and when to use them.

What are Props?

Props is short for properties.

Props are used to pass data from a parent component to a child component.

In React, data flows from a parent component to a child component through props.

Think of props like function parameters.

Just as a function accepts values as parameters, a React component accepts values through props.

Parent → Child Data Flow

Props flow in one direction — from a parent component to a child component.

Parent sends data.
Child receives and displays it.
Child cannot change the props.

Parent Component
       │
       │ props
       ▼
Child Component

Passing a Single Prop

Parent Component

function App() {
  return <Welcome name="Srav" />;
}

Child Component

function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

Output

Hello Srav

Passing Multiple Props

Parent

function App() {
  return (
    <Welcome
      name="Srav"
      age={10}
      city="Auckland"
    />
  );
}

Child

function Welcome(props) {
  return (
    <>
      <h2>{props.name}</h2>
      <p>{props.age}</p>
      <p>{props.city}</p>
    </>
  );
}

Output

Srav
10
Auckland

Props are Read-only

Props cannot be changed inside the child component.

The parent owns the data.

Wrong

function Welcome(props) {
  props.name = "Srav";
}

Correct

The parent should pass a different value.

<Welcome name="Srav" />

Destructuring Props

Destructuring lets you access props directly without writing props. every time.

Instead of writing:

function Welcome(props) {
  return <h1>{props.name}</h1>;
}

Use destructuring:

function Welcome({ name }) {
  return <h1>{name}</h1>;
}

For multiple props:

function Welcome({ name, age, city }) {
  return (
    <>
      <h2>{name}</h2>
      <p>{age}</p>
      <p>{city}</p>
    </>
  );
}

Destructuring makes the code shorter, cleaner, and easier to read.

Props vs Variables

Props	Variables
Passed from a parent component	Declared inside the component or function
Read-only (cannot be modified by the child component)	Can be reassigned (if declared with `let`)
Used to pass data between components	Used to store temporary values during execution
Received as function parameters	Created using `const`, `let`, or `var`
Changes when the parent passes new values	Exist only within the scope where they are declared

Example:

function Welcome({ name }) {

  const country = "New Zealand";

  return (
    <>
      <h2>{name}</h2>
      <p>{country}</p>
    </>
  );
}

Here:

name → comes from the parent as a prop.
country → is a local variable created inside the component.

Props vs State

Props	State
Passed from a parent component	Managed inside the component
Read-only	Can be updated
Used to pass data	Used to store changing data
Received through function parameters	Created using `useState`

We'll explore state in the next article.

When should you use Props?

Passing data to child components
Making components reusable
Customizing UI
Sharing information between components
Passing event handler functions to child components

Conclusion

Props are one of the fundamental concepts in React because they allow components to communicate with each other.

They make components more reusable by allowing the same component to display different data without changing its internal code.

Understanding how props work is an important step toward building modular and maintainable React applications.

As I continue learning React, I'm seeing how breaking an application into smaller components and passing data through props makes the code much easier to understand and reuse.

Key Takeaways

Props are used to pass data from a parent component to a child component.
Props are read-only and should not be modified by the child component.
Components become more reusable by receiving different props.
Props can contain strings, numbers, booleans, objects, arrays, functions, or even JSX.
Props help components communicate while keeping responsibilities separate.
Props can be destructured to make the code cleaner.

What's Next?

Now that I understand how components receive data through props, the next step is learning how components manage their own changing data using state.

In the next article, I'll explore React state and learn how it allows components to update the UI when data changes.

Thanks for reading, and happy coding!

Understanding Conditional Rendering in React: 5 Common Techniques

Sravanthi — Mon, 13 Jul 2026 04:37:28 +0000

Introduction

After learning JSX, I started wondering how React decides what to display on the screen.

For example:

Show "Welcome" only after a user logs in.
Display a Loading... message while data is being fetched.
Show "No Data Found" when a list is empty.
Display an Admin Dashboard only for administrators.

The answer is conditional rendering in React.

Conditional rendering allows React to display different UI based on a condition.

In this article, I'll explore the five common ways of conditional rendering and learn when to use each one.

What is Conditional Rendering?

Conditional rendering simply means displaying different content depending on whether a condition is true or false.

Think about a login page.

If the user is logged in, we display:

Welcome

Otherwise we display:

Please Login

There are several ways. The most common are:

if...else
Element Variables
Ternary Conditional Operator
Short Circuit Operator
Early Return

Common Ways of Conditional Rendering

React provides several ways to render different UI based on conditions. Each approach has its own use case.

Method	What it does	Example use
if...else	Executes one block of code if the condition is true, otherwise executes another block.	Complex business logic, multiple conditions.
Ternary Operator (`? :`)	Chooses between two values or UI elements based on a condition.	Login/Logout, Active/Inactive.
Logical AND (`&&`)	Renders content only when a condition is true.	Admin buttons, notifications, badges.
Element Variable	Stores JSX in a variable and renders that variable later.	Cleaner JSX, reusable UI blocks.
Early Return	Returns immediately from the component if a condition is met.	Loading screens, error pages, authentication.

if...else

Used when you want to decide what to show before displaying the page. It checks a condition and returns different JSX depending on whether the condition is true or false.

if...else statements can't be written directly inside JSX because they are JavaScript statements, not expressions. Instead, place the if...else logic before the return statement and return the appropriate JSX.

Rule to remember

Expressions can go inside {} in JSX.

Variables
Function calls
Arithmetic (2 + 3)
Ternary (condition ? A : B)
Logical AND (condition && )

Statements cannot go inside JSX.

if...else
for
while
switch

Element variables

A cleaner alternative to returning JSX directly from an if...else block is to use element variables. An element variable is simply a JavaScript variable that stores JSX, making the return statement easier to read.

Example 1:

const message = <h1>Hello!</h1>;

Here,
message is a JavaScript variable.

<h1>Hello!</h1> is a JSX element stored in that variable.
Later, you can render it like this:

return (
  <div>
    {message}
  </div>
);

Example 2: Render only part of a component

Suppose you always want to show the heading.

But only logged-in users should see a button.

function App() {

  const isLoggedIn = true;

  let button;

  if (isLoggedIn) {
    button = <button>Logout</button>;
  } else {
    button = <button>Login</button>;
  }

  return (
    <div>
      <h1>React Tutorial</h1>
      {button}
    </div>
  );
}

If isLoggedIn = true

Output:

React Tutorial

[Logout]

If isLoggedIn = false

Output:

React Tutorial

[Login]

Notice that only the button changes, while the rest of the component stays the same.

Example 3: Render nothing

Sometimes you don't want to display anything.

function App() {

  const showMessage = false;

  let message;

  if (showMessage) {
    message = <h2>Welcome!</h2>;
  }

  return (
    <div>
      <h1>Home Page</h1>
      {message}
    </div>
  );
}

Since showMessage is false,

message = undefined;

React ignores undefined, so nothing is rendered.

Output:

Home Page

No welcome message is shown.

When should you use element variables?

Use element variables when:

You have multiple lines of JSX to conditionally render.
The condition is too complex for a simple ternary operator.
You want to keep the return statement clean and readable.

Ternary Conditional Operator

The main advantage of the ternary operator is that it can be used directly inside JSX.

Why is it useful in React?

JSX only allows expressions, not statements. The ternary operator is an expression, so JSX accepts it.

Why can the ternary operator be used inside JSX?

Because it returns a value.

When should you use a ternary operator?

Use it when:

You have two possible outcomes (true/false).
The JSX is small and simple.
You want to keep the code concise.

For larger or more complex conditions, using an if...else statement with an element variable (before the return) is often easier to read.

Quick comparison
| if...else | Ternary (? :) |
|-----------|-----------------|
| A statement | An expression |
| Cannot be written directly inside JSX | Can be written inside JSX |
| Better for complex logic | Better for simple true/false rendering |
| Usually written before return | Written inside {} |

Short Circuit Operator

The short-circuit operator is another way to conditionally render content. It is useful when you want to display something only if a condition is true.

In React, the short-circuit operator uses the JavaScript logical AND (&&) operator.

Syntax:

condition && expression

It means:

If the condition is true, render the expression. If the condition is false, render nothing.

Example:

When the condition is false, React doesn't render the JSX on the right side of &&.

Early Return

Returns JSX immediately when a condition is met, so the rest of the component doesn't execute. It helps keep the code simple and easy to read.

When isLoading is true, React immediately returns:

It doesn't continue to the rest of the component. Once the loading is complete (isLoading = false), React skips the if statement and renders the main page.
This is a very common pattern in React applications when waiting for data from an API.

Which One Should You Use?

There isn't a single "best" method.

Choose the one that makes your code easiest to understand.

As a general guideline:

Use if...else for complex logic.
Use element variables to keep JSX clean.
Use the ternary operator when choosing between two values.
Use && when displaying something only if a condition is true.
Use early return for loading, error, or authentication screens.

Conclusion

Conditional rendering is one of the core concepts of React.

Although there are several ways to achieve it, each method has its own purpose.

Choosing the right approach makes your components easier to read, maintain, and understand.

Understanding when to use each technique will help you write cleaner and more readable React components.

Key Takeaways

Conditional rendering displays different UI based on conditions.
React uses normal JavaScript for conditional rendering.
if...else is best for complex logic.
Element variables help keep JSX clean and readable.
The ternary operator is ideal for choosing between two values.
&& displays content only when a condition is true.
Early return is useful for loading, error, and authentication screens.

What's Next?

Now that I know how to display different content based on conditions, the next step is understanding how data flows between React components using props.

In the next article, I'll explore what props are, why they're useful, and how they help components communicate with each other.

Thanks for reading, and happy coding!

Understanding JSX in React: Why Does HTML Work Inside JavaScript?

Sravanthi — Mon, 13 Jul 2026 00:17:22 +0000

Introduction

In my previous article, I explored the React project structure and understood the purpose of the files that Vite created.

The next question I had was:

How does React actually display HTML inside JavaScript?

When I opened App.jsx, I noticed something unusual. HTML tags were written directly inside a JavaScript file.

That looked strange at first because JavaScript doesn't normally allow HTML.

So I started digging deeper and discovered JSX.

In this article, I'll explain what JSX is, why React uses it, and how it makes building user interfaces easier.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like code inside JavaScript.

Instead of writing:

React.createElement("h1", null, "Hello")

Thankfully, we don't usually write React.createElement() ourselves. JSX lets us write much cleaner code.

You can write:

<h1>Hello</h1>

JSX isn't HTML. It only looks like HTML. Behind the scenes, React converts it into JavaScript.

React doesn't understand JSX directly.

When the application is built, Vite transforms JSX into regular JavaScript that browsers can understand.

Why do we use JSX?

Without JSX, creating user interfaces becomes more difficult to read and write.

Benefits of JSX:

Easier to read and write
Looks similar to HTML
Makes UI code easier to maintain
Allows JavaScript expressions inside the UI
Helps build reusable React components

JSX vs HTML

JSX looks like HTML, but there are some differences.

HTML	JSX
`class`	`className`
`for`	`htmlFor`
Uses lowercase attribute names	Most attributes use camelCase (for example, `onClick`, `tabIndex`)
JavaScript cannot be written directly inside HTML	JavaScript expressions can be written inside `{}`
Some tags don't need to be closed	Every tag must be closed (for example, `<img />`, `<input />`)

These differences exist because JSX is JavaScript, not HTML.

HTML

<label for="name">Name</label>
<input class="textbox">

JSX

<label htmlFor="name">Name</label>
<input className="textbox" />

Why?

Because class and for are reserved keywords in JavaScript.

JavaScript Expressions inside JSX

Inside JSX you can execute JavaScript using curly braces {}.

Curly Braces {}

Curly braces tell React:

Everything inside the curly braces is treated as a JavaScript expression.

Example:

const age = 25;

return <h2>Age: {age}</h2>;

Inside {}, you can use:

Variables

{name}

Math

{5 + 8}

Functions

{sayHello()}

Objects

{user.name}

Ternary operators

{isLoggedIn ? "Welcome" : "Login"}

Rules of JSX

Although JSX looks similar to HTML, it follows a few rules that are different from standard HTML.

Rule 1: Return one parent element

Wrong


return (
  <h1>Hello</h1>
  <p>React</p>
);

Correct

return (
  <div>
    <h1>Hello</h1>
    <p>React</p>
  </div>
);

Or use a Fragment.

return (
  <>
    <h1>Hello</h1>
    <p>React</p>
  </>
);

Rule 2: Close every tag

Wrong

<img src="logo.png">

Correct

<img src="logo.png" />

Rule 3: Use camelCase

Wrong

<button onclick="save()">Save</button>

Correct

<button onClick={save}>Save</button>

Rule 4: Use className instead of class because class is a reserved JavaScript keyword.

Wrong

<div class="box">

Correct

<div className="box">

Rule 5: Use curly braces {} to write JavaScript expressions.

Wrong

<h1>name</h1>

Correct

<h1>{name}</h1>

Conclusion

After learning more about JSX, I realized that JSX is simply a cleaner and more readable way to build user interfaces in React.

Although it looks like HTML, it is actually converted into JavaScript before the browser runs it.

Understanding JSX has given me a much better idea of how React components are built.

Key Takeaways

JSX lets us write HTML-like code inside JavaScript.
React converts JSX into JavaScript during the build process.
JSX makes React components easier to read and maintain.
JavaScript expressions can be written inside {}.
JSX has a few rules, such as using className, htmlFor, and closing every tag.

What's Next?

Now that I understand what JSX is and how it works, the next step is learning how to display different content based on conditions.

In the next article, I'll explore the four ways of conditional rendering in React and learn when to use each approach.

Thanks for reading, and happy coding!

Understanding the React Project Structure: What Did Vite Create for Me?

Sravanthi — Thu, 09 Jul 2026 01:05:01 +0000

Introduction

In my previous article, I learned how to create a React project using Vite and understood what each setup command does.

After opening the project in Visual Studio Code, I noticed that Vite had created several files and folders for me.

At first, I wasn't sure what most of them were used for.

Questions like these came to mind:

Why do I have both a src folder and a public folder?
What is package.json?
Why are there two CSS files?
What is vite.config.js?
Which files will I actually work with every day?

Instead of ignoring them, I decided to understand what each one does.

In this article, I'll walk through the React project structure and explain the purpose of the most important files and folders.

Looking at the Project Structure

When I first looked at the project, I saw folders and files like these:

node_modules
public
src
package.json
index.html
vite.config.js

It looked a little overwhelming at first.

The good news is that we don't need to understand everything immediately.

As beginners, we mainly work with just a few of these files every day.

node_modules

I remembered that this folder was created after running npm install in my previous article.

The node_modules folder stores all the installed packages and dependencies required for the React application to run.

Although it's an important folder, developers usually don't edit anything inside it manually.

public

When I expanded the public folder, I found files like favicon.svg.

The public folder is used to store static files such as images, icons, and other assets.

If a file is placed inside the public folder, it can be accessed directly without importing it into your React components.

The `src` Folder

The name src stands for source.

This is the main folder where we write most of our React application.

Inside this folder, Vite created several files for us:

App.jsx
App.css
main.jsx
index.css
assets

As I continue learning React, this is the folder I'll spend most of my time working in.

Let's take a look at each file.

App.jsx

After opening App.jsx, I realized that it contains the main React component that is displayed in the browser.

Whenever I modify this file and save it, I can immediately see the changes reflected in my browser.

This is one of the files I'll be working with the most while learning React.

App.css

This file contains styles specifically for the App.jsx component.

When I change the CSS here, the appearance of my application changes.

Later, when I create more components, each component can also have its own CSS file.

index.css

At first, I wondered why there were two CSS files.

Unlike App.css, the index.css file contains styles that apply to the entire application.

This is a good place for global styles such as fonts, margins, and background colours.

main.jsx

The main.jsx file is the entry point of the React application.

Think of it as the starting point.

It loads the App component and displays it inside the browser.

Whenever the application starts, React begins its journey from this file.

assets

In React, assets are static files used by your application, such as:

Images (.png, .jpg, .svg, .gif, .webp)
Icons
Fonts (.ttf, .woff, .woff2)
Videos (.mp4)
Audio (.mp3)
JSON files (sometimes)

If you want to use images from the src/assets folder, you first need to import them into your component.

React (through Vite) then bundles and optimizes these files during the build process.

package.json

I like to think of package.json as the project's identity card. It stores project information, lists the project's dependencies and development dependencies, and defines scripts for running, building, and testing the application. When we run npm install, npm reads package.json and installs all the required packages automatically.

Here's what each section of package.json does:

name: The name of your project (react-intro).
private: Setting "private": true prevents the project from being accidentally published to npm.

Since this is my own learning project, I don't want it to be published as a package.

version: The current version of the project. 0.0.0 is often used for projects still under development.
type: "module" means the project uses ES Modules, allowing you to use import and export.
Scripts:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  },

These are commands you can run:

Script	Purpose
`npm run dev`	Starts the development server
`npm run build`	Creates an optimized production build
`npm run lint`	Checks the code for errors and coding issues
`npm run preview`	Runs the production build locally for testing

Dependencies:


  "dependencies": {
    "react": "^19.2.7",
    "react-dom": "^19.2.7"
  },

These packages are required for your application to run.

react : The core React library used to build user interfaces.
react-dom : Renders React components into the browser's DOM.

Dev Dependencies:

  "devDependencies": {
    "@types/react": "^19.2.17",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.3",
    "oxlint": "^1.71.0",
    "vite": "^8.1.1"
  }

These packages are only needed during development.

@types/react : Type definitions for React (mainly for TypeScript support).
@types/react-dom : Type definitions for React DOM.
@vitejs/plugin-react : Enables React support in Vite (including Fast Refresh).
oxlint : A fast linter that checks your code for mistakes and style issues.
vite : The build tool and development server for your React project.

index.html

index.html is the main HTML page of a React application. It is the only HTML file that the browser loads. React then takes control and renders the application inside it.

React injects the application into:

<div id="root"></div>

This is the root container, where React renders your entire application inside this <div>.

It also loads main.jsx, which starts the React app.

<script type="module" src="/src/main.jsx"></script>

vite.config.js

vite.config.js is the configuration file for Vite. It tells Vite how to build and run your React application.
As a beginner, I don't need to modify this file very often, but it's useful to know that it exists.

Conclusion

When I first opened my React project, the number of files and folders felt a little overwhelming.

After exploring them one by one, I realized that each file has a specific purpose.

As a beginner, I don't need to understand every detail immediately.

For now, knowing where my React code lives and what each important file does gives me a solid foundation to continue learning React.

Key Takeaways

After exploring the React project structure, here are the main things I learned:

src is where I write most of my React code.
public stores static files such as images and icons.
App.jsx is the main React component displayed in the browser.
main.jsx is the entry point of the React application.
package.json stores project information, dependencies, and scripts.

What's Next?

Now that I understand the React project structure, the next step is learning JSX, one of React's core concepts.

After that, I'll explore the four ways of conditional rendering and learn when to use each approach.

I'm excited to continue this learning journey, and I hope you'll join me!

Thanks for reading, and happy coding!

Creating My First React Project with Vite: Understanding Every Command

Sravanthi — Tue, 07 Jul 2026 02:47:04 +0000

Introduction

When I started learning React, almost every tutorial began with a few commands:

npm create vite@latest
npm install
npm run dev

I followed along, but I realized something: I didn't actually know what these commands were doing.

Questions like these came to mind:

Why do we use Vite?
Why do we need npm install?
Why do we run npm run dev?
What does code . mean?

So instead of just memorizing the commands, I wanted to understand why each one is needed.
In this article, I'll walk through creating my very first React project with Vite and explain each command along the way.

Creating the Project

I started by opening my terminal and running the following command:

npm create vite@latest react-intro

Let's break this command down.

npm : Node Package Manager. It helps install and manage JavaScript packages.
create : Creates a new project.
vite : Uses Vite to set up the basic structure of the React project, including the required files and folders.
@latest : Downloads the latest version of Vite.
react-intro : The name of my project folder. At this point, Vite has created the initial project structure for us.

Vite Created My Project... What's Next?

After a few seconds, Vite displayed this message.

It asked me to run three commands:

cd react-intro
npm install
npm run dev

When I first saw these commands, I wondered:
"Why do I need to run these? What do they actually do?"

Let's go through them one by one.

Moving into the Project Folder

The first command is:

cd react-intro

The cd command stands for Change Directory.

Think of it like entering a newly built house.

Vite has already created the house (the react-intro folder), but I'm still standing outside.

Running

cd react-intro

takes me inside the project folder so I can work with its files.

Installing Project Dependencies

After creating the project, Vite displayed the next commands I needed to run:

npm install

After installation completes, you will notice a new node_modules folder created inside your project.

At first, I wondered why this step was needed. Vite had already created my React project, so why did I need to install anything?

The reason is that Vite creates the project structure and configuration files, but it does not download all the packages required for the application to run.

The npm install command reads the package.json file and downloads all the required dependencies for the project.

These dependencies are stored inside a folder called:

node_modules

The node_modules folder contains the packages that our React application needs, including React and other tools used during development.

After npm install finishes, the project is ready to run.

Opening the Project in Visual Studio Code

After installing the dependencies, I opened the project in Visual Studio Code to continue development using:

code .

The .(dot) represents the current folder.

Since I was already inside my react-intro project folder, this command opened that project directly in Visual Studio Code.

Now I could see all the files and folders that Vite had created, including:

src
public
package.json
node_modules (created after running npm install)

From this point on, I used the VS Code integrated terminal to continue working on my project.

Running the Development Server

With the project open in VS Code, I opened a new terminal and ran:

npm run dev

This command starts Vite's development server and displays a local URL, usually:

http://localhost:5173

The port number may change if another application is already using that port.

Opening this URL in the browser lets you see your React application running locally.

One feature I really liked is that Vite automatically reflects my code changes in the browser whenever I save my files. This feature is called Hot Module Replacement (HMR), which makes development much faster because I don't need to refresh the browser manually.

Conclusion

Creating a React project is more than just copying commands from a tutorial.

Understanding what each command does helped me feel more confident while setting up my development environment.

The commands I learned:

npm create vite@latest react-intro : Creates a new React project using Vite
cd react-intro : Moves into the project folder
npm install : Installs the required project dependencies
code . : Opens the project in Visual Studio Code
npm run dev : Starts the local development server

This is the first part of my React learning journey. I'll continue documenting what I learn as I work towards becoming a full-stack developer.

What's next?

This is Part 1 of my React learning journey.

In the next article, I'll explore the React project structure and understand the purpose of folders like src, public, and files like package.json.

Thanks for reading!

DEV Community: Sravanthi

Event Handling in React

Introduction

What is an Event?

What is Event Handling?

onClick

Why Do We Use an Arrow Function?

What Happens If We Don't Use an Arrow Function?

onChange

onSubmit

What is preventDefault()?

Common Events

Event Object

Event Handling in HTML vs React

Rules of Event Handling

Conclusion

Key Takeaways

What's Next?

Understanding React State: How Components Remember and Update Data

Introduction

What is State?

Why Do We Need State?

useState

How React Updates the UI

Updating State

Multiple State Variables

State vs Variables

State vs Props

Rules of State

Conclusion

Key Takeaways

What's Next?

Understanding Props in React

Introduction

What are Props?

Parent → Child Data Flow

Passing a Single Prop

Passing Multiple Props

Props are Read-only

Destructuring Props

Props vs Variables

Props vs State

When should you use Props?

Conclusion

Key Takeaways

What's Next?

Understanding Conditional Rendering in React: 5 Common Techniques

Introduction

What is Conditional Rendering?

Common Ways of Conditional Rendering

if...else

Element variables

Ternary Conditional Operator

Short Circuit Operator

Early Return

Which One Should You Use?

Conclusion

Key Takeaways

What's Next?

Understanding JSX in React: Why Does HTML Work Inside JavaScript?

Introduction

What is JSX?

Why do we use JSX?

JSX vs HTML

JavaScript Expressions inside JSX

Curly Braces {}

Rules of JSX

Conclusion

Key Takeaways

What's Next?

Understanding the React Project Structure: What Did Vite Create for Me?

Introduction

Looking at the Project Structure

node_modules

public

The src Folder

App.jsx

App.css

index.css

main.jsx

The `src` Folder