• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

tubackkhoa/tkframework: react + relay + redux + saga + graphql + webpack

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

tubackkhoa/tkframework

开源软件地址(OpenSource Url):

https://github.com/tubackkhoa/tkframework

开源编程语言(OpenSource Language):

JavaScript 54.1%

开源软件介绍(OpenSource Introduction):

React + Redux + Saga + Relay + GraphQL + Express + Sequelize + Material-UI + Webpack + Babel example with hot reloading and routing

The purpose of this framework is to show how to set up a concise React app aimed at rapid development and sophisticated asynchronic processing. The actual application code is written using ECMAScript 6, JSX, and not-yet-standardized JavaScript syntax. As of 10/2016, modern browsers (excluding IE11 and older, naturally) implement more than 90% of ES6 specification, and therefore it is no more absolutely necessary to transpile ES6 into ES5, unless support for obsolete browsers is required. In such case, Babel preset for ES6->ES5 transpilation can be used. For more detail, please go to this React Ecosystem and Tutorials

TKFramework overview

React-redux-saga Diagram React-relay-graphql Diagram Code sharing Diagram

Main dependencies

  • babel for transpiling next-generation JavaScript and JSX into JavaScript supported by current browsers
  • react-hot-loader for hot-reloading a React app
  • react-router for routing
  • redux for managing application state predictably
  • react-redux for integrating Redux into React
  • react-router-redux for managing router state via Redux
  • redux-saga for sophisticated asynchronic processing
  • redux-persist for persist and rehydrate a redux store
  • redux-form for keeping form state in a redux store
  • react-native for building native apps with React
  • webpack for bundling the code and providing a development server supporting HMR (hot module replacement, a.k.a. hot module reloading, hot loading, and hot reloading)

In development mode, the code is automatically transpiled by Babel and hot-loaded to the browser by react-hot-loader plugin utilizing Webpack's HMR feature. With HMR, the changes made to the source files are reflected automatically on the browser without page reload. Page reload resets application state whereas hot reload preserves the state and only updates the changed part of the application. For further information on HMR, see Webpack’s HMR & React-Hot-Loader — The Missing Manual. Both server, web, mobile source code are written in Babel, and sharing some common frameworks.

Requirements

  • Node.js

Usage

Setup

  • Install the dependencies: npm install
  • Go to mobile/ReactNotes then run npm install again to setup development environment for mobile
  • You may run script from server/data/db/schema.js or import scripts/tkframework.sql using phpmyadmin
  • Run echo "sdk.dir=$ANDROID_HOME" > android/local.properties to setup android environment
  • Run rnpm install module to install and linke a module
  • Run rnpm unlink module to unlink a module

Development

  • Run Webpack development server: npm start
  • Run Server development server: npm run server
  • Point your browser to the server (e.g. http://localhost:7000) and begin development at ./src
  • There are also browser extensions, such as React Developer Tools and Redux DevTools, which can significantly boost React app development

Production

  • Create minified bundle: npm run bundle
  • Serve ./public with your production server of choice
  • Run sshpass -p "password" npm run deploy to deploy on server
  • Run sshpass -p "password" npm run server-deploy to deploy server code
  • Run sshpass -p "password" npm run client-deploy to deploy website code
  • Run npm run build:ios to bundle react-native code in ReactNotes folder
  • Run PORT=80 DB_PASS=123456 forever -w start index.js to keep server running and restarting on changes
  • Run node-inspector & npm run server if node does not support --inspect



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap