DEV Community

Koutaro Chikuba
Koutaro Chikuba

Posted on

React starter with 9 lines html

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
hajimehoshi profile image
Hajime Hoshi

Awesome!

Collapse
 
saltyshiomix profile image
Shiono Yoshihide

いつも読んでます!笑