This react mobile provides a prepared development environment based on gulp, stylus and webpack.
####Demo This mobile does not include some fancy UI stuff but is a lightweight starting point for your next react app.
$ git clone https://github.com/qiaolevip/react-mobile.git && cd react-mobile
Install all dependencies.
$ npm install
Builds the application and starts a webserver with livereload. By default the webserver starts at port 1337.
You can define a port with $ gulp --port 3333.
$ npm start
Running different app
$ gulp --app family
Builds a minified version of the application in the dist folder.
$ gulp build --type production
$ gulp build --type production --app family
We use jest to test our application.
You can run the tests that are defined under app/scripts/__tests__ with
$ npm test
Javascript entry file: app/scripts/main.js
ES6 with babel
We are working with the webpack babel loader in order to load our .js/.jsx files. Babel allows you to use ES6 features like class, arrow functions and much more.
CSS entry file: app/stylus/main.styl
Stylus
As you can see we are using stylus to preprocess our .styl files. If you didn't work with a css preprocessor before the stylus page is a good starting point to get to know what stylus can do for you.
If you want to use third-party CSS you just include it via @import 'path/to/your/third-party-styles.css' at the top of the main.styl file.
You can find the webpack configuration in the webpack.config.js file. We use the babel-loader in order to load .jsx and .js files via webpack. If it's possible install all your dependencies with NPM. Packages installed with NPM can be used like this:
var moduleXYZ = require('moduleXYZ');
You can find all loaders in this list.
###Requirements
- node
- npm
- gulp