react-mapfilter
Version:
A React Component for viewing and filtering GeoJSON
53 lines (27 loc) • 4.8 kB
Markdown
# Contributing to MapFilter
:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
MapFilter v1.x is built with [React](http://facebook.github.io/react/) and [Redux](http://redux.js.org). Please make yourself familiar with these libraries by reading the [docs](http://facebook.github.io/react/docs/getting-started.html). This [video series](https://egghead.io/series/getting-started-with-redux) is an excellent intro to Redux.
## Code Style & Linting
[](https://github.com/feross/standard)
Mapfilter follows [JavaScript Standard Style](https://github.com/feross/standard), to keep things consistent and avoid arguments. It is written in [ES2015](http://babeljs.io/docs/learn-es2015/), including a couple of useful experimental features that are not part of ES2015: [class-properties](https://github.com/jeffmo/es-class-static-properties-and-fields) and [object-rest-spread](https://github.com/sebmarkbage/ecmascript-rest-spread). These two experimental features [make coding with React easier](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) e.g. allowing us to automatically bind instance methods by combining arrow functions and class properties.
We don't (yet) use [ES2015 module syntax](https://babeljs.io/docs/learn-es2015/#modules) because the [standard for module loading](https://whatwg.github.io/loader/) was not included in ES2015 and is not yet finalized, and ES2015 module syntax was giving some headaches with certain build and testing tools. Instead we use [CommonJS](https://nodejs.org/docs/latest/api/modules.html) module syntax throughout.
Check the [`standard` docs](http://standardjs.com/index.html#text-editor-plugins) for how to set up linting in your favourite text editor.
Once installed you should see live linting errors in your text editor, or you can `npm run lint` to lint all files with standard.
### Linting Config
Unfortunately configuring linting with Babel and React is a big pain right now. You don't have to worry about this, since everything is already configured, but here are details about the setup we use:
We configure standard in [`package.json`](./package.json) to use [`babel-eslint`](https://github.com/babel/babel-eslint) as a parser. We use [Babel](http://babeljs.io/) v6 to transpile code into ES5 Javascript that is compatible with most modern browsers. Babel v6 needs to be explicitly configured with plugins for each feature you want to transpile, or [use presets](http://babeljs.io/docs/plugins/#presets) to include shareable collections of plugins. We configure babel in [`.babelrc`](./.babelrc) to use presets [`es2015`](http://babeljs.io/docs/plugins/preset-es2015) and [`react`](http://babeljs.io/docs/plugins/preset-react/). We add two additional plugins for experimental features [class-properties](http://babeljs.io/docs/plugins/transform-class-properties) and [object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread).
## Build tools
Mapfilter is built using the excellent [Browserify](http://browserify.org) which bundles modular code into a single code bundle that works in the browser. We use the browserify transform [babelify](https://github.com/babel/babelify) to use babel to transform bundled code.
## Hot Module Reloading
Hot Module Reloading allows live code editing without reloading the browser or loosing state. Changes are automatically injected into the open page as you save your code.
MapFilter uses [LiveReactload](https://github.com/milankinen/livereactload) to implement hot reloading with Browserify. This uses [babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform) and [react-proxy@1.x](https://github.com/gaearon/react-proxy). It is configured in [`.babelrc`](./.babelrc) as a plugin ([see docs](https://github.com/milankinen/livereactload#installation)).
We use [budo](https://github.com/mattdesl/budo) as a dev server (budo defaults to the `--debug` option for Browserify, which enables source maps).
All you need to do is `npm start` which will use budo to start a server with bundled code and hot loading enabled.
## Redux DevTools Extension
[Redux DevTools](https://github.com/gaearon/redux-devtools) allows you to inspect actions and state and playback actions. If you install the [Redux DevTools Chrome Extension](https://github.com/zalmoxisus/redux-devtools-extension) you will be able to use the Redux DevTools as you develop MapFilter.
## Dependencies
Make sure you are not forgetting any dependencies, or including unnecessary dependencies, but running:
```
npm run dependency-check
```