Dev98
Home
🚀 Setting Up a React Project
Daniel Nguyen
Daniel Nguyen
September 25, 2025
1 min

Table Of Contents

01
Visual Studio Code
02
Create React App with Vite
03
Set Up Tailwind CSS with Vite
04
Set up a GitHub repository

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

  1. Go to https://github.com.

  2. Click “New repository” (usually on the top left or under your profile dropdown).

  3. Fill in:

    • Repository name (e.g., vite-react-app)
    • Optional: Description
    • Public or Private
    • ✅ Check “Add a README file”

  4. Click “Create repository”

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

Tags

#ReactFundamental

Share

Daniel Nguyen

Daniel Nguyen

Frontend Developer

Frontend developer specializing in React, Next.js, and JavaScript. Writing practical guides on modern web development at Dev98.

Expertise

React
Next.js
JavaScript
TypeScript
Python

Social Media

githublinkedinyoutubewebsite
Dev98

Dev98

React · Next.js · Web development