手动创建React项目

weixin_47529732

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

阅读量395

点赞数 5

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

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

本文链接：https://blog.csdn.net/weixin_47529732/article/details/138503981

版权

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.

weixin_47529732

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
手动创建React项目

执行成功后项目根目录下会生成 build 文件夹，在浏览器中打开目录下的 index.html 会发现页面一片空白，查看控制台会发现报错内容为。执行以下命令会让项目运行在本地，默认是localhost:3000上，修改代码会实时更新页面。缺点：每次修改都不能实时查看，都需要打包并且修改路径才能查看。- index.js **入口文件**或者是 localhost找不到某文件类似的报错信息。上述步骤正确操作后，此时在项目根目录的终端中执行。注：下面的命令需要在项目根目录下的终端执行。刷新页面就会有内容！
复制链接

扫一扫

手动创建React项目

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

2. 书写 index.html

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

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

3.2 下载 react react-dom react-scripts

4.书写入口文件 index.js

5. 打包项目

6. 运行项目

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

“相关推荐”对你有帮助么？