DEV Community

mizchi (Kotaro Chikuba)
mizchi (Kotaro Chikuba)

Posted on

React starter with 9 lines html

#react

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 •

いつも読んでます！笑