Getting started and giving simple demos of React has always been a pain for me. It starts with setting up the NPM repo, installing a massive size of node_modules, transpiling your JSX code using babel, and then further compiling it using a bundler such as webpack.

Do you know you could skip all the above steps and write your JSX straight away in an HTML file?

Disclaimer

• This method is not ideal for production level deployments.
• We will use babel to transpile our JSX live on the browser which will be slower than pre-transpiling it.

If the above concerns are not among your requirements, then you are at the perfect place!

Instructions

Let’s start by creating an HTML file with a root div element

Now let’s import the browser version of React, ReactDOM, and Babel to our HTML file.

Finally, add another script tag with attribute type="text/babel" to indicate that babel needs to preprocess this script before execution. Now you can write your React code here normally with JSX. Here’s an example of a counter.

That is all you need to do! It’s so quick and easy.

Here is how our final code looks. If you are having trouble with any of the steps, copy this, save it in an html file and give it a try!

That is all what we need to do, you can bookmark this page to have this html template handy!