What is Setup & Tooling?

Setup & Tooling refers to all the software, configuration, and project structure you need to start building React apps efficiently. This includes Node.js, npm/yarn, project generators, editors, scripts, and more.

Analogy: Think of setup and tooling as your kitchen and utensils. The better your setup, the easier and faster you can cook up great apps!

Why is Setup Important?

A good setup saves you time, prevents bugs, and helps you follow best practices. It lets you focus on building features instead of fighting with configuration or tooling issues.

• Faster development with hot reloading and code snippets
• Consistent code quality with linters and formatters
• Easy collaboration with a clear project structure
• Fewer bugs thanks to automated checks and scripts

Node.js and npm/yarn Basics

Node.js is the JavaScript runtime that lets you run JS outside the browser. npm and yarn are package managers for installing libraries and running scripts.

node -v
npm -v

Tip: Always use the latest LTS version of Node.js for best compatibility.

Project Bootstrapping (CRA, Vite, Next.js)

Use a project generator to quickly scaffold a new React app with all the essentials. The most popular options are:

• Create React App (CRA): Great for beginners and simple projects
• Vite: Super fast, modern build tool for React and other frameworks
• Next.js: Powerful framework for production apps, SSR, and more

Create React App:

npx create-react-app my-app
cd my-app
npm start

Vite:

npm create vite@latest my-vite-app -- --template react
cd my-vite-app
npm install
npm run dev

Next.js:

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

File & Folder Structure Overview

A clear folder structure makes your project easy to navigate and maintain. Here’s a typical structure for a React app:

my-app/
  node_modules/
  public/
    index.html
    favicon.ico
  src/
    App.js
    index.js
    components/
  package.json
  README.md

• public/: Static files (index.html, images, favicon)
• src/: All your JavaScript/JSX code and components
• components/: Reusable UI components
• package.json: Project metadata, dependencies, and scripts

Code Editors and Extensions

Use a modern code editor like VS Code for the best React development experience. Enhance productivity with extensions:

// Recommended VS Code extensions:
- ES7+ React/Redux/React-Native snippets
- Prettier - Code formatter
- ESLint
- GitLens
- Bracket Pair Colorizer

Tip: Set up Prettier and ESLint to auto-format and lint your code on save.

Package Management and Scripts

Use npm or yarn to install packages and run scripts. The package.json file defines your dependencies and useful commands:

// package.json scripts
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "lint": "eslint src --fix"
}

Tip: Add custom scripts for linting, formatting, or running tests.

Development Server & Hot Reloading

All modern React setups include a dev server with hot reloading. This means your app updates instantly in the browser as you save files.

// Start the dev server (CRA, Vite, Next.js)
npm start
// or
npm run dev
// Save a file and see the browser update automatically!

Analogy: Hot reloading is like having a live preview of your work—no need to refresh manually!

Debugging Tools

Use browser DevTools and the React Developer Tools extension to inspect components, state, and props. You can also use debugger statements in your code:

// Add a debugger statement in your code
function handleClick() {
  debugger;
  // Inspect variables in browser DevTools
}

Tip: Use breakpoints and watch variables to step through your code.

Linting, Formatting, and Code Quality

Use ESLint to catch bugs and enforce code style. Use Prettier to auto-format your code. Add them as dev dependencies:

// Install ESLint and Prettier
npm install --save-dev eslint prettier

// Run ESLint
npx eslint src

// Run Prettier
npx prettier --write src

Tip: Integrate ESLint and Prettier with your editor for real-time feedback.

Version Control (Git Basics)

Use Git to track changes, collaborate, and back up your code. Every project should be under version control from day one.

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

Tip: Commit early and often. Write clear commit messages.

Best Practices

Follow these best practices for a smooth React development experience:

• Keep dependencies up to date
• Use a consistent folder structure
• Automate formatting and linting
• Write scripts for common tasks
• Document your setup in a README
• Use .env files for environment variables
• Commit your code regularly

Common Mistakes

Avoid these common pitfalls when setting up your React project:

• Skipping version control (Git)
• Not using a linter or formatter
• Ignoring warnings and errors in the console
• Letting dependencies get outdated
• Not documenting your setup for teammates