手动创建React项目

weixin_47529732

已于 2024-05-06 19:02:07 修改

阅读量499

点赞数 5

文章标签： react.js 前端前端框架

于 2024-05-06 19:01:25 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47529732/article/details/138503981

版权

本文详细介绍了如何从头开始创建一个React项目，包括创建文件夹、编写HTML和CSS，使用npm或yarn安装依赖，书写入口文件，打包和运行项目，以及简化命令行操作。过程中还涉及了打包时的常见问题和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 根据项目结构创建文件及文件夹

2. 书写 index.html

3. 通过 npm 或 yarn 下载需要的插件

3.1 初始化项目：生成 package.json文件

3.2 下载 react react-dom react-scripts

1. 根据项目结构创建文件及文件夹

- 项目结构

- public

- index.html

- src

- index.css

- index.js **入口文件**

2. 书写 index.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 Manually</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

3. 通过 npm 或 yarn 下载需要的插件

注：下面的命令需要在项目根目录下的终端执行

3.1 初始化项目：生成 package.json文件

npm init -y
或者
yarn init -y

3.2 下载 react react-dom react-scripts

npm install react react-dom react-scripts
或者
yarn add react react-dom react-scripts

4.书写入口文件 index.js

// src / index.js 是js的的入口文件
// 引入ReactDOM
import ReactDOM from "react-dom/client"
import "./index.css"

// 创建一个JSX
const App = <div>
    <h1>手动创建React项目</h1>
    哈哈哈哈哈哈哈哈哈
</div>

// 获取根容器
const root = ReactDOM.createRoot(document.getElementById('root'))
// 将App渲染进根容器
root.render(App)

5. 打包项目

上述步骤正确操作后，此时在项目根目录的终端中执行

npx react-scripts build

执行成功后项目根目录下会生成 build 文件夹，在浏览器中打开目录下的 index.html 会发现页面一片空白，查看控制台会发现报错内容为

GET file:///D:/static/js/main.fc67747d.js net::ERR_FILE_NOT_FOUND

或者是 localhost找不到某文件类似的报错信息

修改 build/index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>React App</title>
    <!-- <script defer="defer" src="/static/js/main.fc67747d.js"></script>
    路径前面加个 . 修改成 -->
    <script defer="defer" src="./static/js/main.fc67747d.js"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>

刷新页面就会有内容！！！

缺点：每次修改都不能实时查看，都需要打包并且修改路径才能查看。

一般是上线时才会打包项目。

6. 运行项目

执行以下命令会让项目运行在本地，默认是localhost:3000上，修改代码会实时更新页面。

npx react-scripts start

此时删掉 build 文件夹也没有关系。

7. 简化打包和运行项目的命令

在package.json下添加一下代码

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  ...
}

修改后运行命令可以简化成

yarn start

或者

npm start

打包项目就是把start改成bulid.