当前位置：首页 > news >正文

React安装使用教程

news 2025/7/2 16:55:25

一、React 简介

React 是由 Facebook 开发和维护的一个用于构建用户界面的 JavaScript 库，适用于构建复杂的单页应用（SPA）。它采用组件化、虚拟 DOM 和声明式编程等理念，已成为前端开发的主流选择。

二、React 安装方式

2.1 使用 CDN 引入（适合学习/演示）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>Hello React</title><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">const App = () => <h1>Hello, React!</h1>;ReactDOM.createRoot(document.getElementById('root')).render(<App />);</script>
</body>
</html>

2.2 使用 Create React App（推荐）

安装 Node.js

访问 https://nodejs.org/ 安装最新 LTS 版本。

安装并创建项目

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

浏览器访问：http://localhost:3000

2.3 使用 Vite 创建 React 项目（更快）

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

三、React 项目结构说明

my-app/
├── public/
├── src/
│   ├── App.js
│   ├── index.js
│   └── components/
├── package.json
└── README.md

四、React 基本语法示例

function App() {const [count, setCount] = React.useState(0);return (<div><h1>Hello, React!</h1><p>当前计数：{count}</p><button onClick={() => setCount(count + 1)}>加一</button></div>);
}

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

五、核心特性简介

特性	说明
组件化	UI 拆分为多个组件
JSX	JavaScript + XML 语法
Hooks	React 16.8+ 状态管理 API（如 useState）
虚拟 DOM	高效更新界面
单向数据流	父组件向子组件传递数据

六、常用 Hooks 示例

import React, { useState, useEffect } from 'react';function Timer() {const [seconds, setSeconds] = useState(0);useEffect(() => {const timer = setInterval(() => setSeconds(s => s + 1), 1000);return () => clearInterval(timer);}, []);return <div>已运行：{seconds} 秒</div>;
}