你好,游客 登录
背景:
阅读新闻

一个完整开发流程的 React demo(适合初学者)

[日期:2016-11-07] 来源:Github   作者: [字体: ]

博客地址: http://blog.xieliqun.com/2016/11/04/react-zhihu/

这是一个模仿知乎界面的简单React demo。这个React demo能让你从零开始学习React,并逐渐掌握React。它包括了一个项目从零到项目完成的整个过程。

项目运行

$ git clone https://github.com/tsrot/react-zhihu.git
$ cd react-zhihu

$ npm install

$ bower install

$ gulp server   //用浏览器打开 localhost:5000

搭建开发环境

初始化npm bower

npm init  //一直enter,默认就好

bower init //同上

安装必要的开发工具包

  • gulp :基于流的自动化构建工具
  • gulp-browserify :前端模块及依赖管理
  • gulp-concat :文件合并插件
  • gulp-react :JSX语法转化工具
  • gulp-connect :构建本地开发Web服务器
  • lodash :一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库
  • reactify :React 编译器
npm install gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify --save-dev

安装生产环境依赖包

  • react :主要框架
  • react-dom :React的DOM操作类
  • bootstrap :bootstrap样式
npm install --save react react-dom

bower install --save bootstrap

写入gulp配置文件gulpfile.js

你可以在npm的网站上找到相应插件的gulp配置写法。我配置的gulpfile.js

开发

  • 切分相应的模块
  • 分清UI组件和容器组件
  • 学会如何在组件之间通信
  • 注意写作规范和开发细节

部署生产

请切换分支到 product 分支

修改gulpfile文件

//添加copy任务
gulp.task('copy',function(){
    gulp.src('./app/css/*')
    .pipe(gulp.dest('./dist/css'));

    gulp.src('./bower_components/**/*')
    .pipe(gulp.dest('./dist/libs'));

    gulp.src('./*.html')
    .pipe(gulp.dest('./dist'));
});

//生产服务器
gulp.task('connect-pro',function(){
    connect.server({
        root:'./dist',
        port:port,
        livereload:true,
    })
});

//添加build任务
gulp.task('build',['browserify','copy']);

//添加启动生产服务器任务
gulp.task('server-pro',['build','connect-pro','watch']);

修改index.html引用目录

<link rel="stylesheet" href="./libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="./css/index.css">

<script src="./js/main.js"></script>

使用gulp-gh-pages部署到github pages

下载gulp-gh-pages插件

npm install --save-dev gulp-gh-pages

在gulpfile文件中添加配置gulp-gh-pages代码

var ghPages = require('gulp-gh-pages');

gulp.task('deploy', function() {
  return gulp.src('./dist/**/*')
    .pipe(ghPages());
});

后续

将在分支中更新使用下列技术的版本

  • webpack
  • webpack + redux
  • webkack + redux + react-router
收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻      
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款