How to Create a React App: A Step-by-Step Guide
Key Facts:
- Vite is a practical build tool for learning React or creating a client-side application from scratch.
- A framework such as Next.js or React Router is often a better fit when a production website needs routing, data loading, or server rendering.
- React interfaces are made from components. Props pass information into a component, while state stores information that can change.
- A production-ready app needs testing, accessibility checks, secure configuration, performance measurement, and deployment verification.
This guide uses Vite to create a React app because it provides a quick and transparent setup for a browser-based React application. It also explains when a full framework may save more work later. By the end, you will have a simple app and a clear map of the decisions behind it.
What Should You Know Before Creating a React App?
How to create a React app? Before creating a React app, decide whether you need a full framework or a build tool, whether the team will use JavaScript or TypeScript, and where the first page will be rendered.
Choosing between a framework and a build tool
A framework provides an application structure as well as React. A build tool prepares source files for the browser but leaves choices such as routing and data fetching to the development team. React recommends starting new production apps with a framework, but it also documents Vite, Parcel, and Rsbuild for projects that need a custom setup or a simpler learning path.
| Option | Best For | Key Features | Main Consideration |
| Next.js | Public websites and full-stack products | Routing, server rendering, data handling | More conventions to learn |
| React Router | Full-stack or client-rendered React projects | Routing, data loading, multiple rendering options | The team must choose an operating mode |
| Vite | Client-side apps and learning projects | Quick setup, fast development server, optimized builds | Routing and data architecture are added separately |
| Parcel | Projects that favor minimal configuration | Automatic bundling, code splitting, asset handling | Smaller React mindshare than Vite |
| Rsbuild | Performance-focused web projects | Rspack-based builds and practical defaults | Less widely used than Vite |
JavaScript vs. TypeScript
JavaScript is usually the gentler starting point for someone learning React. TypeScript adds type checks that can catch mistakes before the app runs, such as passing text where a number is expected. That extra safety becomes more valuable as a codebase and team grow. The TypeScript documentation describes it as a static type checker and a typed superset of JavaScript.
| Choice | Best For | Main Benefit | Main Trade-Off |
| JavaScript | First projects, prototypes, small teams | Less syntax and a faster start | More mistakes appear only while the app runs |
| TypeScript | Long-lived products and larger teams | Earlier error detection and clearer contracts | Types add concepts and setup to learn |
If the goal is to understand React basics, JavaScript is enough. If several developers will maintain the application for years, TypeScript is often worth adopting from the start.
Client-side rendering vs. server-side rendering
Client-side rendering builds most of the page in the visitor’s browser after JavaScript loads. It suits dashboards, account areas, and tools where users interact after signing in. The initial HTML can be sparse, so the first meaningful view depends on the downloaded code.
Server-side rendering creates the first HTML on a server and then connects React to it in the browser. It can improve the initial experience and make public content easier for search engines to process, but it requires server-aware tooling. Choose the rendering model around the product: Vite is a clean fit for a client-side app, while a framework is usually the safer route for server rendering.
SaM Solutions’ talented React team is available to support you in any aspect of your React-based web or mobile development project.
Why Should You Not Use Create React App?
You should not use Create React App for a new project because React deprecated it in February 2025. The React team now recommends a framework for many production apps or a current build tool such as Vite, Parcel, or Rsbuild when a framework is not a good fit.
Create React App solved a real problem when React projects required many tools to be connected by hand. Its hidden configuration later became difficult to evolve, while newer tools offered faster development and more flexible production setups. React’s deprecation announcement says existing apps can continue to work, but new apps should use another path.
Vite is a sensible default for a small client-rendered app because it is quick to start and keeps the project structure visible. Next.js or React Router can provide routing, data loading, and rendering patterns for a larger product. Parcel emphasizes low configuration, while Rsbuild focuses on an Rspack-based toolchain. Pick the smallest option that meets known requirements; changing tools later is easier than carrying features the product never uses.
What Do You Need to Create a React App?
To create a React app locally, you need Node.js, npm, a code editor, a command-line interface, and a modern browser.
Node.js and npm
Install a currently supported Node.js release from nodejs.org. npm is included with Node.js, so a separate npm installation is normally unnecessary. Current Vite documentation requires Node.js 20.19+ or 22.12+, although individual templates can require a newer version. Check both tools in a terminal:
node –version
npm –version
Code editor and command-line interface
A code editor provides syntax highlighting, file search, and error hints. Visual Studio Code is common, but React does not require it. You will also need Terminal on macOS or Linux, PowerShell or Windows Terminal on Windows, or the terminal built into an editor. The command line is simply a text-based place to create the project and run its scripts.
Browser developer tools
Browser developer tools show errors, network requests, page structure, and performance information. Open them with the browser menu or a keyboard shortcut, then keep the Console and Network panels nearby while you work. The React Developer Tools extension adds a view of components, props, and state. These tools often explain a blank page faster than reading the source files again.
How Do You Create a React App With Vite?
You create a React app with Vite by installing a compatible Node.js version, generating a Vite project, selecting a React template, installing its dependencies, and starting the development server.
Step 1: Install Node.js
Download and install a supported Node.js version, then run node –version. If the command prints a version that meets Vite’s requirement, the machine is ready. If it is not recognized, restart the terminal before changing system settings.
Step 2: Generate a Vite project
Move to the folder where you keep projects and run:
npm create vite@latest my-react-app
my-react-app becomes the folder name. Use a short lowercase name without spaces to keep later commands simple.
Step 3: Select a project template
Choose React, then choose JavaScript or TypeScript when Vite asks. A beginner can select JavaScript. A team building a long-lived business application may prefer TypeScript. Vite also supports direct template selection, for example, npm create vite@latest my-react-app — –template react.
Step 4: Install the dependencies
Enter the project folder and install the packages listed in package.json:
cd my-react-app
npm install
npm downloads the packages into node_modules and records the exact versions in a lock file. Commit the lock file to version control, but do not commit node_modules.
Step 5: Start the development server
Run the local development server:
npm run dev
Open the local address printed in the terminal, often http://localhost:5173. Leave the command running while you edit. Vite updates the page quickly when a source file changes.
How Is a React Project Structured?
A Vite React project separates application code, public files, configuration, and installed packages. Most daily work happens in src/, while package.json defines dependencies and commands.
| File or Directory | Purpose |
|---|---|
| src/ | Contains components, styles, utilities, and application logic |
| public/ | Stores static files served without source-code processing |
| src/main.jsx | Creates the React root and renders the application |
| src/App.jsx | Defines the starter root component |
| index.html | Provides the HTML entry point used by Vite |
| package.json | Lists dependencies, metadata, and project scripts |
| vite.config.js | Stores optional Vite configuration |
| node_modules/ | Contains installed packages and should not be edited manually |
The src and public directories
Put React components, CSS imported by those components, utilities, and application logic in src/. Put files that must keep their exact names, such as a favicon or a downloadable document, in public/. Images used inside components can usually live under src/assets/ so the bundling process can fingerprint and optimize their URLs.
The package.json file
package.json is the project’s manifest. It records package names and provides scripts such as dev, build, and preview. When someone downloads the code, npm install reads this file and its lock file to recreate the required dependencies. Review changes to both files whenever a package is added or removed.
The application entry point
src/main.jsx connects React to the <div id=”root”> in index.html. A typical entry point imports createRoot, the main App component, and global styles:
import { createRoot } from ‘react-dom/client’;
import App from ‘./App.jsx’;
import ‘./index.css’;
createRoot(document.getElementById(‘root’)).render(<App />);
Most browser-based React apps need only one root. A server-rendered app uses hydration instead, which is another reason to let a suitable framework manage server rendering.
The root component
src/App.jsx is the first component rendered inside the root. It commonly holds the page layout or router and then brings in smaller components. Keep the App readable. If navigation, forms, and data logic make it long, move each concern into a named component or custom Hook.
How Do You Build Components and Add Interactivity?
You build an interactive React interface by writing small component functions, passing data through props, and storing changing values in state.
Writing a functional component
A functional component is a JavaScript function whose name begins with a capital letter and whose return value describes part of the interface. Keep the first components small and concrete:
function Welcome() {
return <h1>Welcome to your first React app</h1>;
}
export default Welcome;
Components are reusable building blocks. A header, product card, search box, and checkout summary can each be developed and tested separately.
Using JSX and props
JSX looks like HTML inside JavaScript, but it can insert JavaScript values with braces. Props are read-only inputs passed from a parent component:
function ProductCard({ name, price }) {
return <p>{name}: ${price}</p>;
}
<ProductCard name=”Desk lamp” price={39} />
Clear prop names make a component understandable wherever it appears. Avoid vague names such as data when product or customerName says what the value represents.
Managing state with hooks
State is information that a component remembers between renders. The useState Hook returns the current value and a function that updates it:
import { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>Clicks: {count}</button>;
}
Keep the state close to the component that needs it. Move state upward only when several components must share the same value.
Handling events and conditional rendering
React event handlers are functions passed to JSX attributes such as onClick or onChange. Conditional rendering shows different JSX for different states. For example, {isLoggedIn ? <Dashboard /> : <Login />} displays one of two components. Name event handlers after the action, such as handleSave, and prefer a plain if statement when a compact condition becomes hard to read.
How Do You Add Routing, Data, and Styles?
Add routing, data, and styles as separate parts of the React app rather than mixing them into one large component. A router maps URLs to screens, API code retrieves information, explicit loading and error states explain what is happening, and CSS controls presentation. This separation keeps each concern easier to understand, test, and replace.
Setting up client-side routing
Client-side routing changes the visible screen without reloading the entire page. The current declarative React Router setup installs react-router and wraps the app in BrowserRouter. Routes then connect paths to components:
npm install react-router
import { BrowserRouter, Routes, Route } from ‘react-router’;
<BrowserRouter>
<Routes>
<Route path=”/” element={<Home />} />
<Route path=”/about” element={<About />} />
</Routes>
</BrowserRouter>
Use Link for internal navigation so the router can handle the change. Older tutorials may import these APIs from react-router-dom, so always check the documentation for the installed version.
Fetching data from an API
An API lets the browser request information from a server. For a small client-side example, fetch can run inside an Effect after the component appears:
useEffect(() => {
fetch(‘/api/products’)
.then((response) => {
if (!response.ok) throw new Error(‘Request failed’);
return response.json();
})
.then(setProducts)
.catch(setError)
.finally(() => setLoading(false));
}, []);
Larger products often move data loading into a framework or data library. That choice can prevent duplicate requests, manage caching, and keep request logic out of visual components.
Handling loading and error states
Every remote request needs at least three visible outcomes: loading, success, and failure. Without them, a slow network looks like a broken blank screen. A simple component can return Loading products… while loading is true and an error message when error has a value. Keep the previous content visible during a quiet refresh when possible, and give the user a retry action if retrying can help.
Choosing a styling approach
Plain CSS is enough for many React apps. Import a global stylesheet for shared rules or keep a stylesheet beside a component for local organization. CSS Modules reduce accidental naming clashes, while utility libraries and component systems can speed up consistent design. Choose one main approach and define basic spacing, colors, and type styles early. Mixing several styling systems usually creates more work than it saves.
How Do You Test and Optimize a React App?
Test a React app at several levels, check accessibility with both tools and people, and optimize only after measuring real performance.
Vitest fits naturally into a Vite project because it can reuse Vite’s configuration and transformation pipeline. React Testing Library encourages tests that find and use elements as a person would, such as a button by its visible name. Test important outcomes: a total is calculated correctly, a validation message appears, or clicking “Add to cart” updates the cart. Avoid testing private component details that users cannot see.
End-to-end tests open the application in a real browser and follow a complete path, such as signing in, finding a product, and placing an order. Playwright supports Chromium, Firefox, and WebKit and can run locally or in continuous integration. Keep the suite focused on high-value journeys. Too many overlapping end-to-end tests become slow and fragile, while a short critical set can catch broken integrations before release.
Accessibility checks should start with semantic HTML: real buttons, associated form labels, useful alternative text, visible focus, and full keyboard access. Automated checks in tools such as axe or Lighthouse catch many common problems, but the W3C states that no automated tool can determine accessibility on its own. Test key journeys with a keyboard and, when possible, with assistive technology and people who use it.
Code splitting delays code that the first screen does not need. React’s lazy and Suspense can load a large route or feature when it first appears, reducing the initial JavaScript download. For rendering performance, measure with browser tools and the React Profiler before adding useMemo or memo. React documentation treats memoization as a targeted performance optimization, not a requirement for every component.
How Do You Build and Deploy a React App?
Build and deploy a Vite React app by creating a production bundle, supplying safe environment-specific values, uploading the output to a suitable host, and testing the live site.
Creating a production build
Run the build command from the project folder:
npm run build
Vite processes imports, performs bundling, and writes production files to dist/. Run npm run preview for a local check of that output. Preview is a verification tool, not a production server.
Configuring environment variables
Vite reads client variables through import.meta.env. Only names with the VITE_ prefix are exposed to client code by default, for example, VITE_API_URL. That prefix is not a security boundary: the value becomes part of the browser bundle and can be read by users. Keep database passwords, private API keys, and signing secrets on a backend or secure platform service.
Choosing a hosting platform
A client-rendered Vite app can run on a static host or content delivery network. Vercel, Netlify, Cloudflare Pages, GitHub Pages, and cloud object storage are common options. Compare custom domains, preview environments, access controls, regional delivery, logs, and price. If the app has server rendering or backend functions, confirm that the host supports the chosen framework and runtime.
Verifying the deployment
Open the live site in a private browser window and test the main journey from start to finish. Refresh a nested route, such as /account/settings; a single-page app often needs a host rewrite that sends unknown routes to index.html. Check mobile layouts, network errors, environment values, HTTPS, analytics consent, and error reporting. A green deployment status proves that files were uploaded, not that the product works.
What Common React Development Mistakes Should You Avoid?
Avoid starting with deprecated tooling, adding packages without a clear need, placing secrets in browser code, and treating tests or accessibility as final cleanup.
Using deprecated tooling
Check the publication date and official documentation before copying setup commands. React, Vite, routers, and testing tools change over time. Create React App is the clearest example: an old tutorial can still run while teaching a path React no longer recommends. Record the supported Node.js version and update dependencies in planned, reviewable steps.
Installing unnecessary packages
Every package adds code, update work, and a possible security or compatibility issue. Use the browser platform and React’s built-in features when they solve the problem clearly. Before installing a package, check its maintenance activity, license, bundle impact, and whether the team truly needs it. Remove trial packages instead of leaving them unused in package.json.
Exposing secrets in client code
Anything delivered to the browser should be treated as public, including values stored in JavaScript bundles and VITE_ environment variables. Never place private credentials in React source code or rely on an obscured variable name. Put sensitive operations behind a server endpoint that authenticates the request, validates permissions, and keeps the secret outside the client.
Skipping accessibility and production tests
A page that works with a mouse on a developer’s laptop is not fully tested. Run unit and component tests, exercise critical journeys in a production build, navigate with a keyboard, and check real mobile sizes. Include these checks throughout development so fixes stay small. Waiting until release day turns simple issues — such as a missing label or broken route rewrite — into urgent blockers.
Why Choose SaM Solutions for React App Development?
SaM Solutions knows how to build a React app reliably because the company combines React expertise with the engineering capacity needed to take an app beyond its first working screen. The company has more than 30 years in the market, over 800 IT experts, and more than 1,000 completed projects. Its React team covers custom development, consulting, modernization, testing, integration, and ongoing support, so clients can use one delivery partner across the application lifecycle.
Conclusion
How to make a React app? The clearest way to create a React app today is to choose the delivery model first and then use current tooling that fits it. Vite offers a friendly route for learning and client-side projects, while a React framework can handle more of the routing, data, and rendering work required by a production website. Create React App should no longer be the default for new work.
FAQ
Yes, you can build a React app without installing Node.js on your computer by using an online development environment such as StackBlitz or CodeSandbox.
![15 Best AI Tools for Java Developers in 2026 [with Internal Survey Results]](https://sam-solutions.com/wp-content/uploads/fly-images/18712/title@2x-6-366x235-c.webp)
