Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgraded react, react-dom and isomorphic-style-loader. #1715

Closed
wants to merge 15 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 32 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,39 +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
- Follow the [getting started guide](./docs/getting-started.md) to download and run the project
([Node.js](https://nodejs.org/) >= 6.9)
* Check the [code recipes](./docs/recipes) used in this boilerplate, or share yours

- 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/apollo-pure](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo-pure) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1664))
— bare Apollo codebase by [piglovesyou](https://github.com/piglovesyou) (based on `master`)
- [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/1664))
— bare Apollo codebase 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%">
Expand Down Expand Up @@ -151,7 +148,6 @@ We love your feedback!
</tr>
</table>


### Backers

♥ React Starter Kit? Help us keep it alive by donating funds to cover project
Expand Down Expand Up @@ -180,7 +176,6 @@ 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
Expand All @@ -190,35 +185,31 @@ start is by checking our [open issues](https://github.com/kriasoft/react-starter
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

Expand All @@ -228,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
Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

### Requirements

* Mac OS X, Windows, or Linux
* [Yarn](https://yarnpkg.com/) package + [Node.js](https://nodejs.org/) v6.9 or
- Mac OS X, Windows, or Linux
- [Yarn](https://yarnpkg.com/) package + [Node.js](https://nodejs.org/) v6.9 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
Expand Down
32 changes: 16 additions & 16 deletions docs/react-style-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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'`

Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -127,7 +127,7 @@ 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 withStyles from 'isomorphic-style-loader/withStyles';
import s from './Navigation.scss';

function Navigation() {
Expand Down Expand Up @@ -156,7 +156,7 @@ export default withStyles(Navigation, s);

### Use higher-order components

* Use higher-order components (HOC) to extend existing React components.\
- Use higher-order components (HOC) to extend existing React components.\
Here is an example:

```js
Expand Down
Loading