<commit_before># react-boilerplate

[![CircleCI](https://circleci.com/gh/CodingZeal/react-boilerplate.svg?style=shield&circle-token=85b2758e5242f196abb90a032e29653b761ae335)](https://circleci.com/gh/CodingZeal/react-boilerplate)

Zeal's boilerplate setup for React/Redux projects.

This boilerplate contains our standard React/Redux setup for larger single-page front-end applications.

We expect that the front-end application will be embedded into a project along with the back-end application, likely in Rails.  The boilerplate is structured based on that assumption.

The boilerplate includes all of the tools that we're currently using in our React projects; you may not need all of it, so feel free to remove the parts that you don't need.

We assume some familiarity with the React/Redux ecosystem, including Babel and Webpack.

## Getting Started

After creating the repository for your project, copy the files from this repo into your working directory.  Be careful not to overwrite your `README.md` or `.gitignore`.  You may want to merge the boilerplate's `.gitignore` with your own.  Make sure you copy `.eslintrc`; that one's easy to miss when copying from the command-line, since it's a hidden file.

We've included an extremely simple starter application in the boilerplate.  To try it out, run `npm start`.  It will start the Webpack development server and open the application in your browser.  You should see a heading that says `Zeal React Boilerplate Test`.  If you look in the browser's console, you should see a message indicating that Hot Module Replacement is enabled.

The boilerplate is structured in modules, as described in [Rules For Structuring (Redux) Applications](http://jaysoo.ca/2016/02/28/organizing-redux-application/). The `sample` module can be duplicated and modified for other features as needed.

### Cleaning Up the Starter App

Once you've got your front-end application embedded into your real back-end server, you'll want to clean out the starter app.  To do that:

* Delete `index.html`
* Delete `webpack/starterApp.js`
* Delete the `start` script line from `package.json`
* Change the contents of `client/modules/app/components/App/index.js` and the `client/modules/sample` module as appropriate for your application.

## Notes of Interest

* We include `flux-standard-action` to indicate that our intention is to use that format for our actions.  We don't currently import it anywhere, but if you're so inclined, you can use its `isFSA()` function to check your actions in tests or as a guard in the reducer returned from `createReducer()`.

## ESLINT Configuration

Included in `package.json` are [eslint](https://github.com/eslint/eslint) and supporting modules.  Included is also Zeal's eslint configuration as a dependency; [eslint-config-zeal](https://github.com/CodingZeal/eslint-config-zeal).  The various build and dev scripts will use these configurations including of course the `lint` script.  It is also recommended that if you are using an editor or IDE that supports lint plugins that you install those plugins for the benefit of realtime linting.  For the Atom editor please see the [linter](https://atom.io/packages/linter) and [linter-eslint](https://atom.io/packages/linter-eslint) plugins.

## Recipes

These are recipes for common things you might want to do, but that we don't really want in our standard boilerplate.

### Using jQuery

With React, jQuery is almost never necessary, so think twice before deciding to include it.

However, sometimes we want to wrap a third-party component that uses jQuery.  In that case, we don't have much choice, so here's how to include jQuery and make it globally available.

- In [webpack/base.js](webpack/base.js), change:
```javascript<commit_msg>Document git-hook-skipping options<commit_after># react-boilerplate

[![CircleCI](https://circleci.com/gh/CodingZeal/react-boilerplate.svg?style=shield&circle-token=85b2758e5242f196abb90a032e29653b761ae335)](https://circleci.com/gh/CodingZeal/react-boilerplate)

Zeal's boilerplate setup for React/Redux projects.

This boilerplate contains our standard React/Redux setup for larger single-page front-end applications.

We expect that the front-end application will be embedded into a project along with the back-end application, likely in Rails.  The boilerplate is structured based on that assumption.

The boilerplate includes all of the tools that we're currently using in our React projects; you may not need all of it, so feel free to remove the parts that you don't need.

We assume some familiarity with the React/Redux ecosystem, including Babel and Webpack.

## Getting Started

After creating the repository for your project, copy the files from this repo into your working directory.  Be careful not to overwrite your `README.md` or `.gitignore`.  You may want to merge the boilerplate's `.gitignore` with your own.  Make sure you copy `.eslintrc`; that one's easy to miss when copying from the command-line, since it's a hidden file.

We've included an extremely simple starter application in the boilerplate.  To try it out, run `npm start`.  It will start the Webpack development server and open the application in your browser.  You should see a heading that says `Zeal React Boilerplate Test`.  If you look in the browser's console, you should see a message indicating that Hot Module Replacement is enabled.

The boilerplate is structured in modules, as described in [Rules For Structuring (Redux) Applications](http://jaysoo.ca/2016/02/28/organizing-redux-application/). The `sample` module can be duplicated and modified for other features as needed.

### Cleaning Up the Starter App

Once you've got your front-end application embedded into your real back-end server, you'll want to clean out the starter app.  To do that:

* Delete `index.html`
* Delete `webpack/starterApp.js`
* Delete the `start` script line from `package.json`
* Change the contents of `client/modules/app/components/App/index.js` and the `client/modules/sample` module as appropriate for your application.

## Notes of Interest

* We include `flux-standard-action` to indicate that our intention is to use that format for our actions.  We don't currently import it anywhere, but if you're so inclined, you can use its `isFSA()` function to check your actions in tests or as a guard in the reducer returned from `createReducer()`.

* We use [husky](https://www.npmjs.com/package/husky) to provide a git pre-push hook that runs tests and linters before allowing a `git push`.  If you'd rather not have this, you can opt out of it permanently on your machine by creating a file named `.opt-out` with the line `prepush` in it.  See the [opt-cli](https://www.npmjs.com/package/opt-cli) package for more information.  If you want to temporarily skip the pre-push hook (for example, to push up a WIP commit), you can use `git push --no-verify` to skip the hook for that single push.

## ESLINT Configuration

Included in `package.json` are [eslint](https://github.com/eslint/eslint) and supporting modules.  Included is also Zeal's eslint configuration as a dependency; [eslint-config-zeal](https://github.com/CodingZeal/eslint-config-zeal).  The various build and dev scripts will use these configurations including of course the `lint` script.  It is also recommended that if you are using an editor or IDE that supports lint plugins that you install those plugins for the benefit of realtime linting.  For the Atom editor please see the [linter](https://atom.io/packages/linter) and [linter-eslint](https://atom.io/packages/linter-eslint) plugins.

## Recipes

These are recipes for common things you might want to do, but that we don't really want in our standard boilerplate.

### Using jQuery

With React, jQuery is almost never necessary, so think twice before deciding to include it.

However, sometimes we want to wrap a third-party component that uses jQuery.  In that case, we don't have much choice, so here's how to include jQuery and make it globally available.

- In [webpack/base.js](webpack/base.js), change:
```javascript
{'fraction_non_alphanumeric': 0.072992700729927, 'fraction_numerical': 0.009155016701719658, 'mean_word_length': 4.598337950138504, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 14, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2576062', 'n_tokens_mistral': 2291, 'n_tokens_neox': 2119, 'n_words': 1076}