怎么配置react环境?

怎么配置react环境?下面本篇文章给大家介绍一下react环境配置及安装。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

react环境配置及安装

1、NodeJs安装

nodejs官网下载安装,检查安装成功的命令 node -v, npm -v

2、使用NPM配置React开发环境

1)npm项目初始化:

npm init

2)项目依赖包安装:

npm install --save react react-dom babelify babel-preset-reac
npm install --save babel-preset-es2015

3、webpack热加载配置

1)全局安装

npm install -g webpack
npm install -g webpack-dev-server

2)当前项目安装

npm install webpack --save
npm install webpack-dev-server --save

3)初始化配置

根目录下创建文件 webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: __dirname + '/src',
    entry: './js/index.js',
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        }]
    },
    output: {
        path: __dirname + '/',
        filename: 'bundle.js'       
    }
}

4)打包

webpack   or   webpack --watch

5)项目热加载

方法一:

webpack-dev-server --content-base-src --hot

方法二:package.json文件内添加

"scripts": {
     "start": "webpack-dev-server --inline --content-base ."
  }

运行

webpack-dev-server

确保打包后的文件(如‘bundle.js’)在根目录下。即:你的index.html也就是你的项目入口的html文件里面引用这个bundle.js文件需要直接引用根目录下面的。

4、Chrome React插件

React Developer Tools

更多前端教程知识,请查阅 HTML中文网 !!

以上就是怎么配置react环境?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏