react(1)-broswerify+reactify+gulp搭建react的workflow+React入门资料集合

介绍了整体react的自动化的流程已经react的基本原理 和入门:
http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/

react的virtual dom
https://www.youtube.com/watch?v=-DX3vJiqxm4

browserify的handbook
https://github.com/substack/browserify-handbook

当 React 遇见 Gulp 和 Browserify

package.json

1{ 2 "name": "kiwi-react", 3 "version": "0.0.1", 4 "description": "this is my react first demo", 5 "main": "bundle.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "keywords": [ 10 "react" 11 ], 12 "author": "kiwizhang", 13 "license": "ISC", 14 "devDependencies": { 15 "babelify": "^7.2.0", 16 "browserify": "^12.0.1", 17 "gulp": "^3.9.0", 18 "reactify": "^1.1.1", 19 "vinyl-source-stream": "^1.1.0" 20 }, 21 "dependencies": { 22 "react": "^0.14.5", 23 "react-dom": "^0.14.5" 24 } 25} 26 27

gulpfile.js

1var gulp=require('gulp'); 2var browserify=require('browserify'); 3var source=require('vinyl-source-stream'); 4var reactify=require('reactify'); 5gulp.task('browserify',function(){ 6 browserify('src/FilterabelProductTable/main.js') 7 .transform(reactify) 8 .bundle() 9 .pipe(source('bundle.js')) 10 .pipe(gulp.dest('js')); 11}); 12gulp.task('watch',['browserify'],function(){ 13 gulp.watch('./src/**/*.js',['browserify']); 14}); 15

main.js

1var React=require('react'); 2var ReactDOM=require('react-dom'); 3 4var ProductTable=require('./FilterabelProductTable.jsx'); 5var products=[ 6 {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'}, 7 {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'}, 8 {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'}, 9 {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'}, 10 {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'}, 11 {category: 'Sporting Goods', price: '$199.99', stocked: true, name: 'Nexus 7'}, 12 {category: 'Sporting Goods', price: '$299.99', stocked: true, name: 'Nexus 7'} 13]; 14 15ReactDOM.render( 16 <ProductTable products={products}/>, 17 document.getElementById("test") 18); 19 20 21 22

tips:

1.所有的其他文件都是jsx格式的
2.每个jsx文件里面都要var React=require("react")把react文件引入,browserify规定的,否则会报错说全局找不到react。
3.如果不想那么麻烦,那么可以在main.js里面加入这么一句,var React=require('react'); window.React=React;

4.一定要记得模块化导出的时候的正确格式。。~~o(>_<)o ~~

代码交流 2021