DEV Community

loading...
Cover image for Run JS ES6 & Reactjs in the browser.

Run JS ES6 & Reactjs in the browser.

Meabed
Polyglot Engineer👨‍💻Dev & Ops & OSS • #fullstack #php #golang #javascript #typescript #devops 🛠dev.me me.io • 👨‍💼o(p)nions are mine
Originally published at meabed.com ・2 min read

While I was building a reactjs package and just after finishing it. I wanted to test it in browser - not just unit test! I was lazy to install webpack dev server or other tools to compile my code and run dev server with hot-reload, so I went to try running it directly in the browser! and yaay it worked! and here is few things I learned:

  • UMD - Universal Module Definition
  • AMD - Asynchronous Module Definition
  • CJS - CommonJS Modules
  • You can run es6 code in the browser with script type text/babel and include babel Stand alone in the browser to transpile your es6 code - so cool!
  • You can see how babel transpile your code just in the browser here: https://babeljs.io/en/repl
  • You can include almost all the JS libraries directly in your browser with umd bundles.
  • Rollup and Typescript build is just so easy as 1-2-3! and there is 2 great literary starters
  • Being more inclined to be lazy is a good thing, as long as you use this to read and re-discover another ways to solve your problems.

  • Keeping up to date with tech is hard as tech moving at super speed and everyday there is always a new thing! so try as much as you can Un-learn and Re-learn things you were used to do before as there might be other solutions developed.

Screenshot and code are below:

index.html
app.jsx

HTML preview: https://codesandbox.io/s/currying-fire-rm55g

Github repo link: https://github.com/meabed/reactjs-slot-layout

A few helpful links:

If you have comments or thoughts, I would love to hear it, discuss it and share it, please feel free to leave it in the comment or reach out @meabed

Happy coding 🤞

Discussion (0)