tsrot / react-zhihu

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

模仿知乎界面的一个简单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

react-zhihu's Issues

build打包之后的文件路径有错误

用gulp将编译后的脚本、资源文件、index.html 拷贝到dist里

  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'));
});

问题描述：
打包前 index.html 引用脚本的路径为：/dist/js/main.js
build之后 index.html 位置放在了dist目录下，/dist/js/main.js 这个引用路劲失效了。
预期效果： dist文件下存放的build之后的项目，应该是完整可用的。

谢谢！

gif

取消按钮取消时有bug

如果帖子有title和des的时候，这个时候点击取消按钮，不发表帖子的话，还是会在QuestionList出来。
应该是取消按钮也触动了submit事件。建议:

将

<button className="btn btn-default pull-right" onClick={this.props.onToggleForm}>取消</button >

改成

<span className="btn btn-default pull-right" onClick={this.props.onToggleForm}>取消</span>

新手求问

请问一下git主，您是在看了哪些资料之后着手写的这个demo

丸子妹妹，你这个demo为何没有用react-router，虽说是入门demo，但是很有必要

请问是把项目放在博客的public目录下进行展示的吗？

谢谢您的项目和说明，对我的帮助很大。
我正在尝试模仿做一个类似的demo，也想它能够被展示出来。请问您的项目是通过放在博客的公共目录下来实现访问的吗？