react+babel+webpack初试
在上一篇，我们简单学习了webpack学习，现在这里我们简单学习一下react+babel+webpack，进行编译react语法jsx以及结合es6写法。
这里我就简单的直接上demo：
package.json文件：
{
"name": "react-sample",
"version": "1.0.0",
"description": "webpack demo",
"main": "./src/entry.js",
"scripts": {
"build": "webpack --display-error-details"
},
"repository": {
"type": "git",
"url": "https://github.com/dwqs/react_practice.git"
},
"keywords": [
"react",
"webpack"
],
"author": "pomy",
"devDependencies": {
"react": "^0.13.3",
"webpack": "^1.12.2",
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2"
}
}
webpack.config.js配置文件：
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/entry.js'),
output: {
path: path.resolve(__dirname, './assets'),
filename: 'bundle.js'
},
module: {
//加载器配置
loaders: [
{ test: /\.js?$/, loaders: ['babel'], exclude: /node_modules/ },
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}
]
},
resolve:{
//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
extensions:['','.js','.json']
},
};
entry.js入口文件:
import React from 'react';
import { render } from 'react-dom';
//import Hello from './hello'; var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
}); render(
<HelloMessage name="John" />,
document.getElementById('example')
);
index.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Sample</title>
</head>
<body>
<div id="example"></div>
<script src="./assets/bundle.js"></script>
</body>
</html>
当我们文件夹有以上文件时，我们就可以执行，npm install （简写npm i）以及npm build 就可以编译es6写的jsx文件，打开页面就可以看到效果了。
相关资料来源：
react+babel+webpack初试的更多相关文章
- 在React+Babel+Webpack环境中使用ESLint
ESLint是js中目前比较流行的插件化的静态代码检测工具.通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误.使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大.越来越 ...
- React开发环境搭建（react,babel,webpack webpack-dev-server)
最终效果: 配置webpack 自动编译脚本, 内容更改后浏览器页面自动刷新,提高效率. 主要靠webpack 的watch 功能. npm 全局安装的包: webpack webpack-cli w ...
- React+ES6+Webpack环境配置
转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...
- React+ES6+Webpack深入浅出
React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再 ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- 入门React和Webpack
最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 说说React ...
- reactjs学习一（环境搭配react+es6+webpack热部署）
reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使 ...
- 轻松入门React和Webpack
最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 <!-- ...
- React配合Webpack实现代码分割与异步加载
这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
随机推荐
- Android： JAVA和C# 3DES加密解密
最近 一个项目.net 要调用JAVA的WEB SERVICE,数据采用3DES加密,涉及到两种语言3DES一致性的问题,下面分享一下,这里的KEY采用Base64编码,便用分发,因为Java的Byt ...
- Blender 编辑模式
1.如何进入编辑模式 可直接通过“Tab”快捷键进入编辑模式,或者选择界面底部的下拉列表: 如果想退出编辑模式,可再按下“Tab”键退出. 2.编辑选择 进入编辑状态后,我们可以通过鼠标右键来选择某个 ...
- 源码分析二(ArrayList与LinkedList的区别)
一:首先看一下ArrayList类的结构体系: public class ArrayList<E> extends AbstractList<E> implements Lis ...
- python 函数结果缓存一段时间的装饰器
把函数结果缓存一段时间,比如读取一个mongodb,mongodb中的内容又在发生变化,如果从部署后,自始至终只去读一次那就感触不到变化了,如果每次调用一个函数就去读取那太频繁了耽误响应时间也加大了c ...
- 变分推断(Variational Inference)
(学习这部分内容大约需要花费1.1小时) 摘要 在我们感兴趣的大多数概率模型中, 计算后验边际或准确计算归一化常数都是很困难的. 变分推断(variational inference)是一个近似计算这 ...
- SpringMVC------在运行项目的时候run as 里面没有run on server 解决办法
1.第一步:选中项目,右键,点击Properties 2.第二步:在查找框里输入Project Facets ,点击蓝色的,如图: 第三步:选中Dynamic Web Module,应用就可以了 转载 ...
- ios开发之--armv7,armv7s,arm64,i386,x86_64详解
有时候在运行的时候,经常出现诸如i386的错误,最新一些可能会出现 No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch ...
- Kafka Java consumer动态修改topic订阅
前段时间在Kafka QQ群中有人问及此事——关于Java consumer如何动态修改topic订阅的问题.仔细一想才发现这的确是个好问题,因为如果简单地在另一个线程中直接持有consumer实例然 ...
- Windows下POSIX线程编程（pThread）环境搭建
系统: Windows 编辑器:codeblocks13.12 1. 简介: Windows有一个叫 POSIX Threads for Win32 的开源项目给出了一个功能比较完善的Windows下 ...
- 从经典问题来看 Copy 方法
经典面试题:为什么 NSString 类型成员变量的修饰属性用 copy 而不是 strong (或 retain ) ? 在初学 iOS 的时候,可能会被灌输这么一个常识,切记 NSString 的 ...