Skip to content
Mobile, desktop and website Apps with the same code
JavaScript Objective-C Python Java HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android
ios
plop-templates
src
.babelrc
.buckconfig
.editorconfig
.eslintrc
.flowconfig
.gitignore
.travis.yml
.watchmanconfig
Gruntfile.js
LICENSE
README.md
app.json
electron.js
favicon.ico
index.desktop.html
index.web.html
package.json
plopfile.js
rn-cli.config.js
webpack.dev.config.js
webpack.dist.config.js

README.md

React to Everything

Mobile, desktop and website Apps with the same code

Coverage Status Build Status

Libraries

  • react for web and desktop app
  • react-native for iOS and android app
  • redux to manage the state
  • react-redux to connect redux with react
  • i18n-js for i18n translation in all apps
  • electron to build an electron app
  • electron-packager to package an electron app for Linux, Mac and Windows
  • babel to be able to use all the fancy ES6 stuff
  • eslint to really use all the fancy ES6 stuff
  • grunt to create build task
  • webpack to help with developing the web and desktop app
  • jest to tests your files

Basic philosophy

I kept the basic philosophy of Benoitvallon. So take a look at his repo to understand how you should structure your codebase, when using this boilerplate.

Imgur

Tests

Because the base class as described by Benoitvallon of each component should contain all the logic, this file should be tested really well. I would recommend creating the test file right when you create the component and write tests for each method in the Base Class as soon as possible.

NPM Scripts

I have created npm scripts for every task I have encountered, when something is missing let me know. 😄

npm run ...

  • build - runs webpack to translate es6 code and merge all of your code in a single file
  • package:desktop - creates a package for Linux, Mac and Windows in the dist Folder
  • package:android - creates an apk for android
  • electron - runs your app with electron
  • web - runs your app in the browser
  • react-native - starts react-native
  • android - runs your app on a connected android device or a simulator
  • ios - runs your app on an iOS device or a simulator
  • coverage - runs code coverage
  • lint - runs eslint to check your code style
  • travis - runs build, test, coverage and lint
  • plop - auto generate components

npm ...

  • start - runs your app in the browser
  • test - runs mocha to test your app

Plop

With Plop you can auto generate new components. Simply type

npm run plop

and then choose the desired option. Give a name and you a ready to go and start coding, without the hassle of creating the same structure over and over again. Plop is configured by plopfile.js. The templates can be found in plop-templates.

Codestyle

I find it really important to use a consistent codestyle throughout your project. Therefore, I added ESLint as a devDependency and created an eslint-config file. Most of the codestyle rules came from the Airbnb Style Guide. They have done an awesome job with this style-guide. I think, when you use a good codestyle you make fewer errors and when you combine that with ESLint, which will consistently throw your bad styles at you (when you have an editor, which picks show ESLint errors/warning or after running "npm run lint"), you will make much fewer mistakes.

ES6

This boilerplate is all about ES6. Everything is written with new ES6 features. Tests ... ES6, Source Files ... ES6, Gruntfile ... ES6, Webpack Config ... ES6. So keep moving with Javascript and use ES6. I love it ❤️. Here you can read about how you have done something with Javascript and how you do it with ES6. Use ECMAScript 6 Today

How to get started?

  1. Clone the repository git clone https://github.com/mikebarkmin/react-to-everything.git
  2. Install all Dependencies npm install
  3. Setup React Native

Install watchman:

git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.5.0  # the latest stable release
./autogen.sh
./configure
make
sudo make install

Install flow:

sudo npm install -g flow-bin

Android requires a little more work from you, but when you are following this guide (Android Setup) it should be easy.

Now everything is set up and you are ready to develop your awesome app. I would really love to know about your projects. So send me an email and I will take a look.

You can’t perform that action at this time.