🚀 Setting Up a React Project

By Daniel Nguyen

Published in React JS

September 25, 2025

1 min read

Before we begin, make sure you have the following installed:

A code editor like VS Code
Node.js (version 14.18+, 16+ recommended)
Git

Visual Studio Code

✅ 1. Open Settings (JSON format)

Press Ctrl + Shift + P (or Cmd + Shift + P on macOS)
Type: Preferences: Open Settings (JSON) → select it

✅ 2. Add or Edit the Following Settings

Paste the following into your settings.json file:

{
  "git.ignoreMissingGitWarning": true,
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "explorer.confirmDelete": false,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.autoSave": "afterDelay",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "editor.tabCompletion": "on",
  "editor.formatOnPaste": true,
  "eslint.format.enable": true,
  "editor.renderWhitespace": "all",
  "editor.stickyTabStops": true,
  "vs-code-prettier-eslint.prettierLast": true,
  "prettier.tabWidth": 4,
  "prettier.useTabs": true,
  "[mdx]": {
    "editor.defaultFormatter": "unifiedjs.vscode-mdx"
  },
  "explorer.confirmPasteNative": false,
  "files.associations": {
    ".env*": "dotenv"
  },
  "editor.tokenColorCustomizations": {
    "[*Light*]": {
      "textMateRules": [
        {
          "scope": "ref.matchtext",
          "settings": {
            "foreground": "#000"
          }
        }
      ]
    },
    "[*Dark*]": {
      "textMateRules": [
        {
          "scope": "ref.matchtext",
          "settings": {
            "foreground": "#fff"
          }
        }
      ]
    },
    "textMateRules": []
  },
  "dotenv.enableAutocloaking": false,
  "terminal.integrated.enableMultiLinePasteWarning": "never",
  "html.format.enable": false,
  "github.copilot.nextEditSuggestions.enabled": false,
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": false,
    "scminput": false,
    "typescriptreact": true
  },
  "github.copilot.advanced": {

  }
}

✅ 3. Install a Formatter (e.g., Prettier)

Go to the Extensions panel (Ctrl + Shift + X)
Search for: Prettier - Code formatter
Install it

Create React App with Vite

Vite is a modern frontend build tool created by Evan You (the creator of Vue.js). It’s designed to provide a faster and more efficient development experience compared to older tools like Webpack.

Step 1: Create a Vite Project

Open your terminal and run the following command to scaffold a new Vite + React project:

npm create vite@latest my-react-app -- --template react

Replace my-react-app with your desired project name.

Step 2: Navigate and Install Dependencies

After the project is scaffolded:

cd my-react-app
npm install

Step 3: Run the Development Server

To start the dev server:

npm run dev

You’ll see something like this:

VITE vX.X.X  ready in XXX ms

  ➜  Local:   http://localhost:5173/

Open that URL in your browser to see your new React app in action!

Set Up Tailwind CSS with Vite

Step 1: Install Tailwind and the Vite Plugin

Install the necessary packages:

npm install tailwindcss @tailwindcss/vite

Step 2: Configure Tailwind in `vite.config.ts`

Update your vite.config.ts (or .js) to include the Tailwind plugin:

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

Step 3: Import Tailwind in Your CSS

Create a CSS file like src/style.css and import Tailwind:

/* src/style.css */
@import "tailwindcss";

Step 4: Use Tailwind in Your Markup

Make sure the CSS file is included in your HTML (this depends on your framework). For example, in plain HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/src/style.css" rel="stylesheet" />
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

In React/Vue/etc., simply import the CSS in your main.tsx or main.js:

import './style.css'

Set up a GitHub repository

Step 1: Create a GitHub Repository

Go to https://github.com.
Click “New repository” (usually on the top left or under your profile dropdown).
Fill in:
- Repository name (e.g., vite-react-app)
- Optional: Description
- Public or Private
- ✅ Check “Add a README file”
Click “Create repository”

Step 3: Link Local Project to GitHub

Make sure you’re inside your Vite project folder:

git init
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git

Step 4: Push Your Code to GitHub

git add .
git commit -m "Initial Vite project setup"
git push -u origin main

If you get an error saying “main does not exist”, you might need:

git branch -M main
git push -u origin main

🚀 Setting Up a React Project

Visual Studio Code

✅ 1. Open Settings (JSON format)

✅ 2. Add or Edit the Following Settings

✅ 3. Install a Formatter (e.g., Prettier)

Create React App with Vite

Step 1: Create a Vite Project

Step 2: Navigate and Install Dependencies

Step 3: Run the Development Server

Set Up Tailwind CSS with Vite

Step 1: Install Tailwind and the Vite Plugin

Step 2: Configure Tailwind in `vite.config.ts`

Step 3: Import Tailwind in Your CSS

Step 4: Use Tailwind in Your Markup

Set up a GitHub repository

Step 1: Create a GitHub Repository

Step 3: Link Local Project to GitHub

Step 4: Push Your Code to GitHub

Tags

Share

Table Of Contents

Related Posts

🚀 Setting Up a React Project

.css-1qh5hbx{box-sizing:border-box;margin:0;min-width:0;display:block;color:var(--theme-ui-colors-heading,#2d3748);font-weight:bold;-webkit-text-decoration:none;text-decoration:none;margin-bottom:1rem;font-size:1.5rem;position:relative;}Visual Studio Code

Tags

Share

Table Of Contents

Related Posts

Visual Studio Code