使用react第一步:搭建环境(webpack)

本文详细介绍了一个使用React构建项目的完整步骤,包括安装Node.js、创建项目结构、安装Webpack及相关依赖、配置Webpack、安装React及React DOM等核心组件,并通过示例代码展示了如何运行项目。

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

项目中要用到react,在此总结一下流程。

1.安装node.js

2.新建一个根目录,名为myapp . 在这个目录下执行命令行

npm init

顺序输入name等信息


此时package.json已生成。因为之后的webpack是本地安装的,所以需要修改一行代码,这样之后我们就能用命令行npm start来进行打包了。

 "scripts": {
    "start": "webpack"
  },


3.在myapp目录下命令行   本地安装webpack(不建议全局安装,)

npm install --save-dev webpack

此时生成node_modules文件夹与package.lock.json

4.在myapp目录下命令行   安装react等包(–save命令可将包添加至package.json

npm install --save react react-dom
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

5.在myapp目录下新建index.html    webpack.config.js   index.js

//webpack.config.js
const path =require('path');
module.exports = {
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test:  /\.js$/, 
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["es2015","react"] 
        }
      }
    ]
  }
};
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
  ReactDOM.render(
    <h1>我的第一个react例子</h1>,
    document.getElementById('root')
  );
//index.html
<!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8" />
    <title>example</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="dist/bundle.js"></script>
  </body>
 </html>

6.在myApp文件夹下命令行   

npm start

报错了,并提示需要安装webpack-cli。因此命令行

npm install webpack-cli -D --save-dev

之后重新npm start,发现生成dist文件夹,里面就是打包完成的bundle.js

7.运行index.html即可





评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值