React环境配置(第一个React项目)

时间:2023-03-08 16:01:49

使用Webpack构建React项目

1. 使用NPM配置React环境

NPM及React安装自行百度

  1. 首先创建一个文件夹,the_first_React
  2. 进入到创建好的目录,npm init,然后一路回车
  3. 新建src目录,在src中新建js文件夹,并在js中新建index.js文件
  4. npm install --save react react-dom babelify babel-preset-react
  5. npm install babel-preset-es2015 --save 安装一些依赖包

2. webpack热加载配置

  1. 新建webpack.config.js文件(注意:webpack2以后,loaders改为rules)
    var webpack = require('webpack');
    var path = require('path'); module.exports = {
    mode: 'production',
    entry: './src/js/index.js',
    output: {
    path:path.resolve(__dirname),
    filename: 'bundle.js'
    },
    module:{
    rules:[{
    test: /\.js?$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    query: {
    presets: ['react', 'es2015']
    }
    },
    {
    test: /\.css$/,
    //CSS模块化用注释部分
    // loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
    //Ant Design 样式用一下部分
    loader: "style-loader!css-loader"
    },
    //配置less
    {
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
    }]
    },
    };
  2. 安装 webpack 。npm install -g webpack
  3. 全局安装webpack-dev-server。 npm install -g webpack-dev-server
  4. 项目中安装 webpack-dev-server。npm install webpack-dev-server --save
  5. 项目中安装webpack。 npm install webpack --save
  6. 项目中安装babel-loader。npm install babel-loader --save
  7. 项目中安装 babel-core。npm install babel-core --save
  8. 安装完所有的包后,可以查看项目中自动生成的package.json文件,查看是否安装成功。
  9. Terminal输入 webpack,生成bundle.js文件,将index.js进行打包。
  10. 在html文件中引入bundle.js即可
  11. 配置package.json文件,添加start和build两行
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
    },
  12. 使用npm start,即可 自动刷新bundle.js,同时可以自动打开locahost:8080。当修改index.js文件时,页面会自动进行刷新

好了,到此为止,你已经用webpack构建了自己的第一个React项目啦

使用脚手架构建React项目

当然你也可以使用脚手架工具进行React项目的构建,直接npm

  1. 安装脚手架工具。npm install -g create-react-app
  2. create-react-app my-app
  3. cd my-app/
  4. npm start

好了,使用脚手架已经构建完毕了,是不是超级简单