React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)
摘 要
刚接触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 首页入口文件
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="src/bundle.js"></script>
</body>
</html>
2. package.json 项目引用组件管理文件
{
"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
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" // 输出文件（打包压缩文件）
}
};
三、三步搭建运行环境
- 搭建好文件结构目录, 编写index.js index.html 运行代码.
- 配置package.json 文件，运行npm install.
- 配置webpack.config.js 文件，运行 npm run dev.
如果对我发表的文章存在疑问或者有更好的建议，可以扫描左边二维码（或者长按识别二维码）加我微信可以相互探讨。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)的更多相关文章
- React系列文章：JSX生成真实DOM结点
在上一篇文章中,我们介绍了Babel是如何将JSX代码编译成可执行代码的,随后也实现了一个自己的解析器,模拟了Babel编译的过程. 现在我们再来回顾一下,假定有如下业务代码: const style ...
- React系列文章：Babel编译JSX生成代码
上次我们总结了React代码构建后的Webpack模块组织关系,今天来介绍一下Babel编译JSX生成目标代码的一些规则,并且模拟整个生成的过程. 我们还是拿最简单的代码举例: import {gre ...
- React系列文章：Webpack模块组织关系
现代前端开发离不开打包工具,以Webpack为代表的打包工具已经成为日常开发必备之利器,拿React技术栈为例,我们ES6形式的源代码,需要经过Webpack和Babel处理,才能生成发布版文件,在浏 ...
- 五分钟学习React(三)：纯HTML代码搭建React应用
上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...
- win10下通过npm成功搭建react开发环境
1.安装node-v12.13.1-x64(LTS) 2.安装creatre-react-app: npm install -g create-react-app 3.通过create-react-a ...
- React系列文章：无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...
- React系列——websocket群聊系统在react的实现
前奏 这篇文章仅对不熟悉在react中使用socket.io的人.以及websocket入门者有帮助. 下面这个动态图展示的聊天系统是用react+express+websocket搭建的,很模糊吧, ...
- Windows手动搭建PHP运行环境
首先~可以先在目录里面创建一个wamp目录,我的创建在 E: 盘 1.0 下载Apache2.4,x64位.VC11组件[电脑多少位装多少位] apache下载地址:https://www.apach ...
- hadoop_spark伪分布式实验环境搭建和运行实例详细教程
hadoop+spark伪分布式环境搭建 安装须知 单机模式(standalone): 该模式是Hadoop的默认模式.这种模式在一台单机上运行,没有分布式文件系统,而是直接读写本地操作系统的文件系统 ...
随机推荐
- Math.round(11.5)等于多少？ Math.round(-11.5)等于多少？
1.先说下怎么理解 round()方法可以这样理解: 将括号内的数+0.5之后,向下取值, 比如:round(3.4)就是3.4+0.5=3.9,向下取值是3,所以round(3.4)=3; roun ...
- AttributeError: 'TestLogin' object has no attribute 'driver' in Pycharm for python selenium
自动化测试学习中的问题: 最近几天在写登陆测试,遇到一个问题,困惑我的几个小时......... 我各种百度,花费大量时间,才找到我的问题的根本所在,最终解决了我的问题,主要是大小写的问题def Se ...
- 通用的Android控件抖动效果实现
这个小程序的功能在实际的开发中会用到,比如:设置Button左右晃动,或者上下的晃动效果,下面就给出示例代码. 首先:要定义一个xml文件,命名为Shake [html] view plain cop ...
- dojo中引入FusionCharts柱状图报错
1.今天,做项目的过程中,我发现Java后台查询的数据都是正确的,并且拼接成JSON格式也正确,但是传到JSP页面时,图无法显示出来还报错,后来经过检查发现是JavaScript和引入FusionCh ...
- AM335x(TQ335x)学习笔记——Nand&&网卡驱动移植
移植完成声卡驱动之后本想再接再励,移植网卡驱动,但没想到的是TI维护的内核太健壮,移植网卡驱动跟之前移植按键驱动一样简单,Nand驱动也是如此,于是,本人将Nand和网卡放在同一篇文章中介绍.介绍之前 ...
- Android的sdk、api及工程目录说明
SDK下包的说明1:add-ons:Android开发需要的第三方文件和软件库2:docs:Android的文档.包括开发指南.API参考.资源等3:extras:扩展的附加包4:platforms: ...
- Axure使用心得分享
因为之前很少涉及到原型设计,所以对这个原型设计工具也不太熟悉,第一次使用走了不少的弯路,在这里把自己在使用过程中的心得跟大家分享一下,希望能够对大家有所帮助. 一. 元素的选择 我觉得这是Axure原 ...
- 芝麻HTTP：在阿里云上测试Gerapy教程
1.配置环境 阿里云的版本是2.7.5,所以用pyenv新安装了一个3.6.4的环境,安装后使用pyenv global 3.6.4即可使用3.6.4的环境,我个人比较喜欢这样,切换自如,互不影响. ...
- Python 环境的搭建
Python最新源码,二进制文档,新闻资讯等可以在Python的官网查看到: Python官网:http://www.python.org/ 你可以在以下链接中下载 Python 的文档,你可以下载 ...
- Python网络爬虫 | Scrapy爬取妹子图网站全站照片
根据现有的知识,写了一个下载妹子图(meizitu.com)Scrapy脚本,把全站两万多张照片下载到了本地. 网站的分析 网页的网址分析 打开网站,发现网页的网址都是以 http://www.mei ...