React: Prerequisite Knowledge and Environment Setup (Step 1)
Target Version: React 18 / 19+ Official Documentation: React Documentation
1. Before Learning React
React is a declarative UI library. You will find it much easier to learn if you have the following prerequisite knowledge:
- Modern ES6+ Syntax: Destructuring assignment, spread operator (...), arrow functions, and modules (import/export).
- DOM Concepts: An understanding that web documents are structured as a tree.
- npm/yarn: Basic usage of package managers.
2. Setting Up the Development Environment (Local Setup)
The fastest way to start a modern React project is by using Vite.
Creating and Running a Project
# 1. Create a Vite project (Choose React & JavaScript)
npm create vite@latest my-react-app -- --template react
# 2. Enter the project folder
cd my-react-app
# 3. Install dependencies
npm install
# 4. Start the development server
npm run dev
3. Core Philosophy of React
- Component-based: Divide the UI into independent, reusable pieces.
- Virtual DOM: Automatically optimizes performance by manipulating a Virtual DOM instead of the actual DOM.
- One-way Data Flow: Data always flows from parent to child (Props).