switch to create-react-app

Author: Eric Simons

Notes

@@ -15,7 +15,7 @@ To get the frontend running locally:
 
 - Clone this repo
 - `npm install` to install all req'd dependencies
-- `npm run watch` to have webpack bundle the JS files into /bin/main.js, then run `npm start`
+- `npm start` to start the local server (this project uses create-react-app)
 
 For convenience, we have a live API server running at https://conduit.productionready.io/api for the application to make requests against. You can view [the API spec here](https://github.com/GoThinkster/productionready/blob/master/API.md) which contains all routes & responses for the server. We'll release the backend code in a few weeks should anyone be interested in it.
 
@@ -57,7 +57,7 @@ The example application is a social blogging site (i.e. a Medium.com clone) call
 
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 
-Below you will find some information on how to perform common tasks.  
+Below you will find some information on how to perform common tasks.
 You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
 
 ## Table of Contents
@@ -156,13 +156,13 @@ For the project to build, **these files must exist with exact filenames**:
 
 You can delete or rename the other files.
 
-You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.  
+You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.
 You need to **put any JS and CSS files inside `src`**, or Webpack won’t see them.
 
-Only files inside `public` can be used from `public/index.html`.  
+Only files inside `public` can be used from `public/index.html`.
 Read instructions below for using assets from JavaScript and HTML.
 
-You can, however, create more top-level directories.  
+You can, however, create more top-level directories.
 They will not be included in the production build so you can use them for things like documentation.
 
 ## Available Scripts
@@ -179,7 +179,7 @@ You will also see any lint errors in the console.
 
 ### `npm test`
 
-Launches the test runner in the interactive watch mode.  
+Launches the test runner in the interactive watch mode.
 See the section about [running tests](#running-tests) for more information.
 
 ### `npm run build`
@@ -245,7 +245,7 @@ npm install --save <library-name>
 
 ## Importing a Component
 
-This project setup supports ES6 modules thanks to Babel.  
+This project setup supports ES6 modules thanks to Babel.
 While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead.
 
 For example:
@@ -393,7 +393,7 @@ Webpack finds all relative module references in CSS (they start with `./`) and r
 
 Please be advised that this is also a custom feature of Webpack.
 
-**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).  
+**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
 An alternative way of handling static assets is described in the next section.
 
 ## Using the `public` Folder
@@ -418,7 +418,7 @@ Inside `index.html`, you can use it like this:
 
 Only files inside the `public` folder will be accessible by `%PUBLIC_URL%` prefix. If you need to use a file from `src` or `node_modules`, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build.
 
-When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL. 
+When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL.
 
 In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes:
 
@@ -573,22 +573,22 @@ To define permanent environment vairables, create a file called `.env` in the ro
 REACT_APP_SECRET_CODE=abcdef
 ```
 
-These variables will act as the defaults if the machine does not explicitly set them.  
+These variables will act as the defaults if the machine does not explicitly set them.
 Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.
 
 >Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
 these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).
 
 ## Can I Use Decorators?
 
-Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.  
+Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.
 Create React App doesn’t support decorator syntax at the moment because:
 
 * It is an experimental proposal and is subject to change.
 * The current specification version is not officially supported by Babel.
 * If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook.
 
-However in many cases you can rewrite decorator-based code without decorators just as fine.  
+However in many cases you can rewrite decorator-based code without decorators just as fine.
 Please refer to these two threads for reference:
 
 * [#214](https://github.com/facebookincubator/create-react-app/issues/214)
@@ -604,7 +604,7 @@ Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-r
 
 >Note: this feature is available with `[email protected]` and higher.
 
-People often serve the front-end React app from the same host and port as their backend implementation.  
+People often serve the front-end React app from the same host and port as their backend implementation.
 For example, a production setup might look like this after the app is deployed:
 
 ```
@@ -631,7 +631,7 @@ Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-
 
 Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request without a `text/html` accept header will be redirected to the specified `proxy`.
 
-Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections.  
+Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections.
 If the `proxy` option is **not** flexible enough for you, alternatively you can:
 
 * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
@@ -679,7 +679,7 @@ If you use a Node server, you can even share the route matching logic between th
 
 ## Running Tests
 
->Note: this feature is available with `[email protected]` and higher.  
+>Note: this feature is available with `[email protected]` and higher.
 >[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030)
 
 Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try.
@@ -733,7 +733,7 @@ it('sums numbers', () => {
 });
 ```
 
-All `expect()` matchers supported by Jest are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value).  
+All `expect()` matchers supported by Jest are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value).
 You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](http://facebook.github.io/jest/docs/api.html#tobecalled) to create “spies” or mock functions.
 
 ### Testing Components
@@ -792,7 +792,7 @@ it('renders welcome message', () => {
 });
 ```
 
-All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value).  
+All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value).
 Nevertheless you can use a third-party assertion library like Chai if you want to, as described below.
 
 ### Using Third Party Assertion Libraries
@@ -828,12 +828,12 @@ global.localStorage = localStorageMock
 
 ### Focusing and Excluding Tests
 
-You can replace `it()` with `xit()` to temporarily exclude a test from being executed.  
+You can replace `it()` with `xit()` to temporarily exclude a test from being executed.
 Similarly, `fit()` lets you focus on a specific test without running any other tests.
 
 ### Coverage Reporting
 
-Jest has an integrated coverage reporter that works well with ES6 and requires no configuration.  
+Jest has an integrated coverage reporter that works well with ES6 and requires no configuration.
 Run `npm test -- --coverage` (note extra `--` in the middle) to include a coverage report like this:
 
 ![coverage report](http://i.imgur.com/5bFhnTS.png)
@@ -894,7 +894,7 @@ By default, the `package.json` of the generated project looks like this:
   }
 ```
 
-If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster.  
+If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster.
 To help you make up your mind, here is a list of APIs that **need jsdom**:
 
 * Any browser globals like `window` and `document`
@@ -919,7 +919,7 @@ This feature is experimental and still [has major usage issues](https://github.c
 
 ## Building for Relative Paths
 
-By default, Create React App produces a build assuming your app is hosted at the server root.  
+By default, Create React App produces a build assuming your app is hosted at the server root.
 To override this, specify the `homepage` in your `package.json`, for example:
 
 ```js
@@ -938,7 +938,7 @@ Open your `package.json` and add a `homepage` field:
   "homepage": "http://myusername.github.io/my-app",
 ```
 
-**The above step is important!**  
+**The above step is important!**
 Create React App uses the `homepage` field to determine the root URL in the built HTML file.
 
 Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages:
@@ -961,7 +961,7 @@ Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` hi
 
 ### Heroku
 
-Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).  
+Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
 You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
 
 ### Modulus

README.md

@@ -13,6 +13,7 @@
     "react-redux": "^4.4.5",
     "react-router": "^2.8.1",
     "redux": "^3.6.0",
+    "redux-logger": "^2.7.4",
     "superagent": "^2.3.0",
     "superagent-promise": "^1.1.0"
   },

package.json

@@ -1,3 +1,5 @@
+'use strict';
+
 import superagentPromise from 'superagent-promise';
 import _superagent from 'superagent';
 

src/agent.js

@@ -1,9 +1,8 @@
+import agent from '../agent';
+import Header from './Header';
 import React from 'react';
 import { connect } from 'react-redux';
 
-import Header from './Header';
-import agent from '../agent';
-
 const mapStateToProps = state => ({
   appLoaded: state.common.appLoaded,
   appName: state.common.appName,

src/components/App.js

@@ -1,8 +1,7 @@
-import React from 'react';
-import { connect } from 'react-redux';
 import { Link } from 'react-router';
-
+import React from 'react';
 import agent from '../../agent';
+import { connect } from 'react-redux';
 
 const mapDispatchToProps = dispatch => ({
   onClickDelete: payload =>

src/components/Article/ArticleActions.js

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Link } from 'react-router';
-
 import ArticleActions from './ArticleActions';
+import { Link } from 'react-router';
+import React from 'react';
 
 const ArticleMeta = props => {
   const article = props.article;

src/components/Article/ArticleMeta.js

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Link } from 'react-router';
-
 import DeleteButton from './DeleteButton';
+import { Link } from 'react-router';
+import React from 'react';
 
 const Comment = props => {
   const comment = props.comment;

src/components/Article/Comment.js

@@ -1,8 +1,7 @@
-import React from 'react';
-import { Link } from 'react-router';
-
 import CommentInput from './CommentInput';
 import CommentList from './CommentList';
+import { Link } from 'react-router';
+import React from 'react';
 
 const CommentContainer = props => {
   if (props.currentUser) {

src/components/Article/CommentContainer.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { connect } from 'react-redux';
-
 import agent from '../../agent';
+import { connect } from 'react-redux';
 
 const mapDispatchToProps = dispatch => ({
   onSubmit: payload =>