React全家桶入門Demo

開篇

利用業(yè)余時間，做了個React項目，算是成品吧，比較簡單，還有很多瑕疵。目錄結(jié)構(gòu)相當(dāng)簡單。沒有數(shù)據(jù)庫，你們運行不起來。想運行起來的話，把express調(diào)用數(shù)據(jù)庫的部分全刪掉，寫死數(shù)據(jù)。

ak47

這個集成了React全家桶，可以直接運行，也可以直接在生產(chǎn)環(huán)境使用。

源碼

bbww/sight

Contribute to sight development by creating an account on GitHub.

預(yù)覽地址

最好用谷歌游覽器進(jìn)行體驗，其他游覽器沒測。https://downfuture.com351

技術(shù)棧

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

功能

• 簡單的登錄、注冊、修改密碼
• 用戶可以點贊和收藏
• 個人中心可以上傳頭像和圖片(圖片最多上傳三張)，暫時未壓縮。
• 個人中心可以修改密碼和登出

目錄結(jié)構(gòu)

常用方法

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('發(fā)送fetch失敗' + JSON.stringify(err) + ',方法名：' + method);
    });

接口符合restFul設(shè)計

util.js

工具類js

router.js

所有的路由配置都在這個js中

結(jié)語

建站步驟，在我的blog中分享出來了。歡迎一起討論，只介紹實現(xiàn)，不闡述相關(guān)代碼的含義。