Courses | Arish – Full Stack Ruby on Rails & React Developer

Setting Up Your React Development Environment

Before we start building React applications, let's set up our development environment with the essential tools.

Prerequisites

Node.js

React requires Node.js. Install the LTS version:

bash

1# Check if Node is installed
2node --version
3
4# Should output something like: v20.x.x

Download from nodejs.org if not installed.

Package Manager

npm comes with Node.js, but you can also use yarn or pnpm:

bash

1# npm (comes with Node)
2npm --version
3
4# Or install yarn
5npm install -g yarn
6
7# Or install pnpm (faster)
8npm install -g pnpm

Code Editor

We recommend Visual Studio Code with these extensions:

ES7+ React/Redux/React-Native snippets
Prettier - Code formatter
ESLint
Auto Rename Tag
Bracket Pair Colorizer

Creating a React Project

Option 1: Vite (Recommended)

Vite is the modern, fast way to create React projects:

bash

1# Create with npm
2npm create vite@latest my-react-app -- --template react
3
4# Or with yarn
5yarn create vite my-react-app --template react
6
7# Or with pnpm
8pnpm create vite my-react-app --template react
9
10# Navigate and install dependencies
11cd my-react-app
12npm install
13
14# Start development server
15npm run dev

Option 2: Create React App

The traditional way (slower, but still works):

bash

1npx create-react-app my-react-app
2cd my-react-app
3npm start

Option 3: Next.js (For Production Apps)

For production applications with SSR:

bash

1npx create-next-app@latest my-next-app
2cd my-next-app
3npm run dev

Project Structure

A typical Vite React project looks like this:

my-react-app/
├── node_modules/       # Dependencies
├── public/             # Static files
│   └── vite.svg
├── src/                # Source code
│   ├── assets/         # Images, fonts, etc.
│   ├── App.css         # App styles
│   ├── App.jsx         # Main App component
│   ├── index.css       # Global styles
│   └── main.jsx        # Entry point
├── .gitignore
├── index.html          # HTML template
├── package.json        # Dependencies & scripts
└── vite.config.js      # Vite configuration

Understanding Key Files

main.jsx - Entry Point

jsx

1import React from 'react'
2import ReactDOM from 'react-dom/client'
3import App from './App.jsx'
4import './index.css'
5
6ReactDOM.createRoot(document.getElementById('root')).render(
7  <React.StrictMode>
8    <App />
9  </React.StrictMode>,
10)

App.jsx - Main Component

jsx

1import { useState } from 'react'
2import './App.css'
3
4function App() {
5  const [count, setCount] = useState(0)
6
7  return (
8    <div className="App">
9      <h1>Vite + React</h1>
10      <button onClick={() => setCount(count + 1)}>
11        count is {count}
12      </button>
13    </div>
14  )
15}
16
17export default App

index.html - HTML Template

html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Vite + React</title>
8  </head>
9  <body>
10    <div id="root"></div>
11    <script type="module" src="/src/main.jsx"></script>
12  </body>
13</html>

Essential Commands

bash

1# Start development server
2npm run dev
3
4# Build for production
5npm run build
6
7# Preview production build
8npm run preview
9
10# Run linter
11npm run lint

Setting Up ESLint and Prettier

ESLint Configuration

bash

1npm install -D eslint eslint-plugin-react eslint-plugin-react-hooks

javascript

1// .eslintrc.cjs
2module.exports = {
3  env: { browser: true, es2020: true },
4  extends: [
5    'eslint:recommended',
6    'plugin:react/recommended',
7    'plugin:react/jsx-runtime',
8    'plugin:react-hooks/recommended',
9  ],
10  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
11  settings: { react: { version: '18.2' } },
12  rules: {
13    'react/prop-types': 'off',
14  },
15}

Prettier Configuration

bash

1npm install -D prettier

json

1// .prettierrc
2{
3  "semi": false,
4  "singleQuote": true,
5  "tabWidth": 2,
6  "trailingComma": "es5"
7}

Browser DevTools

Install React Developer Tools browser extension:

This adds React tabs to your browser's developer tools for:

Inspecting component hierarchy
Viewing and editing props/state
Profiling performance

Hot Module Replacement (HMR)

Vite includes HMR out of the box. When you save a file:

Changes appear instantly in the browser
Component state is preserved
No full page reload needed

jsx

1// Edit this and save - see instant updates!
2function App() {
3  return <h1>Edit me!</h1>
4}

You're now ready to start building React applications!