kriasoft · malmax · Apr 16, 2016 · Apr 16, 2016 · Apr 18, 2016 · Apr 21, 2016
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,14 +21,15 @@ module.exports = {
     'prettier/react',
   ],
 
-  plugins: ['flowtype', 'css-modules', 'prettier'],
+  plugins: ['flowtype', 'css-modules', 'prettier', 'jest'],
 
   globals: {
     __DEV__: true,
   },
 
   env: {
     browser: true,
+    jest: true,
   },
 
   rules: {
@@ -87,6 +88,9 @@ module.exports = {
     // ESLint plugin for prettier formatting
     // https://github.com/prettier/eslint-plugin-prettier
     'prettier/prettier': 'error',
+
+    'react/forbid-prop-types': 'off',
+    'react/destructuring-assignment': 'off',
   },
 
   settings: {

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+package.json
diff --git a/.travis.yml b/.travis.yml
@@ -1,8 +1,9 @@
 language: node_js
 node_js:
   - 'stable'
+  - '12'
+  - '10'
   - '8'
-  - '6'
 env:
   - CXX=g++-4.8
 addons:
@@ -11,6 +12,7 @@ addons:
       - ubuntu-toolchain-r-test
     packages:
       - g++-4.8
+cache: yarn
 script:
   - yarn lint
   - yarn test

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,13 +27,15 @@ All notable changes to this project will be documented in this file.
 - Move page / screen components into the `src/routes` folder along with the routing information for them (BREAKING CHANGE). [6553936](https://github.com/kriasoft/react-starter-kit/commit/6553936e693e24a8ac6178f4962af15e0ea87dfd)
 
 ### [v0.5.1]
+
 > 2016-03-02
 
 - Remove `Html` React component in favor of compiled Jade templates (`src/views`) (BREAKING CHANGE). [e188388](https://github.com/kriasoft/react-starter-kit/commit/e188388f87069cdc7d501b385d6b0e46c98fed60)
 - Add global error handling in Node.js/Express app. [e188388](https://github.com/kriasoft/react-starter-kit/commit/e188388f87069cdc7d501b385d6b0e46c98fed60)
 - Add support for Markdown and HTML for static pages. [#469](https://github.com/kriasoft/react-starter-kit/pull/469), [#477](https://github.com/kriasoft/react-starter-kit/pull/477)
 
 ### [v0.5.0]
+
 > 2016-02-27
 
 - Replace RESTful API endpoint (`src/api`) with GraphQL (`src/data`)
@@ -54,6 +56,7 @@ All notable changes to this project will be documented in this file.
 - Add `CHANGELOG.md` file with a list of notable changes to this project
 
 ### [v0.4.1]
+
 > 2015-10-04
 
 - Replace React Hot Loader (deprecated) with React Transform

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -33,23 +33,23 @@ files right from GitHub website as described [here](https://help.github.com/arti
 
 Before opening an issue, please:
 
-* Check the [Getting Started](https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md) guide.
-* Search the [issue tracker](https://github.com/kriasoft/react-starter-kit/issues) to make sure
+- Check the [Getting Started](https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md) guide.
+- Search the [issue tracker](https://github.com/kriasoft/react-starter-kit/issues) to make sure
   your issue hasn’t already been reported.
-* If your issue sounds more like a question, please post it on StackOverflow.com instead with the
+- If your issue sounds more like a question, please post it on StackOverflow.com instead with the
   tag [react-starter-kit](http://stackoverflow.com/questions/tagged/react-starter-kit).
 
 ### Pull Requests
 
 Before you submit a [pull request](https://help.github.com/articles/using-pull-requests/) from your
 forked repo, check that it meets these guidelines:
 
-* If the pull request adds functionality, the docs should be updated as part of the same PR.
-* Create a separate PR for each small feature or bug fix.
-* [Squash](http://stackoverflow.com/questions/5189560/squash-my-last-x-commits-together-using-git)
+- If the pull request adds functionality, the docs should be updated as part of the same PR.
+- Create a separate PR for each small feature or bug fix.
+- [Squash](http://stackoverflow.com/questions/5189560/squash-my-last-x-commits-together-using-git)
   your commits into one for each PR.
-* Run `yarn test` to make sure that your code style is OK and there are no any regression bugs.
-* When contributing to an opt-in feature, apply the `[feature/...]` tag as a prefix to your PR title
+- Run `yarn test` to make sure that your code style is OK and there are no any regression bugs.
+- When contributing to an opt-in feature, apply the `[feature/...]` tag as a prefix to your PR title
 
 #### Style Guide
 

diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:8.10.0-alpine
+FROM node:8.16.2-alpine
 
 # Set a working directory
 WORKDIR /usr/src/app
@@ -12,7 +12,14 @@ RUN yarn install --production --no-progress
 # Copy application files
 COPY ./build .
 
+# Set permissions for "node" user
+RUN chown -R node:node /usr/src/app
+RUN chmod 755 /usr/src/app
+
 # Run the container under "node" user by default
 USER node
 
+# Set NODE_ENV env variable to "production" for faster expressjs
+ENV NODE_ENV production
+
 CMD [ "node", "server.js" ]
diff --git a/README.md b/README.md
@@ -21,37 +21,36 @@ and newcomers to the industry.
   <sup><a href="https://x-team.com/join/?utm_source=reactstarterkit&utm_medium=github-link&utm_campaign=reactstarterkit-june">Hiring</a></sup>
 </p>
 
-
 ### Getting Started
 
-  * Follow the [getting started guide](./docs/getting-started.md) to download and run the project
-    ([Node.js](https://nodejs.org/) >= 6.5)
-  * Check the [code recipes](./docs/recipes) used in this boilerplate, or share yours
-
+- Follow the [getting started guide](./docs/getting-started.md) to download and run the project
+  ([Node.js](https://nodejs.org/) >= 8.16.2)
+- Check the [code recipes](./docs/recipes) used in this boilerplate, or share yours
 
 ### Customization
 
 The `master` branch of React Starter Kit doesn't include a Flux implementation or any other
-advanced integrations. Nevertheless, we have some integrations available to you in *feature*
+advanced integrations. Nevertheless, we have some integrations available to you in _feature_
 branches that you can use either as a reference or merge into your project:
 
-  * [feature/redux](https://github.com/kriasoft/react-starter-kit/tree/feature/redux) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1084))
-    — isomorphic Redux by [Pavel Lang](https://github.com/langpavel)
-    (see [how to integrate Redux](./docs/recipes/how-to-integrate-redux.md)) (based on `master`)
-  * [feature/apollo](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1147))
-    — isomorphic Apollo Client by [Pavel Lang](https://github.com/langpavel)
-    (see [Tracking PR #1147](https://github.com/kriasoft/react-starter-kit/pull/1147)) (based on `feature/redux`)
-  * [feature/react-intl](https://github.com/kriasoft/react-starter-kit/tree/feature/react-intl) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1135))
-    — isomorphic Redux and React Intl by [Pavel Lang](https://github.com/langpavel)
-    (see [how to integrate React Intl](./docs/recipes/how-to-integrate-react-intl.md)) (based on `feature/apollo`)
+- [feature/redux](https://github.com/kriasoft/react-starter-kit/tree/feature/redux) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1084))
+  — isomorphic Redux by [Pavel Lang](https://github.com/langpavel)
+  (see [how to integrate Redux](./docs/recipes/how-to-integrate-redux.md)) (based on `master`)
+- [feature/apollo](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1147))
+  — isomorphic Apollo Client by [Pavel Lang](https://github.com/langpavel)
+  (see [Tracking PR #1147](https://github.com/kriasoft/react-starter-kit/pull/1147)) (based on `feature/redux`)
+- [feature/react-intl](https://github.com/kriasoft/react-starter-kit/tree/feature/react-intl) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1135))
+  — isomorphic Redux and React Intl by [Pavel Lang](https://github.com/langpavel)
+  (see [how to integrate React Intl](./docs/recipes/how-to-integrate-react-intl.md)) (based on `feature/apollo`)
+- [feature/apollo-pure](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo-pure) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1666))
+  — Apollo devtools and TypeScript integration by [piglovesyou](https://github.com/piglovesyou) (based on `master`)
 
 You can see status of most reasonable merge combination as [PRs labeled as `TRACKING`](https://github.com/kriasoft/react-starter-kit/labels/TRACKING)
 
 If you think that any of these features should be on `master`, or vice versa, some features should
 removed from the `master` branch, please [let us know](https://gitter.im/kriasoft/react-starter-kit).
 We love your feedback!
 
-
 ### Comparison
 
 <table width="100%">
@@ -149,7 +148,6 @@ We love your feedback!
   </tr>
 </table>
 
-
 ### Backers
 
 ♥ React Starter Kit? Help us keep it alive by donating funds to cover project
@@ -178,45 +176,40 @@ expenses via [OpenCollective](https://opencollective.com/react-starter-kit) or
   <img src="https://opencollective.com/static/images/become_backer.svg" width="64" height="64" alt="">
 </a>
 
-
 ### How to Contribute
 
 Anyone and everyone is welcome to [contribute](CONTRIBUTING.md) to this project. The best way to
 start is by checking our [open issues](https://github.com/kriasoft/react-starter-kit/issues),
-[submit a new issues](https://github.com/kriasoft/react-starter-kit/issues/new?labels=bug) or
+[submit a new issue](https://github.com/kriasoft/react-starter-kit/issues/new?labels=bug) or
 [feature request](https://github.com/kriasoft/react-starter-kit/issues/new?labels=enhancement),
 participate in discussions, upvote or downvote the issues you like or dislike, send [pull
 requests](CONTRIBUTING.md#pull-requests).
 
-
 ### Learn More
 
-  * [Getting Started with React.js](http://facebook.github.io/react/)
-  * [Getting Started with GraphQL and Relay](https://quip.com/oLxzA1gTsJsE)
-  * [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
-  * [React.js Discussion Board](https://discuss.reactjs.org/)
-  * [Flux Architecture for Building User Interfaces](http://facebook.github.io/flux/)
-  * [Enzyme — JavaScript Testing utilities for React](http://airbnb.io/enzyme/)
-  * [Flow — A static type checker for JavaScript](http://flowtype.org/)
-  * [The Future of React](https://github.com/reactjs/react-future)
-  * [Learn ES6](https://babeljs.io/docs/learn-es6/), [ES6 Features](https://github.com/lukehoban/es6features#readme)
-
+- [Getting Started with React.js](http://facebook.github.io/react/)
+- [Getting Started with GraphQL and Relay](https://quip.com/oLxzA1gTsJsE)
+- [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
+- [React.js Discussion Board](https://discuss.reactjs.org/)
+- [Flux Architecture for Building User Interfaces](http://facebook.github.io/flux/)
+- [Enzyme — JavaScript Testing utilities for React](http://airbnb.io/enzyme/)
+- [Flow — A static type checker for JavaScript](http://flowtype.org/)
+- [The Future of React](https://github.com/reactjs/react-future)
+- [Learn ES6](https://babeljs.io/docs/learn-es6/), [ES6 Features](https://github.com/lukehoban/es6features#readme)
 
 ### Related Projects
 
-  * [GraphQL Starter Kit](https://github.com/kriasoft/graphql-starter-kit) — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
-  * [Membership Database](https://github.com/membership/membership.db) — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
-  * [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — Boilerplate for authoring JavaScript/React.js libraries
-
+- [GraphQL Starter Kit](https://github.com/kriasoft/graphql-starter-kit) — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
+- [Membership Database](https://github.com/membership/membership.db) — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
+- [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — Boilerplate for authoring JavaScript/React.js libraries
 
 ### Support
 
-  * [#react-starter-kit](http://stackoverflow.com/questions/tagged/react-starter-kit) on Stack Overflow — Questions and answers
-  * [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit) on Gitter — Watch announcements, share ideas and feedback
-  * [GitHub issues](https://github.com/kriasoft/react-starter-kit/issues), or [Scrum board](https://waffle.io/kriasoft/react-starter-kit) — File issues, send feature requests
-  * [appear.in/react](https://appear.in/react) — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects)
-  * [@koistya](https://twitter.com/koistya) on [Codementor](https://www.codementor.io/koistya), or [Skype](http://hatscripts.com/addskype?koistya) — Private consulting
-
+- [#react-starter-kit](http://stackoverflow.com/questions/tagged/react-starter-kit) on Stack Overflow — Questions and answers
+- [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit) on Gitter — Watch announcements, share ideas and feedback
+- [GitHub issues](https://github.com/kriasoft/react-starter-kit/issues), or [Scrum board](https://waffle.io/kriasoft/react-starter-kit) — File issues, send feature requests
+- [appear.in/react](https://appear.in/react) — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects)
+- [@koistya](https://twitter.com/koistya) on [Codementor](https://www.codementor.io/koistya), or [Skype](http://hatscripts.com/addskype?koistya) — Private consulting
 
 ### License
 
@@ -226,6 +219,7 @@ file. The documentation to the project is licensed under the
 [CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/) license.
 
 ---
+
 Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya)) and [contributors](https://github.com/kriasoft/react-starter-kit/graphs/contributors)
 
 [rsk]: https://www.reactstarterkit.com

diff --git a/.babelrc.js → babel.config.js b/.babelrc.js → babel.config.js
@@ -19,9 +19,12 @@ module.exports = {
         },
       },
     ],
-    '@babel/preset-stage-2',
     '@babel/preset-flow',
     '@babel/preset-react',
   ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-syntax-dynamic-import',
+  ],
   ignore: ['node_modules', 'build'],
 };
diff --git a/docs/README.md b/docs/README.md
@@ -2,22 +2,22 @@
 
 ### General
 
-* [Getting Started](./getting-started.md)
-* [React Style Guide](./react-style-guide.md)
-* [How to configure text editors and IDEs](./how-to-configure-text-editors.md)
-* [Data fetching with WHATWG Fetch](./data-fetching.md)
-* [Testing your application](./testing-your-application.md)
+- [Getting Started](./getting-started.md)
+- [React Style Guide](./react-style-guide.md)
+- [How to configure text editors and IDEs](./how-to-configure-text-editors.md)
+- [Data fetching with WHATWG Fetch](./data-fetching.md)
+- [Testing your application](./testing-your-application.md)
 
 ### Questions
 
-* [Which module bundler should I use?](https://github.com/kriasoft/react-starter-kit/issues/3)
-* [Which Flux implementation should I use?](https://github.com/kriasoft/react-starter-kit/issues/22)
+- [Which module bundler should I use?](https://github.com/kriasoft/react-starter-kit/issues/3)
+- [Which Flux implementation should I use?](https://github.com/kriasoft/react-starter-kit/issues/22)
 
 ### Recipes
 
-* [How to Implement Routing and Navigation](./recipes/how-to-implement-routing.md)
-* [How to Integrate Redux](./recipes/how-to-integrate-redux.md)
-* [How to Integrate React Intl](./recipes/how-to-integrate-react-intl.md)
-* [How to Integrate Disqus](./recipes/how-to-integrate-disqus.md)
-* [How to Use Sass/SCSS](./recipes/how-to-use-sass.md)
-* [How to Configure Facebook Login](./recipes/how-to-configure-facebook-login.md)
+- [How to Implement Routing and Navigation](./recipes/how-to-implement-routing.md)
+- [How to Integrate Redux](./recipes/how-to-integrate-redux.md)
+- [How to Integrate React Intl](./recipes/how-to-integrate-react-intl.md)
+- [How to Integrate Disqus](./recipes/how-to-integrate-disqus.md)
+- [How to Use Sass/SCSS](./recipes/how-to-use-sass.md)
+- [How to Configure Facebook Login](./recipes/how-to-configure-facebook-login.md)
diff --git a/docs/data-fetching.md b/docs/data-fetching.md
@@ -41,20 +41,28 @@ React components as follows:
 #### React Component
 
 ```js
-class Post extends React.Component {
-  static contextTypes = { fetch: PropTypes.func.isRequired };
-  handleDelete = (event) => {
-    event.preventDefault();
-    const id = event.target.dataset['id'];
-    this.context.fetch(`/api/posts/${id}`, { method: 'DELETE' }).then(...);
-  };
-  render() { ... }
+import {useContext} from 'react';
+import ApplicationContext from '../ApplicationContext';
+
+function Post() {
+  const {context} = useContext(ApplicationContext);
+  return (
+    <div>
+      ...
+      <a onClick={(event) => {
+        event.preventDefault();
+        const id = event.target.dataset['id'];
+        // Use context.fetch to make it work in both server-side and client-side
+        context.fetch(`/api/posts/${id}`, { method: 'DELETE' }).then(...);
+      }}>Delete</a>
+    </div>
+  );
 }
 ```
 
 #### Related articles
 
-* [That's so fetch!](https://jakearchibald.com/2015/thats-so-fetch/) by
+- [That's so fetch!](https://jakearchibald.com/2015/thats-so-fetch/) by
   [Jake Archibald](https://twitter.com/jaffathecake)
 
 [fetch]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -2,10 +2,10 @@
 
 ### Requirements
 
-* Mac OS X, Windows, or Linux
-* [Yarn](https://yarnpkg.com/) package + [Node.js](https://nodejs.org/) v6.5 or
+- Mac OS X, Windows, or Linux
+- [Yarn](https://yarnpkg.com/) package + [Node.js](https://nodejs.org/) v8.16.2 or
   newer
-* Text editor or IDE pre-configured with React/JSX/Flow/ESlint
+- Text editor or IDE pre-configured with React/JSX/Flow/ESlint
   ([learn more](./how-to-configure-text-editors.md))
 
 ### Directory Layout
@@ -99,7 +99,7 @@ compiled output files are not optimized and minimized in this case. You can use
 (production) mode:
 
 ```shell
-$ yarn start -- --release
+$ yarn start --release
 ```
 
 _NOTE: double dashes are required_
@@ -115,13 +115,13 @@ $ yarn run build
 or, for a production build:
 
 ```shell
-$ yarn run build -- --release
+$ yarn run build --release
 ```
 
 or, for a production docker build:
 
 ```shell
-$ yarn run build -- --release --docker
+$ yarn run build --release --docker
 ```
 
 _NOTE: double dashes are required_
@@ -139,11 +139,11 @@ $ yarn run lint
 To launch unit tests:
 
 ```shell
-$ yarn run test          # Run unit tests with Mocha
-$ yarn run test:watch    # Launch unit test runner and start watching for changes
+$ yarn run test          # Run unit tests with Jest
+$ yarn run test-watch    # Launch unit test runner and start watching for changes
 ```
 
-By default, [Mocha](https://mochajs.org/) test runner is looking for test files
+By default, [Jest](https://jestjs.io/) test runner is looking for test files
 matching the `src/**/*.test.js` pattern. Take a look at
 `src/components/Layout/Layout.test.js` as an example.