Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukejacksonn/es-react
ES6 module exposing the latest version of react and react-dom
https://github.com/lukejacksonn/es-react
Last synced: 2 days ago
JSON representation
ES6 module exposing the latest version of react and react-dom
- Host: GitHub
- URL: https://github.com/lukejacksonn/es-react
- Owner: lukejacksonn
- Created: 2019-02-25T17:27:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T13:04:25.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T03:23:09.379Z (20 days ago)
- Language: JavaScript
- Homepage: https://codepen.io/lukejacksonn/pen/EMxVWM
- Size: 481 KB
- Stars: 231
- Watchers: 5
- Forks: 17
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-buildless - es-react
README
# es-react
> An ES6 module exposing the latest version of react, react-dom, react-is, and prop-types
Ever wanted to just import react into your project as a module **without** a build step or even script tags? Native browser support for module [imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) is [pretty good](https://caniuse.com/#feat=es6-module) so this should be an option for react developers now! Alas, there has not been an ES6 module compatible build released yet.
This package allows you import `react` and `react-dom` as ES6 modules from a CDN like [`unpkg`](https://unpkg.com):
```html
import { React, ReactDOM, PropTypes } from 'https://unpkg.com/es-react';
ReactDOM.render(
React.createElement('h1', {}, 'Hello from es-react'),
document.body
);
```
By default es-react exports the **production build** of react. For the **development build** use the `/dev` subfolder:
```js
import { React, ReactDOM } from 'https://unpkg.com/es-react/dev';
```
You may also import any members of the React package directly:
```js
import React, {
Component,
useState /* ... */,
} from 'https://unpkg.com/es-react';
```
And every package is also being provided as a separate file:
- `es-react/index.js`: Exports all of `React` and exports `{ React, ReactDOM, ReactIs, PropTypes }`
- `es-react/react.js`: Exports all of `React` plus a default export
- `es-react/react-dom.js`: Exports all of `ReactDOM` plus a default export (but not `react-dom/server`)
- `es-react/react-is.js`: Exports all of `ReactIs` plus a default export
- `es-react/prop-types.js`: Exports all of `PropTypes` plus a default export
- `es-react/react-dom-server.js`: Exports all of `ReactDOMServerBrowser` plus a default export
All development-versions of these packages are also available under `es-react/dev/`.
## Features
- All the latest React features (hooks, suspense, lazy, memo etc.)
- Use React directly from any javascript file (no build step required)
- Compatible with [`htm`](https://github.com/developit/htm) (for JSX compilation at runtime)
## Usage
Import `React` and `ReactDOM` directly from any script with `type="module"`. The package is intended to be available from [`unpkg`](https://unpkg.com) (without having to append `?module` to the package name).
```js
import { React, ReactDOM } from 'https://unpkg.com/[email protected]';
```
It is strongly advised that you specify a version when requesting the module – this speeds up the request time and helps with caching. If you don't specify a number then unpkg will redirect and serve up the latest available version.
## Example
Create a new file, copy the code below into it and then open the file in a browser – or [try online](https://codepen.io/lukejacksonn/pen/EMxVWM).
> If you would like the browser to reload when you update the code, then you can use a dev server like [servor](https://github.com/lukejacksonn/servor) dependency free by running `npx servor --reload --browse`.
```js
import { React, ReactDOM } from 'https://unpkg.com/[email protected]';
import htm from 'https://unpkg.com/htm?module'
const html = htm.bind(React.createElement)
const Counter = props => {
const [count, setCount] = React.useState(parseInt(props.count))
return html`
<div>
<h1>${count}</h1>
<button onClick=${e => setCount(count - 1)}>Decrement</button>
<button onClick=${e => setCount(count + 1)}>Increment</button>
</div>
`
}
ReactDOM.render(
html`
<h1>Look Ma! No script tags, no build step</h1>
<${Counter} count=0 />
`,
document.body
)
```
## Implementation
The latest versions of all packages are installed via (pinned) entries in `package.json` and built and bundled using Rollup with automatic code splitting.
The exports of each package are automatically expanded and `object-assign` is stripped from the output, since all browsers that support ESM will also support `Object.assign`
(See `scripts/expand-exports-plugin.js` and `scripts/replace-object-assign.js` for the Babel plugins that do this)
## Acknowledgements
Barely any of the code in this repo is written by myself. It is just a wrapper for React that is written and maintained by the team at Facebook. Thanks to my employer [Formidable](https://github.com/formidablelabs) for allowing me the time to think about and work on fun and experimental projects like this.