这是一个模仿知乎界面的简单React demo。这个React demo能让你从零开始学习React,并逐渐掌握React。它包括了一个项目从零到项目完成的整个过程。
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.publish add gulp-gh-pages Nov 5, 2016
app modify cancel button Feb 6, 2017
.gitignore add frist version Nov 5, 2016
README.md Update README.md Sep 18, 2017
bower.json add frist version Nov 5, 2016
gulpfile.js add frist version Nov 5, 2016
index.html add frist version Nov 5, 2016
package.json add project run method Nov 5, 2016

README.md

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

博客地址: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 + es6 (webpack分支)

1、手动删除bower_components,统一使用npm,这样有利于后面webpack的配置。 把bootstrap安装到node_modules:

$ npm install --save bootstrap

2、安装webpack-stream、vinyl-named、gulp-clean

$ npm install --save-dev webpack-stream vinyl-named gulp-clean

3、安装webpack plugin和webpack loader

$ npm install --save-dev html-webpack-plugin extract-text-webpack-plugin babel-core babel-loader babel-preset-es2015 babel-preset-react style-loader css-loader postcss-loader autoprefixer file-loader

4、配饰gulp和webpack

后续

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

  • webpack + es6 : webpack分支
  • webpack + es6 + redux
  • webkack + es6 + redux + react-router