codecamp

React全家桶入门Demo

开篇

利用业余时间,做了个React项目,算是成品吧,比较简单,还有很多瑕疵。目录结构相当简单。没有数据库,你们运行不起来。想运行起来的话,把express调用数据库的部分全删掉,写死数据。

ak47

这个集成了React全家桶,可以直接运行,也可以直接在生产环境使用。

github.com80

源码

github.com117

bbww/sight

Contribute to sight development by creating an account on GitHub.

预览地址

最好用谷歌游览器进行体验,其他游览器没测。https://downfuture.com351

技术栈

react + redux + saga + router + es6 + node.js + webpack + mysql

功能

  • 简单的登录、注册、修改密码
  • 用户可以点赞和收藏
  • 个人中心可以上传头像和图片(图片最多上传三张),暂时未压缩。
  • 个人中心可以修改密码和登出

目录结构

常用方法

fetch

function request({ method, options, callback }) {
  options.mode = "cors";
  if(!options.sign) {
    options.headers = {
      'Content-Type': 'application/json'
    };
    if(!(options.method === 'GET' || options.method === 'DELETE')) {
      options.body = JSON.stringify(options.body);
    }
  }
  options.credentials = 'include';
  return fetch(getApi + method, options )
    .then(checkStatus)
    .then(parseJSON)
    .then((data) => {
      return data;
    }).catch((err) => {
      message.config({
        top: 24,
        duration: 1,
        maxCount: 3,
      });
      message.error('发送fetch失败' + JSON.stringify(err) + ',方法名:' + method);
    });

接口符合restFul设计

util.js

工具类js

router.js

所有的路由配置都在这个js中

结语

建站步骤,在我的blog中分享出来了。欢迎一起讨论,只介绍实现,不阐述相关代码的含义。


初学者的React全家桶完整实例
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }