loading...

React starter with 9 lines html

mizchi profile image Koutaro Chikuba ・1 min read

Save this code as index.html and open by your (modern) browser.

<div id=root />
<script type=module>
import React from 'https://dev.jspm.io/react@16'
import ReactDOM from 'https://dev.jspm.io/react-dom@16'
ReactDOM.render(
  React.createElement('h1', null, 'hello'),
  document.querySelector('#root')
)
</script>

Enjoy!

How it works

  • This is shorthand html file without <html>, <body> and so on. Just <div id=root> exists.
  • <script type=module> means this code scope can use native ES Modules.
  • Import react and react-dom from jspm.io. jspm.io is ES Module's age CDN for develop only (yet).
  • ReactDOM.render renders React.createElement('h1', null, 'hello'), it means <h1>hello</h1> with jsx, to <div id=root />

I like hyperscript syntax so I often use const $ = React.createElement

Posted on Jun 18 '18 by:

Discussion

markdown guide