React的學習和家庭需求

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

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

需求分析和精煉

針對領導的要求，本人第一時間想出

大致方案

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

說動手就動手，結果初步方案嘗試下來發現幾個問題

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

實現方案方向變更

• 由于Directory index的形式就是固定的。使用ajax獲取后可以進一步處理。生成動態頁面，實現僅僅需要維護文件夾中的內容文件即可。
• 使用react構筑，添加內容分類功能。

React index的雛形

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

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

加入文件夾內容類型設定添加Markdown文本頁面（初步嘗試）

添加學習資料復習頁面-使用Ant design組件顯得有逼格

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

后續計劃

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

1. 添加（不用下載PDF的）PDF預覽（這個還需要技術調查，好像有js庫可以實現）。
2. 多域名支持和切換，這樣可以配置多個（可能不是很有必要）。
3. 功能頁面看看能不能做成動態加載，方便擴展。
4. 看領導需求。。。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。