React Learning（Day3-）(2019.7.7--2019.7.13)

日常擠牙膏

React項目實戰(zhàn)：簡書 官網(wǎng)

一、項目結(jié)構(gòu)

│  .gitignore
│  package-lock.json
│  package.json
│  README.md
│
├─public
│  │  faviconjianshu.ico
│  │  index.html
│  │
│  └─api
│          detail.json
│          headerList.json
│          homeData.json
│          homeList.json
│          login.json
│
└─src
    │  App.js
    │  index.js
    │  style.js
    │
    ├─common
    │  ├─footer
    │  │      index.js
    │  │      style.js
    │  │
    │  └─header
    │      │  index.js
    │      │  style.js
    │      │
    │      └─store
    │              actionCreators.js
    │              constants.js
    │              index.js
    │              reducer.js
    │
    ├─pages
    │  ├─detail
    │  │  │  index.js
    │  │  │  loadable.js
    │  │  │  style.js
    │  │  │
    │  │  └─store
    │  │          actionCreators.js
    │  │          constants.js
    │  │          index.js
    │  │          reducer.js
    │  │
    │  ├─home
    │  │  │  index.js
    │  │  │  style.js
    │  │  │
    │  │  ├─components
    │  │  │      DownloadApp.js
    │  │  │      List.js
    │  │  │      Recommend.js
    │  │  │      Topic.js
    │  │  │      Writer.js
    │  │  │
    │  │  └─store
    │  │          actionCreators.js
    │  │          constants.js
    │  │          index.js
    │  │          reducer.js
    │  │
    │  ├─login
    │  │  │  index.js
    │  │  │  style.js
    │  │  │
    │  │  └─store
    │  │          actionCreators.js
    │  │          constants.js
    │  │          index.js
    │  │          reducer.js
    │  │
    │  └─write
    │          index.js
    │
    ├─statics
    │  │  beta.png
    │  │  logo.png
    │  │
    │  └─iconfont
    │          iconfont.eot
    │          iconfont.js
    │          iconfont.svg
    │          iconfont.ttf
    │          iconfont.woff
    │
    └─store
            index.js
            reducer.js

二、各部分功能簡介

1.common（公共部分）

• [x] header
  • [x] logo //簡書圖標(biāo)
  • [x] icofont //指南針、手機(jī)、放大鏡、毛筆、刷新 圖標(biāo)
  • [x] search box with variable length //聚焦變長搜索框
  • [x] '換一批' //換一批邏輯和動畫，從API獲取熱門搜索
  • [x] login //登錄按鈕
  • [x] logout //登出按鈕
  • [ ] singup //注冊按鈕
  • [x] Write Artical //寫文章按鈕
• [x] footer //底部

2.pages（具體頁面）

• [x] home page //主頁，從API獲取熱門話題、文章列表
• [x] detail page //詳情頁面，從API獲取文章
• [x] login page //登錄頁面，賬號密碼隨意，從API驗證
• [ ] write page //寫作業(yè)面，含未登陸不允許訪問設(shè)置

3.總體框架

public文件夾下的index.html是文件入口

public文件夾下的api是存放接口數(shù)據(jù)

src下的index.js給上面的文件indext.html注入<App/>大組件

src下的style.js給文件App.js注入總體樣式

src下的App.js匯集所有子組件、數(shù)據(jù)store

src下的statics目錄下存放靜態(tài)文件

src下的store目錄下存數(shù)據(jù)

src下的common目錄下存header&footer組件

src下的pages目錄下存detail,home,login,write組件

4.某一組件（detail）說明

index.js總體文件

style.js樣式文件

loadable.js懶加載文件

store發(fā)請求文件夾

store下的index.js發(fā)請求接口文件

store下的reducer.js處理請求

store下的actionCreators.js派發(fā)請求

store下的constants.js存常量

三、運行截圖

Home

home.png

Footer & More

footer.png

Detail

detail.png

Login

login.png

四、代碼倉庫

倉庫地址：https://github.com/Allenem/ReactDraft/tree/master/jianshu

快速開始：

git clone https://github.com/Allenem/ReactDraft.git

cd jianshu

npm install

npm run start