摘 要

刚接触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. js基本类型与引用类型，浅拷贝和深拷贝

    1. 基本类型: string,number,boolean,null,undefined 2. 引用类型: Function,Array,Object 基本类型:存放在栈内存中的简单数据段,数据大小 ...

  2. caffe+GAN︱PPGN生成模型5则官方案例（caffe版）

    一.效果与架构 PPGN 整合了对抗训练.cnn特征匹配.降噪自编码.Langevin采样:在NIPS2016得到了Ian Goodfellow的介绍. PPGN生成的图像同类差异化大,可根据指定生成 ...

  3. MinGW下简单编译FFmpeg

    2009.03.21补充:ffmpeg-0.5正式发布,地址为:[url]http://www.ffmpeg.org/releases/ffmpeg-0.5.tar.bz2[/url].修改了第7步, ...

  4. 基于嵌入式操作系统VxWorks的多任务并发程序设计（2） ――任务控制

    4 任务与任务状态 VxWorks实时内核Wind提供了基本的多任务环境.对用户而言,宏观上看起来,多个任务同时在执行.而本质而言,在微观上,系统内核中的任务调度器总是在根据特定的调度策略让它们交替运 ...

  5. 错误号：1364 错误信息：Field 'platId' doesn't have a default value

    1. 错误描述 错误号:1364 错误信息:Field 'platId' doesn't have a default value insert into `use`.`t_platform_scal ...

  6. jquery-1.11.1.js

       每次想要使用这个js时,总是要到官网上下载,太麻烦,现在把它收录了 jquery-1.11.1.js /*! * jQuery JavaScript Library v1.11.1 * http ...

  7. CentOS使用nmcli配置网络

    nmcli 查看网络设备信息 nmcli dev status 查看所有连接的列表 nmcli connection show nmcli connection show --active 查看活动连 ...

  8. BOM（浏览器对象模型）的一些操作

    一个完整的JavaScript实现由三部分组成: ECMAScript:核心,定义语言基础,规定了语言的组成部分(语法,类型,关键字,保留字,对象等) DOM:文档对象模型,·DOM把整个页面映射成一 ...

  9. 复制粘贴之插件（clipboard.min.js）不需要安装flash

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <me ...

  10. ListView 无 DataSource 依然用 DataPager 翻页

    ListView 有 DataSource 使用 DataPager 翻页ListView 无 DataSource 使用 DataPager 翻页问题描述点击两次才能翻页返回上一页,内容为空解决方法 ...