diff --git a/.eslintrc.js b/.eslintrc.js index d5f44b0b5..3efc19186 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -21,7 +21,7 @@ module.exports = { 'prettier/react', ], - plugins: ['flowtype', 'css-modules', 'prettier'], + plugins: ['flowtype', 'css-modules', 'prettier', 'jest'], globals: { __DEV__: true, @@ -29,6 +29,7 @@ module.exports = { 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 new file mode 100644 index 000000000..ec6d3cdd7 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +package.json diff --git a/.travis.yml b/.travis.yml index 89f8b988f..6105d4a58 100644 --- 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 index 8cb72826b..d6803765d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ 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) @@ -34,6 +35,7 @@ All notable changes to this project will be documented in this file. - 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 index aab3a8774..24e66a167 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -33,10 +33,10 @@ 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 @@ -44,12 +44,12 @@ Before opening an issue, please: 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 index 5f1f823cc..d8f277125 100644 --- 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 index 11f6722da..7e33bc201 100644 --- a/README.md +++ b/README.md @@ -21,29 +21,29 @@ and newcomers to the industry. Hiring

- ### 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) @@ -51,7 +51,6 @@ If you think that any of these features should be on `master`, or vice versa, so removed from the `master` branch, please [let us know](https://gitter.im/kriasoft/react-starter-kit). We love your feedback! - ### Comparison @@ -149,7 +148,6 @@ We love your feedback!
- ### 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 - ### 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 b/babel.config.js similarity index 84% rename from .babelrc.js rename to babel.config.js index afe37b061..fdbbc882a 100644 --- a/.babelrc.js +++ b/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 index 99f478a28..b261f203b 100644 --- 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 index 1ce808b16..cdb0eb9e5 100644 --- 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 ( +
+ ... + { + 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 +
+ ); } ``` #### 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 index b1a86d22c..a461a1d44 100644 --- 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. diff --git a/docs/how-to-configure-text-editors.md b/docs/how-to-configure-text-editors.md index 21d536b7a..786dc041d 100644 --- a/docs/how-to-configure-text-editors.md +++ b/docs/how-to-configure-text-editors.md @@ -32,10 +32,10 @@ Enable **CSSComb** by following the instructions Install atom packages -* [linter](https://atom.io/packages/linter) -* [linter-eslint](https://atom.io/packages/linter-eslint) -* [linter-stylelint](https://atom.io/packages/linter-stylelint) -* [react](https://atom.io/packages/react) +- [linter](https://atom.io/packages/linter) +- [linter-eslint](https://atom.io/packages/linter-eslint) +- [linter-stylelint](https://atom.io/packages/linter-stylelint) +- [react](https://atom.io/packages/react) ```shell apm install linter linter-eslint react linter-stylelint @@ -43,10 +43,10 @@ apm install linter linter-eslint react linter-stylelint Install local npm packages -* [eslint](https://www.npmjs.com/package/eslint) -* [babel-eslint](https://www.npmjs.com/package/babel-eslint) -* [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) -* [stylelint](https://www.npmjs.com/package/stylelint) +- [eslint](https://www.npmjs.com/package/eslint) +- [babel-eslint](https://www.npmjs.com/package/babel-eslint) +- [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) +- [stylelint](https://www.npmjs.com/package/stylelint) ```shell yarn add --dev eslint babel-eslint eslint-plugin-react stylelint @@ -60,10 +60,10 @@ Install SublimeText packages\ Easiest with [Package Control](https://packagecontrol.io/) and then "Package Control: Install Package" (Ctrl+Shift+P) -* [Babel](https://packagecontrol.io/packages/Babel) -* [Sublime-linter](http://www.sublimelinter.com/en/latest/) -* [SublimeLinter-contrib-eslint](https://packagecontrol.io/packages/SublimeLinter-contrib-eslint) -* [SublimeLinter-contrib-stylelint](https://packagecontrol.io/packages/SublimeLinter-contrib-stylelint) +- [Babel](https://packagecontrol.io/packages/Babel) +- [Sublime-linter](http://www.sublimelinter.com/en/latest/) +- [SublimeLinter-contrib-eslint](https://packagecontrol.io/packages/SublimeLinter-contrib-eslint) +- [SublimeLinter-contrib-stylelint](https://packagecontrol.io/packages/SublimeLinter-contrib-stylelint) You can also use [SublimeLinter-contrib-eslint_d](https://packagecontrol.io/packages/SublimeLinter-contrib-eslint_d) @@ -71,11 +71,11 @@ for faster linting. Set Babel as default syntax for a particular extension: -* Open a file with that extension, -* Select `View` from the menu, -* Then `Syntax` `->` `Open all with current extension as...` `->` `Babel` `->` +- Open a file with that extension, +- Select `View` from the menu, +- Then `Syntax` `->` `Open all with current extension as...` `->` `Babel` `->` `JavaScript (Babel)`. -* Repeat this for each extension (e.g.: .js and .jsx). +- Repeat this for each extension (e.g.: .js and .jsx). Install local npm packages diff --git a/docs/react-style-guide.md b/docs/react-style-guide.md index 280641a66..c4d71fe53 100644 --- a/docs/react-style-guide.md +++ b/docs/react-style-guide.md @@ -6,21 +6,21 @@ ### Table of Contents -* [Separate folder per UI component](#separate-folder-per-ui-component) -* [Prefer using functional components](#prefer-using-functional-components) -* [Use CSS Modules](#use-css-modules) -* [Use higher-order components](#use-higher-order-components) +- [Separate folder per UI component](#separate-folder-per-ui-component) +- [Prefer using functional components](#prefer-using-functional-components) +- [Use CSS Modules](#use-css-modules) +- [Use higher-order components](#use-higher-order-components) ### Separate folder per UI component -* Place each major UI component along with its resources in a separate folder\ +- Place each major UI component along with its resources in a separate folder\ This will make it easier to find related resources for any particular UI element (CSS, images, unit tests, localization files etc.). Removing such components during refactorings should also be easy. -* Avoid having CSS, images and other resource files shared between multiple +- Avoid having CSS, images and other resource files shared between multiple components.\ This will make your code more maintainable, easy to refactor. -* Add `package.json` file into each component's folder.\ +- Add `package.json` file into each component's folder.\ This will allow to easily reference such components from other places in your code.\ Use `import Nav from '../Navigation'` instead of `import Nav from '../Navigation/Navigation.js'` @@ -46,7 +46,7 @@ For more information google for ### Prefer using functional components -* Prefer using stateless functional components whenever possible.\ +- Prefer using stateless functional components whenever possible.\ Components that don't use state are better to be written as simple pure functions. ```jsx @@ -69,16 +69,16 @@ Navigation.propTypes = { items: PropTypes.array.isRequired }; ### Use CSS Modules -* Use CSS Modules\ +- Use CSS Modules\ This will allow using short CSS class names and at the same time avoid conflicts. -* Keep CSS simple and declarative. Avoid loops, mixins etc. -* Feel free to use variables in CSS via +- Keep CSS simple and declarative. Avoid loops, mixins etc. +- Feel free to use variables in CSS via [precss](https://github.com/jonathantneal/precss) plugin for [PostCSS](https://github.com/postcss/postcss) -* Prefer CSS class selectors instead of element and `id` selectors (see +- Prefer CSS class selectors instead of element and `id` selectors (see [BEM](https://bem.info/)) -* Avoid nested CSS selectors (see [BEM](https://bem.info/)) -* When in doubt, use `.root { }` class name for the root elements of your +- Avoid nested CSS selectors (see [BEM](https://bem.info/)) +- When in doubt, use `.root { }` class name for the root elements of your components ```scss @@ -127,10 +127,11 @@ Navigation.propTypes = { items: PropTypes.array.isRequired }; // Navigation.js import React from 'react'; import PropTypes from 'prop-types'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import useStyles from 'isomorphic-style-loader/useStyles'; import s from './Navigation.scss'; -function Navigation() { +export default function Navigation() { + useStyles(s); return (