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>