React Mobile

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.

Get the kit

$ git clone https://github.com/qiaolevip/react-mobile.git && cd react-mobile

Installation

Install all dependencies.

$ npm install

Development

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

Build

Builds a minified version of the application in the dist folder.

$ gulp build --type production

$ gulp build --type production --app family

Testing

We use jest to test our application.
You can run the tests that are defined under app/scripts/__tests__ with

$ npm test

Javascript

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

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.

Webpack Hints

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