摘 要

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

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

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

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

 

目 录

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

一、webpack+react 运行实例

1、实例代码

 

2、目录结构

  1. index.html # 输出文件
  2. package.json # 项目信息
  3. webpack.config.js # webpack 打包配置

  4. └─src
  5. bundle.js # 打包输出文件
  6. index.js # 入口文件

3、快速运行

  1. npm install
  2. npm run dev

二、webpack 运行环境配置分析

1、 Index.html  首页入口文件

将项目中全局的样式和打包压缩的文件引入到该页面,React会寻找root节点,将子模块渲染到首页
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <div id="root"></div>
  6. <script src="src/bundle.js"></script>
  7. </body>
  8. </html>

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

此文件配置重点注意如下节点:main 指的是入口文件的Js,Scripts 指npm运行的命令, dependencies 配置项目依赖的组件.
  1. {
  2. "name": "mall-admin",
  3. "version": "1.0.0",
  4. "description": "Hello React",
  5. "main": "index.js",
  6. "scripts": {
  7. "dev": "webpack-dev-server --hot --inline"
  8. },
  9. "dependencies": {
  10. "react": "^15.5.4",
  11. "react-dom": "^15.5.4",
  12. "webpack": "^1.13.2",
  13. "webpack-dev-server": "^1.16.1"
  14. },
  15. "author": "Shawn",
  16. "license": "ISC"
  17. }

3.webpack.config.js

该文件为webpack 打包输出文件,entry 入口文件目录设置,output 为打包之后输出bundle.js, loaders 配置为文件加载配置.
  1. var webpack = require('webpack');
  2. var path = require('path');
  3. module.exports = {
  4. context:path.join(__dirname), // 目录
  5. entry:"./src/index.js", // 入口文件
  6. module:{
  7. loaders:[ // 将ES6 转换为 ES5
  8. {
  9. test: /\.js?$/,
  10. exclude: /(node_modules)/,
  11. loader: 'babel-loader',
  12. query: {
  13. presets: ['react', 'es2015']
  14. }
  15. }
  16. ]
  17. },
  18. output:{ // 输出文件配置
  19. path:__dirname,
  20. filename:"./src/bundle.js" // 输出文件(打包压缩文件)
  21. }
  22. };

三、三步搭建运行环境

  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. 304和浏览器http缓存

    浏览器虽然发现了本地有该资源的缓存,但是不确定是否是最新的,于是想服务器询问,若服务器认为浏览器的缓存版本还可用,那么便会返回304. 浏览器缓存分为强缓存和协商缓存. 1.浏览器请求某资源,通过he ...

  2. 区块链 PoW 与 PoS 的纷争

    最近在研究区块链,可能会有一些非前端文章,感兴趣的可以关注关注哟. 有关注区块链的,肯定会经常看到这两个名词 -- PoW 与 PoS.但是很多人对他们的含义的理解存在很多偏差.那么他们的含义与区别是 ...

  3. Win10电脑经常自动掉线、自动断网的解决方法

    近期一客户称自己使用电脑上网的时候,过一段时间莫名其妙的出现自动掉线.自动断网的情况,那么遇到这个问题该怎么办?下面装机之家分享一下Win10电脑经常自动掉线.自动断网的解决方法,以Win7系统为例. ...

  4. Linux Framebuffer驱动剖析之二—驱动框架、接口实现和使用

    深入分析LinuxFramebuffer子系统的驱动框架.接口实现和使用. 一.LinuxFramebuffer的软件需求 上一篇文章详细阐述了LinuxFramebuffer的软件需求(请先理解第一 ...

  5. 解决Sublime text 3 中文文件名显示方框

    在sublime text 3中,Preference, Settings-User,最后加上一行 "dpi_scale": 1.0 覆盖操作系统设置的DPI. 这是我的Setti ...

  6. R语言︱机器学习模型评价指标+(转)模型出错的四大原因及如何纠错

    笔者寄语:机器学习中交叉验证的方式是主要的模型评价方法,交叉验证中用到了哪些指标呢? 交叉验证将数据分为训练数据集.测试数据集,然后通过训练数据集进行训练,通过测试数据集进行测试,验证集进行验证. 模 ...

  7. java打印等腰三角形的两种方法!(根据行数,根据底边长度)

    首先来看根据用户输入的底边的长度判断: package cn.edu.nwpu.java; import java.util.Scanner; public class IsoscelesTriang ...

  8. EntityFramework Core 2.0 Explicitly Compiled Query(显式编译查询)

    前言 EntityFramework Core 2.0引入了显式编译查询,在查询数据时预先编译好LINQ查询便于在请求数据时能够立即响应.显式编译查询提供了高可用场景,通过使用显式编译的查询可以提高查 ...

  9. Python Cookbook(第3版)中文版:15.21 诊断分段错误

    15.21 诊断分段错误¶ 问题¶ 解释器因为某个分段错误.总线错误.访问越界或其他致命错误而突然间奔溃. 你想获得Python堆栈信息,从而找出在发生错误的时候你的程序运行点. 解决方案¶ faul ...

  10. [USACO12JAN]Video Game Combos

    AC自动机建立fail树后树上DP # include <stdio.h> # include <stdlib.h> # include <iostream> # ...