Welcome back to the React Mastery Series!
In the previous article, we explored what React is, why it was created, and how it revolutionized frontend development through components and the Virtual DOM.
Before writing our first React component, let's build a solid development environment. Understanding the tools behind a React application will make you a more confident developer and help you troubleshoot issues when they arise.
What Do We Need?
To build React applications, you'll need:
- A code editor
- Node.js
- npm (or another package manager)
- A browser
- A React project scaffold
These tools work together to provide a fast and productive development experience.
Step 1: Install Node.js
React applications rely on the Node.js ecosystem for development.
Although React itself runs in the browser, Node.js is used to:
- Install dependencies
- Run the development server
- Build production bundles
- Execute development tooling
When you install Node.js, npm (Node Package Manager) is installed automatically.
Verify your installation:
node -v
npm -v
You should see version numbers for both commands.
Step 2: Choose a Code Editor
While many editors support React, Visual Studio Code has become the preferred choice for most developers.
Useful extensions include:
- ESLint
- Prettier
- ES7+ React Snippets
- GitLens
- Error Lens
These extensions improve code quality, formatting, navigation, and productivity.
Step 3: Create a React Project
For modern React development, Vite is the recommended way to start a new project.
Create a React project with TypeScript:
npm create vite@latest react-mastery -- --template react-ts
Move into the project:
cd react-mastery
Install dependencies:
npm install
Start the development server:
npm run dev
You'll see a local development URL, typically:
http://localhost:5173
Open it in your browser to see your React application running.
Why Vite Instead of Create React App?
For many years, Create React App (CRA) was the standard way to bootstrap React projects.
Today, most developers prefer Vite because it offers:
- Faster startup time
- Lightning-fast hot module replacement (HMR)
- Smaller configuration overhead
- Better performance during development
- Optimized production builds
If you're starting a new React project, Vite is an excellent choice.
Understanding the Project Structure
A newly created Vite project contains several important files and folders:
react-mastery/
│
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── App.tsx
│ ├── main.tsx
│ └── index.css
│
├── package.json
├── vite.config.ts
├── tsconfig.json
└── index.html
Let's understand the most important ones.
The src Folder
This is where you'll spend most of your time.
It contains:
- Components
- Styles
- Hooks
- Utilities
- Business logic
As your application grows, the src folder becomes the heart of your project.
The main.tsx File
This is the entry point of the React application.
It creates the React root and renders your application into the browser.
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Think of this file as the bridge between your React application and the browser.
The App.tsx File
App.tsx is the root component of your application.
Initially, it contains sample content generated by Vite.
As your application grows, this component often becomes the starting point for:
- Routing
- Global layouts
- Theme providers
- Authentication providers
- Context providers
The package.json File
This file manages your project's metadata and dependencies.
A typical package.json includes:
- Project name
- Version
- Scripts
- Installed packages
- Development dependencies
Example scripts:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
These scripts simplify common development tasks.
Understanding node_modules
After running:
npm install
npm downloads all project dependencies into the node_modules directory.
This folder can contain thousands of files and should never be edited manually.
It is usually excluded from version control using .gitignore.
Development Server and Hot Module Replacement
When you run:
npm run dev
Vite starts a development server.
One of its best features is Hot Module Replacement (HMR).
Instead of refreshing the entire page after every code change, Vite updates only the modified modules, preserving application state and making development much faster.
Recommended Folder Structure
As your application grows, organizing your code becomes increasingly important.
A common structure looks like this:
src/
│
├── components/
├── pages/
├── hooks/
├── services/
├── context/
├── store/
├── utils/
├── assets/
├── routes/
└── types/
This organization makes large applications easier to navigate and maintain.
Best Practices
When starting a new React project:
- Prefer TypeScript for better type safety.
- Keep components small and focused.
- Use meaningful folder names.
- Configure ESLint and Prettier early.
- Commit your code frequently with Git.
- Avoid placing all logic inside a single component.
These habits will pay off as your application scales.
Key Takeaways
Today, we learned:
✅ Why Node.js is required for React development
✅ How to create a React project using Vite
✅ The purpose of main.tsx and App.tsx
✅ The role of package.json and node_modules
✅ How the development server and Hot Module Replacement work
✅ A scalable folder structure for React applications
Coming Next 🚀
In Day 4, we'll dive into one of React's most important concepts:
Understanding JSX: Writing HTML Inside JavaScript
We'll explore:
- What JSX is
- Why React uses JSX
- JSX syntax rules
- Expressions in JSX
- Fragments
- Common mistakes
- JSX compilation process
Understanding JSX is essential because almost every React component you build will use it.
Happy Coding! 🚀
Top comments (0)