Repository files navigation

The purpose of this framework is to show how to set up a conciseReact app aimed at rapid development and sophisticated asynchronic processing. The actual application code is written usingECMAScript 6,JSX, andnot-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 thisReact Ecosystem and Tutorials

• 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, andhot reloading)

In development mode, the code is automatically transpiled by Babel and hot-loaded to the browser by react-hot-loader plugin utilizingWebpack's HMR feature. With HMR, the changes made to the source files are reflected automatically on the browserwithout 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, seeWebpack’s HMR & React-Hot-Loader — The Missing Manual.Both server, web, mobile source code are written in Babel, and sharing some common frameworks.

• Node.js

• Install the dependencies:npm install
• Go to mobile/ReactNotes then runnpm 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
• Runecho "sdk.dir=$ANDROID_HOME" > android/local.properties to setup android environment
• Runrnpm install module to install and linke a module
• Runrnpm unlink module to unlink a module

• 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 asReact Developer Tools andRedux DevTools, which can significantly boost React app development

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