React项目搭建

1. 环境准备

确保你的计算机上已安装以下工具：

• Node.js：React需要Node.js来运行和管理依赖。你可以从Node.js官网下载并安装最新版本。
• npm：Node.js安装后会自带npm（Node Package Manager），用于管理项目依赖。

2. 创建项目

使用Create React App是快速创建React应用的推荐方式。打开终端（命令行），执行以下命令：

npx create-react-app my-app

 这里my-app是你项目的名称。创建完成后，进入项目目录：

cd my-app

3. 启动开发服务器

在项目目录下，运行以下命令启动开发服务器：

npm start

默认情况下，应用会在http://localhost:3000上运行。打开浏览器访问该地址，你应该可以看到一个默认的React应用页面。

4. 项目结构

项目创建后，结构大致如下：

• public/：存放静态文件，如index.html。
• src/：存放你的React组件和其他JavaScript文件。
• package.json：记录项目依赖和脚本。

5. 编写代码

打开src/App.js，你可以开始编写你的React组件。例如，修改App.js如下：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Welcome to My React App!</h1>
    </div>
  );
}

export default App;

6. 添加依赖

如果你需要使用第三方库，比如axios来进行API请求，可以通过npm安装：

npm install axios

7. 进行路由设置

如果你需要处理多页面，可以安装react-router-dom：

npm install react-router-dom

 在src目录中创建新的组件文件（例如Home.js和About.js），并在App.js中配置路由：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;

8. 打包和部署

当你完成开发后，可以通过以下命令将应用打包：

npm run build

 生成的文件会在build目录中。你可以将这个目录中的文件部署到任何静态服务器上，如Vercel、Netlify等。