4:22
React 19 Tutorial - 2 - Your First React App
Codevolution
Overview
This video guides you through setting up your first React application using Vite, a modern build tool. It covers the necessary software installations (Node.js and a code editor like VS Code), the command to initiate a new React project, and how to run and test your initial "Hello World" app. The tutorial also introduces Vite's hot module replacement feature for instant feedback on code changes and briefly touches upon navigating the project's folder structure.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- Install Node.js from nodejs.org to provide the JavaScript runtime environment.
- Install a code editor, such as VS Code, for writing and managing your code.
- Ensure Node.js is up-to-date if already installed.
A properly configured development environment is the foundation for building any web application, ensuring you have the necessary tools to write, build, and run your code efficiently.
Download and install the latest stable release of Node.js from nodejs.org and VS Code from code.visualstudio.com.
- Use the command `npm create vite@latest` in your terminal to start a new project.
- When prompted, name your project (e.g., 'hello-world'), select 'React' as the framework, and choose 'JavaScript + React compiler' as the variant.
- Opt out of experimental features like 'Rollup Vite' and confirm installation with npm.
- Vite is a fast build tool that simplifies the React development process.
This command automates the setup of a new React project, saving you from manual configuration and allowing you to start coding immediately.
Running `npm create vite@latest`, then entering 'hello-world' for the project name, selecting React and JavaScript + React compiler, and saying 'no' to experimental features.
- After project creation, navigate into the new project folder using `cd hello-world`.
- Run the development server with the command `npm run dev`.
- Access your running application in the browser via the provided localhost link (e.g., `localhost:5173`).
- Vite's hot module replacement (HMR) automatically updates the browser when code changes are saved, without a full refresh.
This allows you to see your application's changes live as you code, significantly speeding up the development and debugging cycle.
After saving a change in `app.jsx` (e.g., changing the heading text), the browser instantly reflects the update without needing to manually refresh the page.
- Locate the main application file (e.g., `app.jsx`) within the `src` folder to make code edits.
- Modify the content, such as the main heading text, and save the file.
- Stop the development server by pressing `Ctrl + C` in the terminal.
- Restart the development server using `npm run dev` after navigating to the project directory.
Understanding how to modify code and control the development server is essential for making changes and managing your running application.
Changing the text 'Vite + React' to 'Hello World' in the main heading within `app.jsx` and observing the immediate browser update.
Key takeaways
- A robust development environment, including Node.js and a code editor, is crucial for React development.
- Vite is a modern, fast build tool that simplifies the creation and management of React projects.
- The `npm create vite@latest` command is the standard way to scaffold a new React application.
- Client-side React rendering is the foundational approach for beginners.
- Vite's hot module replacement enables instant feedback on code changes, accelerating development.
- The `npm run dev` command starts a local development server for your React app.
- Always ensure you are in your project's root directory before running development commands like `npm run dev`.
Key terms
Node.jsVS CodeReactVitenpmcreate-viteJavaScript + React compilerDevelopment ServerHot Module Replacement (HMR)app.jsx
Test your understanding
- What are the two essential software components needed to set up a React development environment?
- How do you initiate a new React project using Vite?
- What is the primary benefit of Vite's hot module replacement feature?
- How can you stop and restart the development server for your React application?
- Why is it important to select 'JavaScript + React compiler' when creating a new project with Vite for this course?