[Flux] 1. Development Environment Setup
Install packages:
{
"name": "reactflux",
"version": "1.0.0",
"description": "",
"main": "dist/js/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "0.13.3",
"react-router-component": "0.26.0",
"vinyl-source-stream": "1.1.0"
},
"devDependencies": {
"browserify": "11.0.1",
"del": "2.0.0",
"gulp": "3.9.0",
"gulp-plumber": "*",
"reactify": "1.1.1",
"run-sequence": "1.1.2"
}
}
Automation with Gulp:
/**
* Created by Answer1215 on 9/3/2015.
*/ var gulp = require('gulp'),
browserify = require('browserify'),
reactify = require('reactify'),
del = require('del'),
plumber = require('gulp-plumber'),
runSequence = require('run-sequence'),
source = require('vinyl-source-stream'); gulp.task('browserify', function () {
browserify('./src/js/main.js')
.transform('reactify')
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist/js'));
}); gulp.task('copy', function () {
gulp.src('./src/index.html')
.pipe(gulp.dest('dist'));
gulp.src('./src/assets/**/*.*')
.pipe(gulp.dest('dist/assets'));
}); gulp.task('watch', function() {
gulp.watch('./src/**/*.*', ['browserify', 'copy']);
}); gulp.task('clean', function(callback) {
return del(['./dist']);
}); gulp.task('default', function (callback) {
runSequence('clean', ['browserify', 'copy', 'watch'], callback);
});
Structure:
main.js:
var App = require('./components/app'),
React = require('react'); React.render(<App />, document.getElementById('main'));
src/components/app.js:
var React = require('react'); var App = React.createClass({
render: function(){
return (<h1> My App</h1>);
}
}); module.exports = App;
[Flux] 1. Development Environment Setup的更多相关文章
- [React Fundamentals] Development Environment Setup
In this lesson we'll setup a simple build process for converting our ES6 React components into ES5 u ...
- Azure Sphere Development Environment Setup
1. Visual Studio 目前,Visual Studio 2017/2019支持Azure Sphere开发,后续,微软会加入Visual Studio Code的支持.以Visual St ...
- Setup iOS Development Environment.
Setup iOS Development Environment Install XCode and check-out source code from SVN XCode Please find ...
- The Google Test and Development Environment (持续更新)
最近Google Testing Blog上开始连载The Google Test and Development Environment(Google的测试和开发环境),因为blogspot被墙,我 ...
- Programming in Go (Golang) – Setting up a Mac OS X Development Environment
http://www.distilnetworks.com/setup-go-golang-ide-for-mac-os-x/#.V1Byrf50yM8 Programming in Go (Gola ...
- How to set up Dynamics CRM 2011 development environment
Recently I have been starting to learn Microsoft Dynamics CRM 2011 about implement plugin and workfl ...
- Struts 2 - Environment Setup
Our first task is to get a minimal Struts 2 application running. This chapter will guide you on how ...
- Create A .NET Core Development Environment Using Visual Studio Code
https://www.c-sharpcorner.com/article/create-a-net-core-development-environment-using-visual-studio- ...
- Install Qualcomm Development Environment
安裝 Android Development Environment http://www.cnblogs.com/youchihwang/p/6645880.html 除了上述還得安裝, sudo ...
随机推荐
- php和js根据子网掩码和ip计算子网
php $ip = '192.168.6.1'; $mask = '255.255.2.0'; $sub_net = array();//子网 $ip_explode = explode('.', $ ...
- ng-html 报 不安全 警告解决办法
app.filter('to_trusted',['$sce',function($sce){ return function(text){ return $sce.trustAsHtml(text) ...
- Android 开机过程PMS分析
12-13 12:25:05.595 3253 3253 SystemServer !@Boot: Start PackageManagerService pm/PackageManagerServi ...
- phpcms v9栏目列表调用每一篇文章内容方法1
我们先来看下默认栏目调用的代码: 复制代码代码如下:{pc:content action="lists" catid="$catid" num="25 ...
- Administration Commands
Commands useful for administrators of a hadoop cluster. balancer Runs a cluster balancing utility. A ...
- MyEclipse10
1.配置tomcat Windows->Preferences->My Eclipse->Servers->Tomcat,对于64位操作系统而言,Tomcat home dir ...
- 上传XML文件字符编码问题
1.上传的XML文件的空格的字符编码和倒入到数据库的空格的字符编码不是一种编码格式,导致导入到数据库的数据和XML文件的数据不一致的情况,进而使展示到界面上的数据在进行搜索时不能搜索出来.解决办法: ...
- 超实用,你get了吗?再也不怕本地文件更新到环境用Linux命令重启服务器了。。。
来公司这么久,写过不少代码,可是一碰见关于Linux命令操作的马上绕过,每次都是嚷嚷同事过来帮我替换文件,重启服务器,一直害怕接触命令的我一次一次不嫌麻烦,哈哈.有没有醉了?其实我一直都知道操作不难, ...
- jQuery.Deferred对象
一.前言 jQuery1.5之前,如果需要多次Ajax操作,我们一般会使用下面的两种方式: 1).串行调用Ajax $.ajax({ success: function() { $.ajax({ su ...
- Contest 20140708 testA && testC
testA 输入文件: testA.in 输出文件testA.out 时限2000ms 问题描述: 如果一个数化为一个二进制数之后(没有前导0),0的个数>=1的个数.那么这个数就是方数. E ...