Skip to content

Commit

Permalink
Replace usage of "ES6" with plain old "ES"
Browse files Browse the repository at this point in the history
  • Loading branch information
insin committed Jun 19, 2018
1 parent b7d07fe commit 9ea6b20
Show file tree
Hide file tree
Showing 12 changed files with 55 additions and 107 deletions.
1 change: 1 addition & 0 deletions CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
## Docs

- Added [instructions for debugging in VS Code](https://github.com/insin/nwb/blob/master/docs/FAQ.md#how-can-i-debug-using-vs-code-when-running-an-app-with-nwb) to the FAQ [[#445](https://github.com/insin/nwb/issues/445)]
- Replaced references to "ES6" with plain old "ES"

# 0.22.0 / 2018-03-13 (`next` release)

Expand Down
16 changes: 7 additions & 9 deletions docs/Commands.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ Creates a skeleton project for a JavaScript module for use on the web, ready for

> Passing all available options will automatically skip asking of setup questions.
- `--es-modules` - explicitly enable or disable (with `--no-es-modules`) an ES6 modules build
- `--es-modules` - explicitly enable or disable (with `--no-es-modules`) an ES modules build
- `--no-git` - disable creation of a Git repo with an initial commit
- `--umd=<var>` - enable a UMD build by providing a global variable name to be exported

Expand Down Expand Up @@ -243,11 +243,9 @@ You'll only pay the cost of including the compatibility layer in your bundle if

Builds for publishing to npm.

Passing an argument for `entry` allows you to customise the entry point for the UMD build of your app.

- An ES5 build will be created in `lib/`
- By default, an ES6 modules build will be created in `es/`
- If enabled, UMD builds will be created in `umd/`
- A build which uses CommonJS modules will be created in `lib/`
- By default, a build which uses ES modules will also be created in `es/`
- If enabled via configuration, UMD builds for global `<script>` tag usage will be created in `umd/`

**Feature Toggles:**

Expand All @@ -257,7 +255,7 @@ If the module has a `demo/` directory, running `build` will also create a static

#### `--[keep-]proptypes`

React components created as ES6 classes or functional components will have any `propTypes` they declare wrapped an `process.env.NODE_ENV !== 'production'` check, so they will be removed by dead-code elimination in the production build of any apps they're used in. You can disable this by passing a `--[keep-]proptypes` flag.
React components will have any `propTypes` they declare wrapped an `process.env.NODE_ENV !== 'production'` check, so they will be removed by dead-code elimination in the production build of any apps they're used in. You can disable this by passing a `--[keep-]proptypes` flag.

#### `--copy-files`

Expand Down Expand Up @@ -308,11 +306,11 @@ These are used in the `npm scripts` section of `package.json` in project skeleto

- `build-react-app [entry] [dist_dir]` - build a React app from `entry` *[default: `src/index.js`]* to `dist_dir` *[default: `dist/`]*

- `build-react-component [umd_entry]` - create an ES5 build, an ES6 modules build and, if configured, a UMD build - for a React component, starting from `umd_entry` *[default: `src/index.js`]* for the UMD build.
- `build-react-component` - create an ES5 build, an ES modules build and, if configured, a UMD build for a React component

- `build-web-app [entry] [dist_dir]` - build a web app from `entry` *[default: `src/index.js`]* to `dist_dir` *[default: `dist/`]*

- `build-web-module [umd_entry]` - create an ES5 build - and if configured, an ES6 modules build and a UMD build - for a browser-focused npm module, starting from `umd_entry` *[default: `src/index.js`]* for the UMD build.
- `build-web-module` - create an ES5 build, an ES modules build and, if configured, a UMD build for a browser-focused npm module

- `clean-app [dist_dir]` - delete `dist_dir` *[default: `dist/`]*

Expand Down
14 changes: 7 additions & 7 deletions docs/Configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ Additional [options for `babel-preset-env`](https://github.com/babel/babel-prese

##### `loose`: `Boolean`

Some Babel plugins have a [loose mode](http://www.2ality.com/2015/12/babel6-loose-mode.html) in which they output simpler, potentially faster code rather than following the semantics of the ES6 spec closely.
Some Babel plugins have a [loose mode](http://www.2ality.com/2015/12/babel6-loose-mode.html) in which they output simpler, potentially faster code rather than following the semantics of the ES spec closely.

**nwb enables loose mode by default**.

Expand Down Expand Up @@ -276,7 +276,7 @@ Set this to `false` to disable use of the [React constant element hoisting trans
Babel's [runtime transform](https://babeljs.io/docs/plugins/transform-runtime/) does 3 things by default:

1. Imports helper modules from `babel-runtime` instead of duplicating **helpers** in every module which needs them.
2. Imports a local **polyfill** for new ES6 built-ins (`Promise`) and static methods (e.g. `Object.assign`) when they're used in your code.
2. Imports a local **polyfill** for new ES built-ins (`Promise`) and static methods (e.g. `Object.assign`) when they're used in your code.
3. Imports the **regenerator** runtime required to use `async`/`await` when needed.

nwb's default config turns the regenerator runtime import on so you can use `async`/`await` and generators.
Expand Down Expand Up @@ -774,7 +774,7 @@ module.exports = {

Extra configuration to be merged into the generated Webpack configuration using [webpack-merge](https://github.com/survivejs/webpack-merge#webpack-merge---merge-designed-for-webpack) - see the [Webpack configuration docs](https://webpack.js.org/configuration/) for the available properties.

> **Note:** Webpack 2 validates the structure of the config it's given, so providing invalid or unexpected config will break the build.
> **Note:** Webpack validates the structure of the config it's given, so providing invalid or unexpected config will break the build.
e.g. to add an extra rule which isn't managed by nwb's own `webpack.rules` config, you would need to provide a list of rules at `webpack.extra.module.rules`.

Expand Down Expand Up @@ -1076,7 +1076,7 @@ module.exports = {

### npm Build Configuration

By default, nwb creates ES5 and ES6 modules builds for publishing to npm.
By default, nwb creates CommonJS and ES modules builds for publishing to npm.

#### `npm`: `Object`

Expand All @@ -1102,15 +1102,15 @@ module.exports = {

> Defaults to `true` if not provided.
Determines whether or not nwb will create an ES6 modules build for use by ES6 module bundlers when you run `nwb build` for a React component/library or web module project.
Determines whether or not nwb will create an ES modules build for use by bundlers when you run `nwb build` for a React component/library or web module project.

When providing an ES6 modules build, you should also provide the following in `package.json` so compatible module bundlers can find it:
When providing an ES modules build, you should also provide the following in `package.json` so compatible bundlers can find it:

```
"module": "es/index.js",
```

These are included automatically if you create a project with an ES6 modules build enabled.
These are included automatically if you create a project with an ES modules build enabled.

##### `umd`: `String | Object | false`

Expand Down
75 changes: 12 additions & 63 deletions docs/guides/ReactApps.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

nwb supports development of production-ready React apps.

> **Prerequisite:** nwb must be installed globally (we're using version 0.12 in this guide):
> **Prerequisite:** nwb must be installed globally (we're using version 0.22 in this guide):
>
> ```
> npm install -g nwb
Expand All @@ -14,8 +14,7 @@ nwb supports development of production-ready React apps.
- [Running the Development Server](#running-the-development-server)
- [Zero Configuration Development Setup](#zero-configuration-development-setup)
- [Thinking in React Components](#thinking-in-react-components)
- [Palatable ES6 Class Components](#palatable-es6-class-components)
- [Stateless Function Components](#stateless-function-components)
- [Palatable Class Components](#palatable-class-components)
- [Entry Point](#entry-point)
- [Testing](#testing)
- [Code Coverage Reporting](#code-coverage-reporting)
Expand All @@ -27,9 +26,9 @@ nwb supports development of production-ready React apps.
- [Auto Reload](#auto-reload)
- [Automatically Install Missing Dependencies](#automatically-install-missing-dependencies)
To walk you though the process, we're going to take the components from [the Thinking in React example](https://facebook.github.io/react/docs/thinking-in-react.html), split them out into individual modules, change some of their implementations to ES6 classes, perform some basic testing and create a production build, all using features nwb provides without any configuration.
To walk you though the process, we're going to take the components from [the Thinking in React example](https://reactjs.org/docs/thinking-in-react.html), split them out into individual modules, perform some basic testing and create a production build, all using features nwb provides without any configuration.
> This is a *how to use nwb* guide, not a *how to write React apps* guide; if you're new to React, you might want to walk through Thinking in React first, as it's one of the best ways to get a hands-on feel for developing React components and their data flow.
> This is a *how to use nwb* guide, not a *how to write React apps* guide; if you're new to React, you might want to walk through [Thinking in React](https://reactjs.org/docs/thinking-in-react.html) first, as it's one of the best ways to get a hands-on feel for developing React components and their data flow.
## Creating a New Project
Expand Down Expand Up @@ -137,18 +136,18 @@ Changes to stylesheets will also be hot-reloaded into the running app:

![](resources/react-serve-app-hmr-css.gif)

The development server will also serve the app's HTML entry file at non-root URLs, for use when developing apps which use the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) (e.g. with [React Router](https://github.com/reactjs/react-router)).
The development server will also serve the app's HTML entry file at non-root URLs, for use when developing apps which use the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) (e.g. with [React Router](https://github.com/ReactTraining/react-router)).

## Zero Configuration Development Setup

nwb generates a comprehensive default configuration for creating React apps using Babel and Webpack.

Without any configuration, the main features you get are:

- Write JavaScript with ES2015-ES2017 features and JSX, transpiled down to ES5.
- Write JavaScript with modern features and JSX, transpiled down to ES5.
- Use new JavaScript features which are at Stage 2 and above in the TC39 process:
- `async`/`await` syntax, for writing async code in a synchronous way.
- Class properties, for avoiding boilerplate when writing ES6 classes.
- Class properties, for avoiding boilerplate when writing classes.
- Decorators.
- Object rest/spread, for shallow cloning, merging and partially destructuring objects as syntax.
- Polyfills for `Promise`, `fetch` and `Object.assign`.
Expand All @@ -159,43 +158,17 @@ Without any configuration, the main features you get are:
## Thinking in React Components

We'll start by splitting each of the main components from [the final Thinking in React example code](https://facebook.github.io/react/docs/thinking-in-react.html#step-5-add-inverse-data-flow) into its own module, which is more representative of how a larger React project will be laid out.
We'll start by splitting each of the main components from [the final Thinking in React example code](https://reactjs.org/docs/thinking-in-react.html#step-5-add-inverse-data-flow) into its own module, which is more representative of how a larger React project will be laid out.

> A single module is perfectly fine for small apps, demos and examples!
- [`FilterableProductTable.js`](https://github.com/insin/nwb-thinking-in-react/blob/master/src/FilterableProductTable.js) holds filter state and composes the other components.
- [`SearchBar.js`](https://github.com/insin/nwb-thinking-in-react/blob/master/src/SearchBar.js) renders a `<form>` with the current filter state and passes changes back up to `FilterableProductTable`.
- [`ProductTable.js`](https://github.com/insin/nwb-thinking-in-react/blob/master/src/ProductTable.js) renders a `<table>` of products filtered according to the current filter state. This module also includes subcomponents used to implement the `ProductTable` component.

### Palatable ES6 Class Components
### Palatable Class Components

Thinking in React uses [`React.createClass()`](https://facebook.github.io/react/docs/top-level-api.html#react.createclass) to define its components.

This is arguably the least confusing way to start learning about React components as it auto-binds component methods to the component instance. This means you never have to worry about the value of `this` when using a component method as an event handler or other callback; it just works like you think it should.

For the sake of showing different ways to define components which are enabled by nwb's default configuration, the modules linked to above use [ES6 class components](https://facebook.github.io/react/docs/reusable-components.html#es6-classes) and [stateless function components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions).

For example, this is part of the `FilterableProductTable` component using `React.createClass()`:

```js
const FilterableProductTable = React.createClass({
getInitialState: function() {
return {
filterText: '',
inStockOnly: false,
}
},

handleUserInput(filterText, inStockOnly) {
this.setState({filterText, inStockOnly})
},

render() {
// ...same in all implementations
}
})
```
Written as a vanilla ES6 class, we would need to perform a `super()` call before we can set anything on `this`, and we'd need to [manually bind](https://facebook.github.io/react/docs/reusable-components.html#no-autobinding) the event handling method:
Written as a vanilla ES classes, React components need to call `super()` setting anything on `this`, and need to [manually bind event handlers in the constructor](https://reactjs.org/docs/react-component.html#constructor):

```js
class FilterableProductTable extends Component {
Expand All @@ -218,7 +191,7 @@ class FilterableProductTable extends Component {
}
```

Using experimental class property syntax avoids this constructor boilerplate - the `=` assignment statements in the class body are actually *moved into a generated constructor*, so the event handler arrow function inherits the constructor's `this`, which is roughly equivalent to what `React.createClass()` auto-binding was doing for us:
Using experimental class property syntax avoids this constructor boilerplate - `=` assignment statements in the class body are actually *moved into a generated constructor*, so the event handler arrow function inherits the constructor's `this`:

```js
class FilterableProductTable extends Component {
Expand All @@ -237,30 +210,6 @@ class FilterableProductTable extends Component {
}
```

> Class properties are *effectively* required to make writing React ES6 class components as palatable as `React.createClass()` components; nwb's default config leaves you free to create components whichever way you prefer.
### Stateless Function Components

This is the `ProductCategoryRow` component using `React.createClass()`:

```js
var ProductCategoryRow = React.createClass({
render() {
return <tr><th colSpan="2">{this.props.category}</th></tr>
}
})
```

And as a [stateless function component](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions):

```js
let ProductCategoryRow = ({category}) => <tr>
<th colSpan="2">{category}</th>
</tr>
```

> Stateless function components are a more convenient way to create React components which just manage a particular chunk of rendering based on given props.
## Entry Point

`src/index.js` is the entry point for the React app, which is usually responsible for "global" work prior to rendering the app:
Expand Down Expand Up @@ -391,7 +340,7 @@ Generated bundles have a deterministic hash in their filename to support long-te

The following React-specific optimisations are also performed as part of the build:

- If you're using ES6 class components or stateless function components for any of your app's own components, any `propTypes` they define will be stripped from the build, as React doesn't use PropTypes in production.
- Any `propTypes` defined on your app's class components or stateless function components will be stripped from the build, as PropTypes aren't checked in production.

## Using nwb in Your Own Express Server via Middleware

Expand Down
Loading

0 comments on commit 9ea6b20

Please sign in to comment.