Skip to content

Instantly share code, notes, and snippets.

@HarunMbaabu
Last active April 5, 2021 17:53
Show Gist options
  • Save HarunMbaabu/92cd6f6339af2e0efe0a17e605c99cfb to your computer and use it in GitHub Desktop.
Save HarunMbaabu/92cd6f6339af2e0efe0a17e605c99cfb to your computer and use it in GitHub Desktop.

Writing React Directly in HTML

This method of interacting with React is the simplest way and it’s very easy if you have ever worked with HTML, CSS and JavaScript.

  • You’ll need an HTML file where you load three scripts in the head element pointing to their respective CDN – the React, ReactDOM and Babel.

  • Then, you’ll create an empty div element and give it an id of root. This is where your application will live.

  • Lastly, you’ll create a script element where you write your React code.

This is how your index.html file should look like:

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>React Tutorial</title>
   <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
 </head>

 <body>
   <div id="root"></div>

   <script type="text/babel">
     const element = <h1>Hello from React</h1>;
     console.log(element);
   </script>
 </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment