最终效果:
配置webpack 自动编译脚本， 内容更改后浏览器页面自动刷新，提高效率。 主要靠webpack 的watch 功能。
npm 全局安装的包： webpack webpack-cli webpack-dev-server.  
项目内2个文件 package.json. webpack.config.js 配置如下。截图不是最简单结构， 后面增加redux, react-redux 包加了点东西。 
需要建立这样的目录后， npm install 就会根据package.json安装项目需要的包。 而根据webpack.config.js 就会自动运行。 详细的东西不再介绍， 专题学习更加稳妥。 
目录结构：

//webpack.config.js 配置文件

const path = require('path');

module.exports = {

    entry: "./www/app/main.js",     //入口文件

    output: {                   //出口文件

        path: path.resolve(__dirname, "www/dist"),  //打包到哪个文件夹中

        filename: "bundle.js",                   //打包到哪个文件

        publicPath : "/xuni"

    },

    watch : true,

    mode: "development",

    module : {

        rules: [

            {

                test: /\.js$/,                      //以.js结尾的文件

                include: [

                    path.resolve(__dirname, "www/app")  //包括什么文件夹

                ],

                exclude: [

                    path.resolve(__dirname, "node_modules")   //不包括

                ],

                loader: "babel-loader",

                options: {

                    presets: ["env","react"]

                }

            }

        ]

    }

}

    1 	//package.json 文件。

    2

    3 	{

    4 	  "name": "react-0327",

    5 	  "version": "1.0.0",

    6 	  "description": "",

    7 	  "main": "index.js",

    8 	  "scripts": {

    9 	    "dev": "webpack-dev-server --content-base ./www --port 8080"

   10 	  },

   11 	  "author": "",

   12 	  "license": "ISC",

   13 	  "devDependencies": {

   14 	    "babel-core": "^6.24.1",

   15 	    "babel-loader": "^7.1.4",

   16 	    "babel-preset-env": "^1.7.0",

   17 	    "babel-preset-react": "^6.24.1"

   18 	  },

   19 	  "dependencies": {

   20 	    "react": "^16.8.5",

   21 	    "react-dom": "^16.8.5"

   22 	  }

	}

需要注意的引入babel-loader 后。 相应高低版本问题， 出现问题， 根据提示即可解决。 譬如本例用到env, react 2个babel loader. 是比较新的版本， 如果用babel-present-es2015 则是低版本支持， 根据提示搜索即可解决问题。

根据webpack的配置。 在index.html 引入js 文件方式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

    <script src="xuni/bundle.js"></script>

</body>

</html>

入口Main.js 和组件App.js 分别为：

//main.js

import React from "react";

import ReactDOM from "react-dom";

import App from "./App.js";

ReactDOM.render(

    <App></App>

    ,

    document.getElementById("app")

);

//App.js

import React from "react";

export default class App extends React.Component{

    constructor(){

        super();

    }

    render(){

        return <div>
　　<h1>React 第一步 </h1>
</div> } }

参考： 
http://​​​​​​​https://www.valentinog.com/blog/react-webpack-babel/
https://www.cnblogs.com/chenziyu-blog/p/5675086.html
​​​​​​​

React开发环境搭建（react,babel,webpack webpack-dev-server)的更多相关文章

  1. 1. React介绍 React开发环境搭建 React第一个程序

    什么是 React         React 是 Facebook 发布的 JavaScript 库,以其高性能和独特的设计理念受到了广泛关注. React的开发背景         Faceboo ...

  2. 基于webpack的react开发环境搭建新手教程

    最近学习react-webpack项目搭建,找到一篇我认为不错的博客,跟着学习了一番,写得很详细很好,本篇博客纯属记录总结,要看更详细的搭建过程及解析,请戳: 基于webpack的React项目搭建( ...

  3. es6开发环境搭建，babel 将es6转化成es5

    工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...

  4. react开发环境搭建

    ---恢复内容开始--- 要想用react,需要安装: 1)babel-sublime: 作用:编译es6,支持ES6, React.js, jsx代码高亮,并对所编译的代码进行高亮显示. 安装步骤: ...

  5. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  6. Webpack笔记（二）——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  7. 搭建 webpack、react 开发环境（二）

    配置处理样式文件   到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...

  8. 搭建 webpack、react 开发环境（一）

    基本介绍   Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...

  9. 搭建 webpack、react 开发环境（三）

    配置 react-router-dom   我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...

随机推荐

  1. MYSQL列表中常用语句代码块

    查看数据表是否存在:SHOW TABLES; 显示已经打开的数据库:SELECT DATABASE(); 查看数据表结构:SHOW COLUMNS FROM ***(数据表名): 插入数据:INSER ...

  2. 博三F5第二次站立会议（2019-03-21）

    时间:2019-03-21(第五周) 地点:博三414寝室 时长:一个半小时 到勤:全员到勤 谈论内容: 大致确定本周计划与下周打算 本周计划: 杨澳:做出整个游戏软件开发过程的大致时间规划,做出需求 ...

  3. pycharm(pythoon3)_django2.0_xadmin创建测试用例后台管理系统

    1.测试用例的app名字:Testcase 2.Testcase文件夹下各个文件的代码: 2.1. __init__.py: default_app_config = "TestCase.a ...

  4. JVM学习二：垃圾收集（Garbage Collection，GC）机制

    JVM的GC分为两个主要部分,第一部分是判断对象是否已死(堆内存的垃圾回收占主要部分,方法区(metaspace)的内存回收在最新的官方文档中未给出详细解释,暂时不做讨论范围),第二部分是对内存区进行 ...

  5. python标准库之random模块

    Python中的random模块用于生成随机数. 下面具体介绍random模块的功能: 1.random.random() #用于生成一个0到1的 随机浮点数:0<= n < 1.0 1 ...

  6. 将数据转换成树型层级的Json格式的String

    有时候我们项目里面需要将树型关系的数据转换成Json格式的String字符串 假设数据库中的数据如下 需要转换后输出的字符串的结果如下(对应的层级的关系) [ {name:'爷爷',id:'1',co ...

  7. 信号报告-java

    无线电台的RS制信号报告是由三两个部分组成的: R(Readability) 信号可辨度即清晰度. S(Strength) 信号强度即大小. 其中R位于报告第一位,共分5级,用1-5数字表示. 1-- ...

  8. 信号量及P/V操作

    有一个厕所,允许多个男生同时使用,也允许一个女生使用,但是不允许男女共用(那岂不是乱了套)通过厕所门口有一个三面小牌子来运行.一面是男生在用,第二面是女生在用,第三面是空.运行机制:第一个进入空厕所男 ...

  9. SQLI DUMB SERIES-16

    (1)无论怎么输入,都没有回显,但当输入 admin")#时,显示登录成功.若通过其他方法获取数据库的用户名,可通过这个方法登录成功. (2)获取其他信息可用考虑时间延迟注入.方法同15.

  10. .NET第一章

    1.介绍了.NET的作用和软件前景趋势 2.Visual studio .net 编程 3.介绍.net可以多种编程语言,通过公共语言类库存放 2.介绍C# 数据类型和变量设置,以及函数的使用 3.继 ...