A simple React demo that mimics the Zhihu interface

Blog: blog.xieliqun.com/2016/11/04/…

This is a simple React demo that mimics the Zhihu interface. Learn React from scratch with this React demo. It covers the entire process of a project from zero to completion.

Project running

$ git clone https://github.com/tsrot/react-zhihu.git $ cd react-zhihu $ npm install $ bower install $ gulp server // Open localhost:5000 with a browser

Initialize NPM Bower

NPM init // always enter, default good bower init // same as above

Install production environment dependency packages

  • React: The main framework
  • React -dom: the REACT DOM manipulation class
  • Bootstrap: Indicates the bootstrap style
npm install --save react react-dom

bower install --save bootstrap

The development of

  • Shred corresponding modules
  • Distinguish between UI components and container components
  • Learn how to communicate between components
  • Pay attention to writing specifications and development details

Example Modify the gulpfile file

/ / add the copy task gulp. Task (' copy ', function () {gulp. SRC ('/app/CSS / * '). The 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,})}); // Add build task gulp.task('build',['browserify','copy']); / / add start production server task gulp. Task (' server - pro '[' build', 'the connect pro -', 'watch']);

Deploy to Github Pages using gulp-gh-Pages

Download the gulp-GH-Pages plugin

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

Add the code to configure gulp-gh-pages in gulpfile

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

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