By default, the development server runs on port 5173.

http://localhost:5173

One of Vite's biggest advantages is startup speed. Instead of rebuilding an entire application every time a file changes, it updates only the affected modules.

Vite vs Next.js

A common misconception is that Vite and Next.js are competitors.

They actually solve different problems.

Vite helps developers build React applications.

Next.js helps developers build complete production applications using React.

You can think of Vite as a tool in your toolbox, while Next.js provides an entire architecture for building applications.

What is JSX?

One of the first things new React developers notice is that React code often looks like HTML inside JavaScript.

const element = <h1>Hello React</h1>;

This syntax is called JSX, which stands for JavaScript Syntax Extension.

JSX is not HTML.

It is a syntax that makes it easier for developers to describe user interfaces using familiar markup-like structures.

Without JSX, UI definitions can become difficult to read.

Why Browsers Cannot Understand JSX

Browsers do not understand JSX directly.

If a browser encounters JSX code, it has no idea how to execute it.

This is why React projects require a build step.

Before the code reaches the browser, JSX must be transformed into standard JavaScript.

What is Transpilation?

The process of converting one form of source code into another form of source code is called transpilation.

A transpiler takes code written in JSX and converts it into plain JavaScript.

Historically, Babel became one of the most popular tools for this purpose.

For example:

<h1>Hello</h1>

can be transformed into:

React.createElement('h1', null, 'Hello');

Understanding this transformation helps developers realize that JSX is simply a more convenient way of writing JavaScript.

Expressions vs Statements in JSX

One of the most common beginner questions is why certain JavaScript syntax works inside JSX while other syntax does not.

The answer lies in understanding expressions and statements.

A statement performs an action.

if (loggedIn) {
  console.log('Welcome');
}

An expression produces a value.

loggedIn ? 'Welcome' : 'Login';

JSX can only contain expressions because expressions evaluate to values that React can render.

This is why the following code is invalid:

{
  if (loggedIn) {
    return <Home />;
  }
}

Instead, we use a ternary expression:

{
  loggedIn ? <Home /> : <Login />;
}

Components

React applications are built using components.

A component is a reusable piece of UI.

function Button({ text }) {
  return <button>{text}</button>;
}

Instead of repeatedly writing the same markup throughout an application, developers can create reusable components and compose them together.

This approach makes applications easier to maintain and reason about.

Pure Functions

To understand React rendering, we first need to understand pure functions.

A pure function always returns the same output for the same input.

function add(a, b) {
  return a + b;
}

No matter how many times this function is executed, identical inputs always produce identical outputs.

Now consider:

let tax = 0.1;

function calculate(price) {
  return price + price * tax;
}

This function depends on external state.

If the value of tax changes, the same input can produce a different output.

This makes the function impure.

Why React Loves Pure Rendering

React's rendering system works best when UI output depends only on props and state.

This predictability allows React to efficiently determine when updates are required.

Many tutorials say:

Components are pure functions.

While this is useful as a teaching simplification, it is not entirely accurate.

The Important Nuance

Components may contain:

• API requests
• Timers
• Event handlers
• Logging
• Local storage access

All of these are side effects.

React does not require the entire component to be pure.

Instead, React expects the render phase to be pure.

Given the same props and state, rendering should produce the same UI output.

This principle makes React applications more predictable and easier to debug.

Summary

In this article we explored Vite, JSX, transpilation, expressions versus statements, components, and pure rendering. These concepts form the foundation for writing React applications and understanding how React transforms code into user interfaces.