Minimum set up for building React using ES7 features

Set up

% vim .babelrc
% cat .babelrc
{
  "presets": [
    "@babel/react"
  ]
}
% npm init -y
% npm i -D @babel/core @babel/cli @babel/preset-react

Versions

% npm --version
6.4.1
% cat package.json
{
  "name": "fe",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/preset-react": "^7.0.0"
  }
}

Compile

Compile JSX files in js/ into gen/

npx babel --watch js --out-dir gen

Demo

We can use async/await.

js/demo.js

function Root(props) {
  return <h1>{props.data}</h1>;
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function setUp() {
  const domContainer = document.querySelector('#root');
  await sleep(1000);
  const data = "Hello";
  ReactDOM.render(<Root data={data} />, domContainer);
}

setUp();

index.html

<!-- crossorigin is recommended. https://reactjs.org/docs/cdn-links.html -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

<!-- Load our React component. -->
<script src="gen/demo.js"></script>