React安装使用教程-EW帮帮网

一、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>;
}

七、常见问题

Q1: JSX 报错？

确保使用 Babel 编译 JSX 或通过 Create React App/Vite 搭建项目

Q2: 项目无法启动？

使用 npm install 安装依赖
检查端口冲突，或使用 npm start -- --port=8080

八、推荐开发工具

VS Code（主流编辑器，搭配 ESLint/Prettier 插件）
React Developer Tools（浏览器插件）

本文由“小奇Java面试”原创发布，转载请注明出处。

可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。

在这里插入图片描述

React安装使用教程