Feed Reader BotФотография
DEV Community: react
React Mastery Series – Day 3: Setting Up Your React Development Environment
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 becom[...]