Professional Documents
Culture Documents
Dismiss
Join GitHub today
GitHub is home to over 36 million developers working together to host and
review code, manage projects, and build software together.
Sign up
benoitvallon Merge pull request #30 from crowchirp/patch-1 … Latest commit 9f9ba31 on Feb 9, 2017
.editorconfig Adds initial files from yeoman generator 'react-webpack' 4 years ago
webpack.config.js Harmonizes the main entry files for build 4 years ago
webpack.dist.config.js Harmonizes the main entry files for build 4 years ago
README.md
This project shows how the source code can be architectured to run on multiple devices. As of now, it is able to run as:
Screenshots
Website App
Libraries/tools
This project uses libraries and tools like:
Basic philosophy
All the code is contained in the src directory, especially the 3 main entry files that are used for the builds:
index.ios.js & index.android.js are the ones used to build the iOS & Android Apps
index.js is the one used to build the Website App and Desktop App as the code is strictly the same.
Components
The real interest of the project is in how the components have been structured to shared most of their logic and only
redefined what is specific to every device.
Basically, every component has a main Class which inherits a base Class containing all the logic. Then, the main
component import a different Render function which has been selected during the build. The file extension .ios.js ,
.android.js or .js is used by the build tool to import only the right file.
The .native.js files contain code that is shared between both mobile platforms (iOS & Android). Currently, the .ios.js
and .android.js files compose this .native.js file since all code is shared right now. However, if a component needed to
be different for platform specific reasons, that code would be included in the corresponding platform specific files.
At the end, every component is defined by 6 files. If we look at the screen component, here is its structure.
Screen.js
├── ScreenBase.js
├── ScreenRender.ios.js (specific to iOS build
├── ScreenRender.android.js (specific to Android build)
├── ScreenRender.native.js (shared mobile app code - iOS & Android)
└── ScreenRender.js (used during Website and Desktop build)
And here is the main Class file which composes the files.
'use strict';
render () {
return Render.call(this, this.props, this.state);
}
}
What's next
Here are some thoughts about what can come next:
npm install to install all the dependencies, React and React Native among others.
npm install npm run it twice, because of the packages won't be installed after the first run #10985
iOS
OS X
Xcode 6.3 or higher is recommended (Xcode only runs on Mac).
Homebrew is the recommended way to install node, watchman, and flow.
brew install node
brew install watchman . We recommend installing watchman, otherwise you might hit a node file watching bug.
Android
iOS
Android
Congratulations! You've just successfully run the project as an iOS or Android App.
Quick start
npm run build to build the project (at least the first time)
Requirements for NW
To run the project, you are supposed to run something like:
/path/to/nw .
On OSX, the executable binary is in a hidden directory within the .app file. The easier solution to install it is to download the
app on http://nwjs.io/ then copying it to your application folder. You will now be able to run:
/Applications/nwjs.app/Contents/MacOS/nwjs .
alias nw="/Applications/nwjs.app/Contents/MacOS/nwjs"
npm run serve-nw to launch the desktop app and enable livereload
npm run serve-electron to launch the desktop app and enable livereload
npm test
© 2019 GitHub, Inc. Terms Privacy Security Status Help Contact GitHub Pricing API Training Blog About