generator-mobx-react

Introduction

mobx-react is a fantastic library that combines MobX observables with React for powerful, intuitive state management.

This generator is intended to help people get started with mobx-react by providing a relatively lightweight project generator that takes care of the basic project infrastructure and lets the user get started coding right away.

What yo mobx-react handles for you

This generator will set up a basic React/MobX project for you, including the following features:

• Scaffold a basic app, including config files and dependencies
• Choice between ES2015 and TypeScript
• If using ES2015, yo mobx-react will set up Babel 6 + the appropriate plugins and presets for supporting React + Mobx
  • babel-preset-es2015
  • babel-preset-stage-1 (for spread/rest and extended class syntax)
  • babel-preset-react
  • babel-plugin-transform-decorators-legacy (since Babel 6 doesn't currently support decorators, we need this to work with mobx)
  • babel-plugin-transform-object-assign
  • babel-plugin-array-includes

• If using TypeScript, yo mobx-react will install the latest version of TypeScript, plus Typings for type definitions. It will also set up a basic tsconfig and typings.json file for you, with React and React-DOM typings installed.

• Webpack, with the following configuration

  • transpilation via babel-loader or awesome-typescript-loader
  • css bundling
  • npm-auto-install
  • code splitting in production builds
  • webpack-dev-server with hot module reloading
• eslint
  • babel-eslint parser so the linter doesn't freak out about decorators (or other features)
  • uses the Airbnb style guide
  • configurable via .eslintrc.js
• package.json with the necessary dependencies, as well as scripts for the dev server as well as production build

Installation

First, install Yeoman and generator-mobx-react using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-mobx-react

Then generate your new project:

yo mobx-react

npm Scripts

Once you've generated your project, you'll have access to the following npm scripts from the command line:

• npm run build: Transpile and bundle your project via webpack using production optimizations.
• npm start: Start webpack-dev-server at http://localhost:8080. webpack-dev-server will automatically rebuild your app whenever you save changes. In addition, it will hot-reload your changes without triggering a browser refresh (i.e. your state persists across file changes!!). Finally, it will automatically install any unresolved dependencies whenever you import them in your code.
• npm run build-es6: Transpile your code to ES2015 modules. Note that this option does not bundle or optimize your code. Instead, it simply transpiles each module in your src directory into a corresponding ES2015 module in the es6 directory. This gives you the option to then use a tree-shaking bundler like rollup.js.
• npm run clean: rimraf all the things (except src obviously)
• npm run compile: Build all the things. This command will run all of the preceding build steps in sequence.

TO DO

• Create new folder if the current working directory doesn't match the project name

Acknowledgements

• @mweststrate and the MobX team
• SurviveJS for being an unbelievably useful resource for figuring out Webpack config stuff. Almost all of the webpack tricks implemented in yo mobx-react are based on things I learned from SurviveJS. Definitely buy the book!

License

MIT © Chris Freeman