React starter with 9 line html
Koutaro Chikuba
Jun 18
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.renderrendersReact.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
Did you find this post useful? Show some love!
dev.to is where software developers stay in the loop and avoid career stagnation.
Signing up (for free!) is the first step.
mizchi
mizchi
Classic DEV Post from Dec 15 '17
85
50
Trending on dev.to
React Native: Write code depending on the plateforms
#reactnative
#react
#ios
#android
React Testing Cases
#react
#testing
#jest
Server-Side Rendering With React Using Serverless
#react
#aws
#javascript
#webdev
Learn the React Context API with a Practical Example You Can Bring to Your Apps
#react
#webdev
#materialdesign
PostCSS with CSS Modules and React
#postcss
#react
#cssmodules
#webpack
Looks like Vue.js will likely out-star React over the weekend!
#vue
#react
#webdev
#showdev
The state of the state: React state management in 2018
#react
Auth With Twitter
Auth With GitHub
Awesome!