React搭建步骤

  • Z时代
  • 2024-01-10
  • 分类：综合

react

 

创建一个基本的webpack项目

  1. 新建一个项目 根目录使用 npm init -y 初始化项目

  1. 在根目录创建一个src目录(用于存放开发的源代码) dist目录(用于生成打包后的文件),在src目录中创建一个index.html文件和index.js文件

  2. 在项目根目录执行以下两个命令：

    1. npm i webpack -D

    2. npm i webpack-cli -D

  1. 在项目的根目录创建一个webpack.config.js文件 添加以下内容

  1. 根目录执行webpack命令 会在dist目录下打包好一个main.js文件

  1. 在index.html中引入dist中的main.js文件

  1. 访问index.html 发现console控制台打印了index.js中的内容 但无法实时更新

  2. 我们需要用到webpack-dev-server

  3. 根目录执行以下命令: npm i webpack-dev-server -D

  1. 在package.json文件中添加以下信息:

  1. 运行命令 npm run dev 此时可以在本地服务器8080端口访问项目  ,此时webpack将打包好的main.js托管到了根目录中(运行在内存当中)我们此时需要将index.html中的引用修改成根目录中的main.js引用

  1. 我们能不能将index.html打包后也托管到内存中呢? 需要下载以下插件

  1. 在webpack.config.js中编写以下代码:

  1. 运行npm run dev命令:

  1. 将idnex.html中的main.js的引用删除即可.

如何在webpack项目中使用React

  1. 首先必须要先搭建好一个完整的webpack项目

  2. 在搭建好的项目根目录执行以下命令(可以再开启一个终端,之前终端被webpack占用):

npm i react react-dom -S:安装React插件和React Dom插件

  1. 需要在index.html和index.js文件中添加以下代码

index.html:

index.js:

 

以上是 React搭建步骤 的全部内容， 来源链接： utcz.com/z/382929.html

回到顶部