react-template-easily(簡單易用的react前端工程化模板)

he_xd 發布于2019-08-21 17:48 / 2371人閱讀

摘要：是一套以技術搭建的項目模板，適用于移動端和開發。其中包含常用常用組件，精細計算的，以及諸多項目的實踐。

react-template-easily Desc：

react-template-easily 是一套以react技術搭建的項目模板，適用于移動端H5, webapp和hybirdApp開發。其中包含常用20+常用組件，精細計算的rem，以及諸多項目的實踐。

URL:

https://github.com/jinjiaxing/react-template-easily

Demo:

Demo展示（請使用chrome模擬移動端方式查看，或者使用手機查看）

技術棧

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

如何切換react與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: 34568305@qq.com

GPU云服務器云服務器簡單的php網站模板優秀的前端工程師好的前端工程師前端react

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90043.html

react-template-easily(簡單易用的react前端工程化模板)

摘要：是一套以技術搭建的項目模板，適用于移動端和開發。其中包含常用常用組件，精細計算的，以及諸多項目的實踐。 react-template-easily Desc： react-template-easily 是一套以react技術搭建的項目模板，適用于移動端H5, webapp和hybirdApp開發。其中包含常用20+常用組件，精細計算的rem，以及諸多項目的實踐。 URL: http...

rottengeek 2019-08-29 13:53 評論0 收藏0
前端每周清單第 48 期：Slack Webpack 構建優化，CSS 命名規范與用戶追蹤，Vue.

摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...

sean 2019-08-22 13:57 評論0 收藏0
aotoo-hub，一體式大前端架構

摘要：年底了，開源一套我們的大前端架構，小伙伴們都用得很爽的。聽說的人明年會發財文檔是一套正式上線的大前端解決方案。是一套前端端彼此相親相愛不分離，你中有我，我中有你的大前端解決方案。年底了，開源一套我們的大前端架構aotoo-hub，小伙伴們都用得很爽的。 GITHUB -- 聽說star的人明年會發財文檔 aotoo-hub是一套正式上線的大前端解決方案。迭代的這2年多的時間，...

raoyi 2019-08-23 14:21 評論0 收藏0
前端每周清單半年盤點之 Angular 篇

摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0