Web Dev 102- React + Vite

7/6/25

Intro

Learn how to refactor the Web Dev 101 project into a React app using Vite.

Web Dev 102: React by OC Robotics

Create new branch and backup original files

• Create branch

git checkout -b webdev102

• Move files to legacy folder

mkdir legacy && mv index.html style.css script.js legacy/

9/5/25

Setting Up a React Project – Toolchains Overview

There are multiple ways to set up a React project ¹, including some popular React toolchains such as:

• Create React App (CRA) (Deprecated)
• Gatsby
• Vite – a modern, fast build tool that’s great for development.
• Next.js – for full-stack React apps with SSR and routing.

In this setup, we’ll use Vite CLI, a lightweight and ultra-fast build tool, to scaffold a React project. It’s great for modern frontend development and offers near-instant dev server startup.

Create React App Using Vite

• Make sure you have npm and Node.js installed

node -v
npm -v

• If you do not have them, follow Installing Node.js via NVM
• Create React App using Vite CLI (with ., or current directory, as the project name)

npm create vite@latest . --template react

• Install dependencies

npm install

• Start the development server

npm run dev

• Open React app in the browser

http://localhost:5173

Deploying Your Site

GitHub Pages

• Set the correct base in vite.config.js (i.e. / for user site or /<REPO>/ for project site) ²

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
// https://vite.dev/config/
export default defineConfig({
  base: '/',
  // base: '/<REPO>/',
  plugins: [react()],
})

• Install the gh-pages package as a dev dependency:

npm install gh-pages --save-dev

• Update package.json

package.json

• The predeploy script will run before deployment to build the project
• The deploy script will use gh-pages to deploy the dist folder to the gh-pages branch
• Add these scripts inside the “scripts” section like:

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist",
  },

• Deploy app ³

npm run deploy

• Go to Settings → Pages in GitHub and make sure the branch is set to gh-pages

Vercel

• Commit changes and push webdev102 branch to GitHub

git push origin webdev102

• Go to vercel.com and sign in with GitHub
• Import project- Click “Add New → Project” and select your repo
• If Vercel doesn’t auto-detect Vite, set the following options:
  • Framework: Vite
  • Build command: npm run build
  • Output directory: dist
• Click “Deploy”
• Your site will be live on a *.vercel.app domain (example)

React Hello World

• Clean up the project so that it no longer displays the default page, but a simple message instead

src\App.jsx

import './App.css'
 
function App() {
  return (
    <>
      <h1>🎉React🎉</h1>
    </>
  )
}
 
export default App

src\index.css

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f0f8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
h1 {
  color: #2c3e50;
  font-size: 3rem;
  text-align: center;
  animation: pop-in 0.6s ease-out;
}
 
/* Animation */
@keyframes pop-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
 
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

Add a button

• Create React button How to create a React Button

App.jsx

import './App.css'
import { useState } from 'react';
 
 
function App() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
    console.log(`Button clicked ${count + 1} times`);
  }
 
  return (
    <>
      <h1>🎉React🎉</h1>
      <button onClick={handleClick}>Count is {count}</button>
    </>
  )
}
 
export default App

index.css

button {
  padding: 8px 16px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background-color: #2c3e50;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 20px;
}
 
/* Optional hover effect */
button:hover {
  background-color: #1a252f;
}

• Commit and push changes to the branch and the deployment should be triggered automatically (example)

Related

• TOP- React

➡️Next: Web Dev 103- Material UI

Footnotes

1. https://www.theodinproject.com/lessons/node-path-react-new-setting-up-a-react-environment ↩

2. https://vite.dev/guide/static-deploy.html#github-pages ↩

3. https://dev.to/rashidshamloo/deploying-vite-react-app-to-github-pages-35hf ↩