React的學(xué)習(xí)和家庭需求

工作上有需要接觸React，而在正式接觸相關(guān)產(chǎn)品之前為了了解一些基礎(chǔ)。除了標(biāo)準(zhǔn)教程里面的例子意外，總覺得有點(diǎn)不夠。
正好孩子他媽最近交給我一個任務(wù)：

• 兒子的學(xué)習(xí)資料需要整理，同時要方便他復(fù)習(xí)。
• 復(fù)習(xí)的時候最好可以迅速查看，答案最好就在旁邊，方便反復(fù)記憶。

需求分析和精煉

針對領(lǐng)導(dǎo)的要求，本人第一時間想出

大致方案

• Web方式的學(xué)習(xí)資料瀏覽最大限度的提高了可用性。只要自建服務(wù)器，隨時隨地可以讓孩子利用空余時間瀏覽。
• 答案切換 - 簡單，用Javascript做個簡單的圖片切換即可。
• 大部分圖像鏈接使用python自動生成html頁面。

說動手就動手，結(jié)果初步方案嘗試下來發(fā)現(xiàn)幾個問題

• 圖片切換的JavaScript很簡單，但是生成靜態(tài)頁面即便使用python自動化，也還是需要手動執(zhí)行。文件的維護(hù)不僅僅只是圖像文件本身。
• 打開頁面還是需要從Directory index進(jìn)入，對于大量文件夾，多少需要分類的功能。

實(shí)現(xiàn)方案方向變更

• 由于Directory index的形式就是固定的。使用ajax獲取后可以進(jìn)一步處理。生成動態(tài)頁面，實(shí)現(xiàn)僅僅需要維護(hù)文件夾中的內(nèi)容文件即可。
• 使用react構(gòu)筑，添加內(nèi)容分類功能。

React index的雛形

使用Ant design替換了簡陋的Directory index

加入基于文件夾名的二級分類功能

加入文件夾內(nèi)容類型設(shè)定添加Markdown文本頁面（初步嘗試）

添加學(xué)習(xí)資料復(fù)習(xí)頁面-使用Ant design組件顯得有逼格

不是很需要-但是還是加入基于在線iconfont的分類圖標(biāo)自定義功能

后續(xù)計劃

React Index的設(shè)計本身就是用于家庭成員簡單查看的家庭內(nèi)部網(wǎng)站。 只要懂得文件夾、文件的組織管理，媽媽孩子都可以很容易的添加內(nèi)容。 所以針對現(xiàn)在家庭使用中的一些需求，有一些后續(xù)打算

1. 添加（不用下載PDF的）PDF預(yù)覽（這個還需要技術(shù)調(diào)查，好像有js庫可以實(shí)現(xiàn)）。
2. 多域名支持和切換，這樣可以配置多個（可能不是很有必要）。
3. 功能頁面看看能不能做成動態(tài)加載，方便擴(kuò)展。
4. 看領(lǐng)導(dǎo)需求。。。

代碼簡陋，還在不斷精煉中，有興趣的和同樣需求的家長朋友可以查看我的Github頁面。

https://github.com/yougikou/react-index?github.com

總結(jié)

以上是生活随笔為你收集整理的页面自动获取焦点影响页面切换效果_ReactIndex - 让文件夹index页面变得更有实用性 (替换传统Web服务器index页)...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。