[DEPRECATED] A lightweight Yeoman for generator for scaffolding new projects using mobx-react projects
MIT License
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.
yo mobx-react
handles for youThis 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
mobx
)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
babel-loader
or awesome-typescript-loader
eslint
babel-eslint
parser so the linter doesn't freak out about decorators (or other features).eslintrc.js
package.json
with the necessary dependencies, as well as scripts for the dev server as well as production build
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
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.yo mobx-react
are based on things I learned from SurviveJS. Definitely buy the book!MIT © Chris Freeman