摘 要

刚接触React 开发, 在摸索中构建react 运行环境，总会遇到各种坑；本文，将用最短时间解决webpack+react 环境搭建问题.

1、如果你还没有React基础 看这里.

2、如果不知道webpack是啥？请 看这里.

3、如果你还没有装npm 看这里.

 

目 录

一、webpack+react 运行实例.
二、webpack 运行环境配置分析.
三、如何手动搭建一个webpack+react 运行环境.

一、webpack+react 运行实例

1、实例代码

 

2、目录结构

│  index.html     # 输出文件

│  package.json   # 项目信息

│  webpack.config.js # webpack 打包配置

│

└─src

        bundle.js  # 打包输出文件

        index.js    # 入口文件

3、快速运行

 npm install

 npm run dev

二、webpack 运行环境配置分析

1、 Index.html  首页入口文件

将项目中全局的样式和打包压缩的文件引入到该页面，React会寻找root节点，将子模块渲染到首页。
<html>

<head>

</head>

<body>

   <div id="root"></div>

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

</body>

</html>

2. package.json 项目引用组件管理文件

此文件配置重点注意如下节点：main 指的是入口文件的Js，Scripts 指npm运行的命令， dependencies 配置项目依赖的组件.
{

  "name": "mall-admin",

  "version": "1.0.0",

  "description": "Hello React",

  "main": "index.js",

  "scripts": {

    "dev": "webpack-dev-server --hot --inline"

  },

  "dependencies": {

    "react": "^15.5.4",

    "react-dom": "^15.5.4",

    "webpack": "^1.13.2",

    "webpack-dev-server": "^1.16.1"

  },

  "author": "Shawn",

  "license": "ISC"

}

3.webpack.config.js

该文件为webpack 打包输出文件，entry 入口文件目录设置，output 为打包之后输出bundle.js， loaders 配置为文件加载配置.
var webpack = require('webpack');

var path = require('path');

module.exports = {

  context:path.join(__dirname), // 目录

  entry:"./src/index.js", // 入口文件

  module:{

    loaders:[ // 将ES6 转换为 ES5

      {

        test: /\.js?$/,

        exclude: /(node_modules)/,

        loader: 'babel-loader',

        query: {

          presets: ['react', 'es2015']

        }

      }

    ]

  },

  output:{ // 输出文件配置

    path:__dirname,

    filename:"./src/bundle.js" // 输出文件（打包压缩文件）

  }

};

三、三步搭建运行环境

  1. 搭建好文件结构目录, 编写index.js index.html 运行代码.
  2. 配置package.json 文件，运行npm install.
  3. 配置webpack.config.js 文件，运行 npm run dev.
作者：向雄 
如果对我发表的文章存在疑问或者有更好的建议，可以扫描左边二维码（或者长按识别二维码）加我微信可以相互探讨。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

 

React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)的更多相关文章

  1. React系列文章：JSX生成真实DOM结点

    在上一篇文章中,我们介绍了Babel是如何将JSX代码编译成可执行代码的,随后也实现了一个自己的解析器,模拟了Babel编译的过程. 现在我们再来回顾一下,假定有如下业务代码: const style ...

  2. React系列文章：Babel编译JSX生成代码

    上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...

  3. React系列文章：Webpack模块组织关系

    现代前端开发离不开打包工具,以Webpack为代表的打包工具已经成为日常开发必备之利器,拿React技术栈为例,我们ES6形式的源代码,需要经过Webpack和Babel处理,才能生成发布版文件,在浏 ...

  4. 五分钟学习React(三)：纯HTML代码搭建React应用

    上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...

  5. win10下通过npm成功搭建react开发环境

    1.安装node-v12.13.1-x64(LTS) 2.安装creatre-react-app: npm install -g create-react-app 3.通过create-react-a ...

  6. React系列文章：无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...

  7. React系列——websocket群聊系统在react的实现

    前奏 这篇文章仅对不熟悉在react中使用socket.io的人.以及websocket入门者有帮助. 下面这个动态图展示的聊天系统是用react+express+websocket搭建的,很模糊吧, ...

  8. Windows手动搭建PHP运行环境

    首先~可以先在目录里面创建一个wamp目录,我的创建在 E: 盘 1.0 下载Apache2.4,x64位.VC11组件[电脑多少位装多少位] apache下载地址:https://www.apach ...

  9. hadoop_spark伪分布式实验环境搭建和运行实例详细教程

    hadoop+spark伪分布式环境搭建 安装须知 单机模式(standalone): 该模式是Hadoop的默认模式.这种模式在一台单机上运行,没有分布式文件系统,而是直接读写本地操作系统的文件系统 ...

随机推荐

  1. burpsuite + sqlmap 日志导出批量扫描

    http://lcx.cc/?i=4207   在burpsuite中options -->misc-->logging中选择要记录的日志来源: 一般是proxy request: 生成的 ...

  2. Linux OpenSSH后门的添加与防范

    引言:相对于Windows,Linux操作系统的密码较难获取.不过很多Linux服务器配置了OpenSSH服务,在获取root权限的情况下,可以通过修改或者更新OpenSSH代码等方法,截取并保存其S ...

  3. Android安全开发之WebView中的大坑

    0X01 About WebView 在Android开发中,经常会使用WebView来实现WEB页面的展示,在Activiry中启动自己的浏览器,或者简单的展示一些在线内容等.WebView功能强大 ...

  4. 实战DeviceIoControl 之五：列举已安装的存储设备

    Q 前几次我们讨论的都是设备名比较清楚的情况,有了设备名(路径),就可以直接调用CreateFile打开设备,进行它所支持的I/O操作了.如果事先并不能确切知道设备名,如何去访问设备呢? A 访问设备 ...

  5. 基于DirectShow的MPEG-4视频传输系统的研究与实现

    1 引言     近年来,随着国民经济的发展,社会各个部门对于视频监视系统的需求越来越多.但目前的很多监视系统都跟具体的硬件相关,必须要具体的采集卡的支持才能实现.所以有必要开发一种具有通用性的视频监 ...

  6. PL/SQL集合 ----- varrays

    varrays可以再表,记录,对象定义中使用,类似于C中的数组. 1.定义varrays用作PL/SQL程序构造块. declare type integer_varray ) of integer; ...

  7. Codeforces Round #454 D. Seating of Students

    分三类 1 1: 一个就好了 3 3:特殊讨论下 或 : 第一行奇序号的数放前面,偶序号的数放后面,第二行奇序号的数放前面,偶序号的数放后面,第二行依次类推 有点难写,真的菜 #include< ...

  8. Hibernate【与Spring整合】

    前言 前面已经学习了如何使用Spring与Struts2进行整合,本博文主要讲解如何使用Spring对Hibernate进行整合 Spring和Hibernate整合的关键点: SessionFact ...

  9. 编写第一个Flutter App（翻译）

    博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://g ...

  10. IOS开发之App被拒原因

    新手入门,简单记录一下Ipa提交给苹果公司后,有可能会被驳回的原因,欢迎补充和纠正! 原因: 1.ipa功能缺陷,譬如不能正常登陆.界面打不开.支付调不起等测试过程中未发现的Bug,实在是不应该!!! ...