模仿知乎界面的一个简单React demo

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

项目地址：https://github.com/tsrot/react-zhihu
项目预览：http://blog.xieliqun.com/react-zhihu/

项目运行

1 2 3 4 5 6 7 8

$ git clone https: //github.com/tsrot/react-zhihu.git $ cd react-zhihu $ npm install $ bower install $ gulp server //用浏览器打开 localhost:5000

搭建开发环境

初始化npm bower

1 2 3

npm init //一直enter，默认就好 bower init //同上

安装必要的开发工具包

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

1	npm install gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify --save-dev

安装生产环境依赖包

• react ：主要框架
• react-dom ：React的DOM操作类
• bootstrap ：bootstrap样式

1 2 3

npm install --save react react-dom bower install --save bootstrap

写入gulp配置文件gulpfile.js

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

开发

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

部署生产

请切换分支到 product 分支

修改gulpfile文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

//添加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引用目录

1 2 3 4

"stylesheet" href= "./libs/bootstrap/dist/css/bootstrap.css">

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

下载gulp-gh-pages插件

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

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

1 2 3 4 5 6

var ghPages = require( 'gulp-gh-pages'); gulp.task( 'deploy', function() { return gulp.src( './dist/**/*') .pipe(ghPages()); });

后续

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

• webpack
• webpack + redux
• webkack + redux + react-router

本文标题:模仿知乎界面的一个简单React demo

文章作者:Tsrot

发布时间:2016年11月05日 - 02时13分

最后更新:2016年11月22日 - 16时31分

原始链接:http://blog.xieliqun.com/2016/11/05/react-zhihu/