React to Everything
Mobile, desktop and website Apps with the same code
- 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
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.
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
- start - runs your app in the browser
- test - runs mocha to test your app
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.
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.
This boilerplate is all about ES6. Everything is written with new ES6 features.
Tests ... ES6, Source Files ... ES6, Gruntfile ... ES6, Webpack Config ... ES6.
How to get started?
- Clone the repository
git clone https://github.com/mikebarkmin/react-to-everything.git
- Install all Dependencies
- Setup React Native
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
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.