我的React前端工程化模板&元件庫
阿新 • • 發佈：2019-01-05
react-template-easily
Desc：
react-template-easily 是一套以react技術搭建的專案模板，適用於移動端H5, webapp和hybirdApp開發。其中包含常用20+常用元件，精細計算的rem，以及諸多專案的實踐。
URL:
Demo:
技術棧
- react:16
- react-dom:16
- react-router-dom:4
- redux:3.7.2
- redux-thunk:2.2
- react-redux:5.0.6
- sass
- postcss
- webpack:3.8.1
- iscroll:5
- …
目錄結構和檔案說明
client 客戶端主目錄，PS：為將來SSR時加入server做準備，所以叫做client --actions redux全部action放入其中 --commonAction.jsx 通用的action放入其中 --pageHomeAction.jsx 首頁Demo的Action --common 公用util資料夾 --constant 常量 --CommonActionName.jsx action全部名稱 --Constant.jsx 常量變數集合 --StatisticConstant.jsx 自定義其他常亮 --img 公共圖片 --style 公共css檔案 --utils 公共util類 --Common.jsx 所有公用方法以及rem計算均在此檔案中 --component 全部react元件 --common 公共元件自定義了一些常用元件 --元件持續更新中 --business 放入自身業務元件(沒建立者資料夾，大家可自行建立) --pages 存放全部頁面元件 --PageHome demo首頁元件 --img 存放每個頁面的圖片 --_pageHome.scss 每個頁面獨立的樣式檔案 --PageHome.jsx 元件jsx檔案 --reducers 全部reducers放入此資料夾 --commonReducer.jsx 通用reducer --mainReducer.jsx 用於連線各reducer --pageHomereduces.jsx demo主頁的reducer --service http請求類庫 --Service.jsx 用於ajax/jsonp請求的方法均在此處，應用了promise --store --store.jsx --app.jsx 相當於頁面的父容器元件進行一些通用處理 --index.html html檔案 --router.jsx 入口檔案，也是路由檔案
install & run
git clone https://github.com/jinjiaxing/react-template-easily.git
npm install
npm run dev
瀏覽器訪問：0.0.0.0:8080
release
npm run release 或 sh ./build.sh
preact dev&release ##
npm run dev:preact
npm run release:preact
update
2017/10/22 新增Drawer元件 2017/12/01 修改Toast元件預設樣式 2017/12/02 修改Toast元件結構 2018/01/02 更新全部元件風格 2018/01/04 新增InputField元件 2018/01/08 新增preact版本，支援一鍵切換preact和react
developer
- name: jinjiaxing
- company: baidu
- mail: [email protected]