React✍️ 入门

React 简介

1. React 是由 Facebook 开发并开源的一个用于构建用户界面的 JavaScript 库；
2. 它主要用于构建单页应用 （SPA），其核心理念是组件化和声明式编程，即 ui = render(data)；​​

核心特点

1. 声明式​

   1. React 使用声明式编程范式来描述 UI；开发者只需描述界面在某一特定状态下的样子，React 会负责在状态变化时高效地更新和渲染界面；​
   2. React 的声明式，通过 jsx 语法定义实现，开发者只需时刻关注 state、props 的变化，React 会自动更新渲染视图；

2. 组件化​

   1. React 应用由多个组件组成，每个组件对应页面中的一个部分；组件是可重用的独立代码块，使得开发和维护大型应用变得更加高效；

3. 虚拟 DOM（Virtual DOM）​

   1. React 使用虚拟 DOM 来优化性能；虚拟 DOM 是一个轻量级的 JavaScript 对象，作为实际 DOM 的抽象副本；当状态或数据发生变化时，React 首先更新虚拟 DOM，然后计算出最小的 DOM 变更并将其应用到实际 DOM 上，从而提高性能；
   2. 在 React 中，引入了 fiber 架构 用于桥接数据变更与 dom 更新；

4. 单向数据流​

   1. React 中的数据流是单向的；这种数据流方式使得数据管理更加清晰和可预测，有助于调试和维护；

5. JSX 语法​

   1. JSX 是 JavaScript 的一种语法扩展，允许在 JavaScript 代码中编写类似 HTML 的标签；JSX 使得定义组件结构更加直观和简洁；

React 主要生态系统

1. React Router​：React Router 是一个用于在 React 应用中实现路由的库，允许开发者根据 URL 的变化渲染不同的组件；

2. Redux​：Redux 是一个用于管理应用状态的库，常与 React 结合使用；它通过全局状态树和单向数据流来简化状态管理；

3. Create React App​：Create React App 是一个官方的脚手架工具，帮助开发者快速创建和配置 React 项目；

hello world

import React from 'react';​
import ReactDOM from 'react-dom';​
​
function App() {​
  return (​
    <div>​
      <h1>Hello, React!</h1>​
      <Welcome name="World" />​
    </div>​
  );​
}​
​
function Welcome(props) {​
  return <h1>Hello, {props.name}</h1>;​
}​
​
ReactDOM.render(<App />, document.getElementById('root'));

React 对比 Vue

对比项	Vue	React
全球使用量		✅
国内使用量	✅
性能	✅	✅
易上手	✅
灵活度		✅
大型企业		✅
中小型企业	✅
生态		✅

React19 项目初始化

1. React 项目初始化方式有很多种选择，可以选择已有脚手架工具，直接创建 React 项目；

2. 也可以通过自定义项目结构，然后使用构建工具实现 React 项目的构建打包流程；

脚手架方案

1. Vite：通过 vite 创建 React 项目，只需要一行命令即可，创建的工作是 vite 工程初始化脚手架完成；

   pnpm create vite my-app --template react-ts
   

2. create-react-app：create-react-app 是 React 提供的一个基于 webpack 构建的脚手架，核心逻辑封装到了 react-scripts 包中，他同样屏蔽了创建 React 项目时负责的配置，开发者只需要一行命令即可初始化 React 工程；

   npx create-react-app my-app --template typescript
   

自搭建方案

1. 上面介绍了通过脚手架创建 React 工程的两种常见方案，在工作中，一般需要根据自身业务来搭建 React 工程，这时我们可能涉及许多选择，特别是打包构建方案的选择；

2. 以 vite 和 webpack 为例，介绍 React 基础工程的搭建过程；

Webpack5

1. 创建项目目录并初始化

   mkdir react19-webpack-app
   cd react19-webpack-app
   npm init -y
   

2. 安装依赖

   npm install react@next react-dom@next
   npm install --save-dev webpack webpack-cli webpack-dev-server 
   npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
   npm install --save-dev html-webpack-plugin css-loader style-loader
   npm install --save-dev sass sass-loader
   

3. 创建项目结构

   react19-webpack-app/​
   ├── src/​
   │   ├── index.js​
   │   └── App.js​
   ├── public/​
   │   └── index.html​
   ├── webpack.config.js​
   ├── .babelrc​
   └── package.json
   

4. 配置 Babel：创建 .babelrc 文件并添加以下内容：

   {
     "presets": [
       "@babel/preset-env",
       ["@babel/preset-react", { "runtime": "automatic" }]
     ]
   }
   

5. 配置 Webpack

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const { stat } = require('fs');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js',
     },
     module: {
       rules: [
         {
           test: /\.(js|jsx)$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
           },
         },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
         },
       ],
     },
     resolve: {
       extensions: ['.js', '.jsx'],
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './public/index.html',
       }),
     ],
     devServer: {
       static: {
         directory: path.join(__dirname, 'public'),
       },
       compress: true,
       port: 9000,
     },
   };
   

6. 创建 React 组件：在 src 目录下创建 index.js 和 App.js 文件

   JavaScript

   JavaScript

   // src/index.js
   import { createRoot } from 'react-dom/client';
   import App from './App';
   
   const root = createRoot(document.getElementById('root'));
   root.render(<App />);
   

   // src/App.js
   import React from 'react';
   
   function App() {
     return (
       <div>
         <h1>Hello React 19 with Webpack!</h1>
       </div>
     );
   }
   
   export default App;
   

7. 创建 HTML 模板

   <!DOCTYPE html>​
   <html lang="en">​
     <head>​
       <meta charset="UTF-8" />​
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />​
       <title>React App</title>​
     </head>​
     <body>​
       <div id="root"></div>​
     </body>​
   </html>
   

8. 更新 package.json 脚本

   {
     "name": "webpack-react",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "start": "webpack serve --mode development",
       "build": "webpack --mode production"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "volta": {
       "node": "20.17.0"
     },
     "dependencies": {
       "react": "^19.2.0-canary-b6c0aa88-20250609",
       "react-dom": "^19.2.0-canary-b6c0aa88-20250609"
     },
     "devDependencies": {
       "@babel/core": "^7.27.4",
       "@babel/preset-env": "^7.27.2",
       "@babel/preset-react": "^7.27.1",
       "babel-loader": "^10.0.0",
       "css-loader": "^7.1.2",
       "html-webpack-plugin": "^5.6.3",
       "sass": "^1.89.2",
       "sass-loader": "^16.0.5",
       "style-loader": "^4.0.0",
       "webpack": "^5.99.9",
       "webpack-cli": "^6.0.1",
       "webpack-dev-server": "^5.2.2"
     }
   }
   

9. 启动开发服务器

   npm start
   

Vite

1. 创建项目目录并初始化

   mkdir react19-vite-app
   cd react19-vite-app
   npm init -y
   

2. 安装 Vite 和相关依赖

   npm install vite @vitejs/plugin-react --save-dev
   npm install react@next react-dom@next
   

3. 创建项目结构

   react19-vite-app/​
   ├── src/​
   │   ├── main.jsx​
   │   ├── App.jsx​
   │   └── index.css​
   ├── index.html​
   ├── vite.config.js​
   ├── package.json​
   └── .gitignore
   

4. 创建 Vite 配置文件

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     server: {
       port: 3000,
       open: true
     }
   })
   

5. 创建 React 组件

   JSX

   JSX

   CSS

   // src/main.jsx
   import { createRoot } from 'react-dom/client';
   import App from './App';
   
   const root = createRoot(document.getElementById('root'));
   root.render(<App />);
   

   // src/App.jsx
   import React from 'react';
   
   function App() {
     return (
       <div>
         <h1>Hello React 19 with Vite!</h1>
       </div>
     );
   }
   
   export default App;
   

   body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #f0f0f0;
   }
   

6. 创建 HTML 模板

   <!DOCTYPE html>
   <html lang="en">
   
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React 19 + Vite App</title>
   </head>
   
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
   
   </html>
   

7. 更新 package.json 脚本

   {
     "name": "vite-react",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "serve": "vite preview"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "type": "commonjs",
     "devDependencies": {
       "@vitejs/plugin-react": "^4.5.2",
       "vite": "^6.3.5"
     },
     "dependencies": {
       "react": "^19.2.0-canary-b6c0aa88-20250609",
       "react-dom": "^19.2.0-canary-b6c0aa88-20250609"
     }
   }
   

8. 启动开发服务器

   npm run dev
   

打赏作者

您的打赏是我前进的动力

微信

支付宝

leetcode🧑‍💻 968. 监控二叉树

上一篇

React✍️ 什么是 JSX

下一篇

评论

你好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

1. 1. React 简介
2. 2. 核心特点
3. 3. React 主要生态系统
4. 4. hello world
5. 5. React 对比 Vue
6. 6. React19 项目初始化
   1. 6.1. 脚手架方案
   2. 6.2. 自搭建方案
      1. 6.2.1. Webpack5
      2. 6.2.2. Vite