YouTip

---

Building the Production Bundle

During development, run npm run dev to start Vite's local development server with hot module replacement.

For deployment, you need an optimized and compressed production bundle.

$ npm run build

After execution, a dist/ folder is generated in the project root directory:

dist/
├── index.html              # Entry HTML
├── assets/
│   ├── index-Df3aBc9x.js   # Bundled and compressed JS
│   ├── index-Gh7jKl2m.css  # Extracted and compressed CSS
│   └── ...
├── posts.json              # Files from public directory copied as-is
└── favicon.svg             # Static assets

Key changes:

• File names include hashes (hash changes when content changes, for browser cache control)
• Code is compressed and tree-shaken (unused code removed)
• Contents of public/ directory are copied to root as-is

Preview the build result: Run npx vite preview to start a local production-mode server, simulating the online environment.

---

Pushing the Project to GitHub

Step 1: Create a GitHub Repository

On GitHub, click + → New repository, and fill in:

• Repository name: react-blog-app
• Set to Public (for free deployment)
• Do NOT check "Initialize with README"

Step 2: Initialize Git and Push

$ cd blog-app
$ git init
$ git add .
$ git commit -m "Initialize React blog project"
$ git branch -M main
$ git remote add origin https://github.com/your-username/react-blog-app.git
$ git push -u origin main

Before pushing, confirm that .gitignore includes node_modules and dist. node_modules should not be uploaded (can be restored via npm install), and dist is automatically generated by the build platform.

---

Vercel Deployment

Vercel is currently the most popular frontend deployment platform, offering zero-config support for React/Vite projects.

Deployment Steps

1. Visit vercel.com and log in with your GitHub account
2. Click "New Project" → Import Git Repository → select react-blog-app
3. Vercel automatically detects Vite + React, with configuration auto-filled
4. Click "Deploy" and wait a few dozen seconds
5. After successful deployment, obtain a link such as: https://react-blog-app.vercel.app

Configuration Item	Value	Description
Framework Preset	Vite	Auto-detected
Build Command	npm run build	Auto-detected
Output Directory	dist	Auto-detected

Automatic Deployment

After this, every git push will automatically trigger Vercel to: pull code → npm install → npm run build → deploy to production.

The entire process is fully automatic — push to deploy.

---

Custom Domain (Optional)

1. Vercel project Dashboard → Settings → Domains
2. Enter your domain (e.g., blog.)
3. Add a CNAME record at your DNS provider pointing to cname.vercel-dns.com
4. Wait for DNS to take effect, Vercel automatically applies for an SSL certificate

---

Next Learning Directions

Learning Direction	Suitable For	Recommended Starting Point
TypeScript + React	Those who want to write more rigorous large-scale projects	Add TS to the project, starting with Props and Hook types
Next.js	Those who need SEO, SSR, and full-stack capabilities	A React-based full-stack framework with file-based routing
React Query (TanStack Query)	Those who need more powerful data request management	Caching, automatic refetching, optimistic updates
State Management Libraries	Applications with very complex state logic	Zustand (lightweight), Redux Toolkit (heavyweight)
Component Libraries	Rapidly building admin dashboards	Ant Design, MUI, shadcn/ui

React vs Vue3 Full-Stack Route Comparison

Direction	React Ecosystem	Vue3 Ecosystem
Full-stack Framework	Next.js	Nuxt.js
Type System	TypeScript (better native support)	TypeScript
State Management (Lightweight)	Zustand	Pinia
Data Fetching	React Query	VueUse / TanStack Query
Mobile	React Native	— (Weex discontinued)

The most important step is already complete — you've built a real project with React from start to finish. Whether TypeScript or Next.js comes next, you're adding dimensions on top of an existing foundation. React's way of thinking (state-driven views, componentization, unidirectional data flow) will serve you in every subsequent project.