在上一篇,我们简单学习了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-dom

  详解前端模块化工具-Webpack

  ECMAScript 6 介绍

react+babel+webpack初试的更多相关文章

  1. 在React+Babel+Webpack环境中使用ESLint

    ESLint是js中目前比较流行的插件化的静态代码检测工具.通过使用它可以保证高质量的代码,尽量减少和提早发现一些错误.使用eslint可以在工程中保证一致的代码风格,特别是当工程变得越来越大.越来越 ...

  2. React开发环境搭建(react,babel,webpack webpack-dev-server)

    最终效果: 配置webpack 自动编译脚本, 内容更改后浏览器页面自动刷新,提高效率. 主要靠webpack 的watch 功能. npm 全局安装的包: webpack webpack-cli w ...

  3. React+ES6+Webpack环境配置

    转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...

  4. React+ES6+Webpack深入浅出

    React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再 ...

  5. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  6. 入门React和Webpack

    最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 说说React ...

  7. reactjs学习一(环境搭配react+es6+webpack热部署)

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  8. 轻松入门React和Webpack

    最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 <!-- ...

  9. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

随机推荐

  1. FormData 对象的使用

    FormData 对象的使用 在本文章中 如何创建一个FormData对象 通过HTML表单创建FormData对象 使用FormData对象上传文件 通过AJAX提交表单和上传文件可以不使用Form ...

  2. ML基础 : 训练集,验证集,测试集关系及划分 Relation and Devision among training set, validation set and testing set

    首先三个概念存在于 有监督学习的范畴 Training set: A set of examples used for learning, which is to fit the parameters ...

  3. Node.js之接收前台数据实例

    <form class="form-horizontal" method="post" action="http:127.0.0.1:3000/ ...

  4. 8 云计算系列之Horizon的安装与虚拟机创建流程

    preface 在上一章节中,我们可以在无web管理界面上创建并启动虚拟机,虽然可以这么做,但是敲命令太繁琐,所以此时我们可以安装openstack web管理界面,通过web界面的图形化操作open ...

  5. consul在windows下的安装

    consul的下载 https://www.consul.io/downloads.html 选择对应的系统版本 修改环境变量path 启动命令窗口 执行命令 consul agent -dev 打开 ...

  6. teamviwer安装提示 Verification of your Teamviewer version failed!.

    打开cmd输入 regsvr32 c:\windows\SysWOW64\wintrust.dll 就可以了.

  7. python使用pyqt写带界面工具

    上篇介绍的使用python自带tkinter包,来写带界面的工具. 此篇介绍使用pyqt来开发测试工具. tkinter的好处是python官方自带,上手容易(但手写控件复杂),布局和摆放都不直观和容 ...

  8. Disconf (version : 2.6.21)

    通常我们会做如下配置:(disconf 2.6.21) <!-- 一次扫描 --> <bean id="disconfMgrBean" class="c ...

  9. form enctype:"multipart/form-data",method:"post" 提交表单,后台获取不到数据

    在解决博问node.js接受参数的时候,发现当form中添加enctype:"multipart/form-data",后台确实获取不到数据,于是跑到百度上查了一下,终于明白为什么 ...

  10. eclipse+pydev 怎么导入已有的python项目

    转自:https://zhidao.baidu.com/question/2117277007790501747.html 已有的python项目导入eclipse的步骤: 1.首先,打开Eclips ...