React环境搭建与创建第一个应用

本章将指导您完成React开发环境的搭建，并创建您的第一个React应用。

环境要求

在开始之前，请确保您的计算机已安装以下软件：

Node.js (版本12.0.0或更高)
npm (Node包管理器，随Node.js一起安装) 或 yarn
代码编辑器 (推荐VSCode、WebStorm等)

检查Node.js安装

打开终端或命令提示符，运行以下命令检查是否已正确安装：

$ node --version
$ npm --version

如果看到版本号输出，说明安装成功。

使用Create React App创建项目

Create React App是官方推荐的创建React应用的方式，它为您配置好了所有必要的工具和预设。

1创建新应用

在终端中运行以下命令创建名为"my-first-react-app"的新应用：

$ npx create-react-app my-first-react-app

npx是npm 5.2+版本自带的包运行工具，可以运行远程包而无需安装到本地。

2进入项目目录

创建完成后，进入项目文件夹：

$ cd my-first-react-app

3启动开发服务器

运行以下命令启动开发服务器：

$ npm start

命令执行后，浏览器会自动打开 http://localhost:3000，您将看到默认的React应用界面。

项目结构分析

了解Create React App生成的项目结构对于后续开发非常重要：


my-first-react-app/
├── node_modules/          # 项目依赖包
├── public/               # 静态文件
│   ├── index.html        # 主HTML文件
│   ├── favicon.ico       # 网站图标
│   └── manifest.json     # PWA配置文件
├── src/                  # 源代码目录
│   ├── App.css           # App组件样式
│   ├── App.js            # App主组件
│   ├── App.test.js       # App组件测试
│   ├── index.css         # 全局样式
│   ├── index.js          # 应用入口文件
│   ├── logo.svg          # React图标
│   └── reportWebVitals.js # 性能监测
├── .gitignore           # Git忽略配置
├── package.json         # 项目配置和依赖
├── README.md            # 项目说明文档
└── package-lock.json    # 依赖版本锁文件

关键文件解析

src/index.js - 应用入口文件


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 性能监测（可选）
reportWebVitals();

src/App.js - 主组件


import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

创建您的第一个组件

让我们创建一个简单的自定义组件，替换默认内容：

创建Welcome组件

创建新文件 src/Welcome.js


import React from 'react';

function Welcome() {
  return (
    <div className="welcome">
      <h1>欢迎来到React世界！</h1>
      <p>这是我的第一个React组件</p>
      <button onClick={() => alert('你好，React！')}>
        点击我
      </button>
    </div>
  );
}

export default Welcome;

修改App.js使用新组件


import './App.css';
import Welcome from './Welcome';  // 导入Welcome组件

function App() {
  return (
    <div className="App">
      <Welcome />  {/* 使用Welcome组件 */}
    </div>
  );
}

export default App;

常用命令汇总

命令	说明
`npm start`	启动开发服务器，支持热重载
`npm test`	运行测试套件
`npm run build`	构建生产版本，输出到build文件夹
`npm run eject`	弹出配置文件（不可逆操作）

重要提醒

npm run eject 是不可逆操作，请谨慎使用
生产环境部署前务必运行 npm run build
建议使用Git进行版本控制

常见问题解决

可以尝试以下方法：

使用淘宝镜像：npm config set registry https://registry.npm.taobao.org
使用yarn：yarn create react-app my-app
使用特定版本：npx create-react-app@latest my-app

启动时可以指定其他端口：

$ PORT=3001 npm start

或者在Windows上：set PORT=3001 && npm start

恭喜！

您已成功搭建React开发环境并创建了第一个React应用。接下来可以开始学习React的核心概念了。

上一章: React简介下一章: JSX语法详解

React教程