React初嘗試-仿寫CNode社區

cnode-react-app

一個學習 reactjs 的 demo，基於 CNode 社區提供的 API,以 react 組件化的開發思路，練習了基於 react 技術棧爲主的前端單頁面開發方式。

項目地址

https://github.com/monster1935/cnode-react-app

項目預覽

Demo

在線預覽，戳我

技術棧

• 腳手架工具
  官方腳手架工具 create-react-app
• 狀態管理
  redux，redux莞式教程, react-redux
• 前端路由管理
  react-router
• 打包編譯
  webpack
• ES6
  ECMAScript 6 入門

TODOLIST

• [x] 首頁組件化展現
• [x] 基於文章類型的前端路由添加
• [x] 基於文章詳情的前端路由添加
• [x] 文章詳情頁的展現
• [x] 文章評論的顯示

npm scripts

## 本地調試
yarn start

## 打包

yarn run build

## 發佈至github repository gh-pages分支,使用該功能須要yarn add gh-pages,
## 並在package.json中配置網站的路徑，如該示例中的homepage字段

yarn run deploy

總結

第一次嘗試使用 react 進行前端單頁面開發，以前曾經用 vue 寫過一個 CNode.js 的一個應用 vue-cnode。與 vue 都是 MVVM 框架，可是在react的開發中仍是有一些地方存在不一樣，目前還沒有進行深刻研究及實踐。在這個小項目中感覺最深的有如下幾點：

• 組件的寫法

react 中導出的是一個含有jsx語法的類， vue 的開發中組件通常以vue的單文件組件寫法，導出一個對象。

• 關於路由的使用

react 中使用 react-router 進行前端路由的管理，一樣含有 HashRouter 以及 BrowserRouter。其中 BrowserRouter 須要託管靜態主頁的服務器配合進行配置。

• 屬性的寫法

react 中 jsx 語法中給 html 綁定屬性值，部分屬性名稱發生變化，如 class 須要寫成 className, for 須要寫成 htmlFor，內聯樣式 style 屬性須要使用駝峯的寫法等。

• 組件之間的通訊

目前僅僅實踐了父子組件的通訊，經過 props 傳參。至於非父子組件之間的通訊如何來實現，還沒有涉及，redux 以及 react-redux 在該項目中並未獲得體現。

另外該仿 CNode.js 社區的 react 項目，僅僅經過部分API完成了首頁以及文章詳情頁的一些展現，添加了 react 的前端路由，目的在於體會 react 技術棧的開發方式，尚不足以談最佳實踐。

寫在最後

感謝 CNode 社區的提供的 API，一個有溫度的社區。