01-Get Started with ReactJS + Vite Project with Video in Khmer

Hello my friends! Today I will show you how to setup ReactJS project using Vite step-by-step. Very easy to follow with video tutorials in Khmer!

What is ReactJS & Vite?

• ReactJS: A popular JavaScript library for building fast and interactive user interfaces using reusable components.
• Vite: A modern, super fast build tool that replaces old tools like Create React App (CRA). It makes development server start almost instant!

💡 Tip: Why use Vite instead of Create React App? Because Vite is super fast! Cold start server takes less than 1 second and Hot Module Replacement (HMR) updates page instantly when you change code! Check out the official Vite Documentation for advanced configuration.

Step-by-Step Guide to Create ReactJS Project

Step 1: Install Node.js

First step, your computer needs Node.js runtime environment.

• If not installed yet, go to Node.js official website and download LTS version.
• If you already have Node.js, verify installation by running this command in terminal:

node -v

💡 Tip: Always download Node.js LTS (Long Term Support) version for stability! Also check npm -v to make sure npm package manager is working properly.

Watch Video: How to download, install and verify NodeJS on Windows (Khmer)

Step 2: Create a New React Project with Vite

Open terminal inside folder where you want to keep project, then run command:

npm create vite@latest my-react-app

(You can replace my-react-app with your project name!)

Select framework React and variant JavaScript.

💡 Tip: If command ask Ok to proceed? (y), type y and press Enter to allow npm download latest Vite creator package!

Step 3: Navigate to Project Directory

Change directory to your newly created project folder:

cd my-react-app

Step 4: Install Dependencies

Run command below to download and install all required packages into node_modules:

npm install

💡 Tip: Whenever you clone or download React project from GitHub, node_modules folder is missing. Always run npm install first before running project!

Watch Video: How to setup and run ReactJS project (Khmer)

Step 5: Start Development Server

Now, start your local dev server:

npm run dev

Open browser and visit: http://localhost:5173

💡 Tip: Press Ctrl + C in command prompt anytime if you want to stop development server.

Step 6: Edit Your Code & Hello World

Open project folder in your code editor (like VS Code or WebStorm).

1. Navigate to src/App.jsx file. This is main component file.
2. Edit text inside component and save (Ctrl + S).
3. Browser page will update automatically!

💡 Tip: Install ES7+ React/Redux/React-Native snippets extension in VS Code! Type rafce and press Tab to quickly generate functional component code!

Watch Video: Get to know ReactJS structure and Hello World (Khmer)

Step 7: Build Project for Production

When you want to deploy project to live web server, run:

npm run build

Your production app files are generated ready inside dist folder!

💡 Tip: You can deploy your dist folder for free on platforms like Vercel, Netlify, or GitHub Pages!

💡 Next Lesson: Continue your React journey with 02 - Functional & Class Component with Props to learn component building blocks!

---

Hope this tutorial help you start ReactJS project easily! Don't forget to practice and watch videos. Happy coding my friends! Sharing is caring!