摘 要

刚接触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. 【Unity3D】Unity3D 摄像机带透明截图

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/CropCamera.html ↓↓↓下面的废话可以不看↓↓↓ 最近处理了一批我的游戏的图标,步骤特别繁琐, 需要先 ...

  2. Vue项目搭建及原理一

    一. Vue简介 Vue简介 Vue是近两年来比较火的一个前端框架(渐进式框架),与reactjs和angularjs三国鼎立,根据不完全统计,包括饿了么.稀土掘金.苏宁易购.美团.天猫.荔枝FM.房 ...

  3. CBitmap的使用

    MFC提供了位图处理的基础类CBitmap,可以完成位图(bmp图像)的创建.图像数据的获取等功能.虽然功能比较少,但是在对位图进行一些简单的处理时,CBitmap类还是可以胜任的.很多人可能会采用一 ...

  4. dojo中引入FusionCharts柱状图报错

    1.今天,做项目的过程中,我发现Java后台查询的数据都是正确的,并且拼接成JSON格式也正确,但是传到JSP页面时,图无法显示出来还报错,后来经过检查发现是JavaScript和引入FusionCh ...

  5. HighCharts之2D圆环图

    HighCharts之2D圆环图 1.实例源码 Donut.html: <!DOCTYPE html> <html> <head> <meta charset ...

  6. 错误号：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 ...

  7. Stanford Word Segmenter使用

    1,下载 Stanford Word Segmenter软件包: Download Stanford Word Segmenter version 2014-06-16 2,在eclipse上建立一个 ...

  8. Web站点错误提示页面和默认访问页面设置

    1.asp.net 定制简单的错误处理页面 通常web应用程序在发布后,为了给用户一个友好界面和使用体验,都会在错误发生时跳转至一个自定义的错误页面,而不是asp.net向用户暴露出来的详细的异常列表 ...

  9. C# 获取一个独一无二的字符串 GUID

    在保存文件,创建目录时,为了保证名称不重复,经常使用Random产生一个随机数,有更简单且不会重复的办法是: Guid.NewGuid().ToString() 就会生成一个类似 37c1acec-4 ...

  10. 简单bfs（hdu2612）

    #include<stdio.h>#include<string.h>#include<queue>#define INF 0x3f3f3f3fusing name ...