In recent years, React.js has become a powerhouse in the world of web development, enabling developers to build dynamic and interactive user interfaces efficiently. While React is commonly used in conjunction with tools like Create React App and a build system for larger projects, it is also possible to incorporate React.js directly into an HTML file for simpler applications or educational purposes. In this article, we’ll explore the steps to integrate React.js directly in HTML, making it accessible for beginners.
Getting Started
The first step is to include the necessary React scripts directly in the HTML file. You can achieve this by adding script tags in the <head> section of your HTML. For simplicity, we’ll use a content delivery network (CDN) to include React and ReactDOM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React in HTML</title>
<!-- Include React scripts from CDN -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<!-- Your React components will be mounted here -->
<div id="root"></div>
<!-- Your React components go here -->
</body>
</html>
Creating a React Component
With the React scripts in place, you can now define a simple React component using JSX syntax. In this example, we’ll create a component called MyComponent that renders a “Hello, React!” message:
<!-- Inside the <body> section of your HTML -->
<script type="text/babel">
// Define a simple React component
const MyComponent = () => {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
};
// Render the React component into the DOM
ReactDOM.render(<MyComponent />, document.getElementById('root'));
</script>
Note the type="text/babel" attribute in the script tag. This allows you to write JSX directly in the HTML file. In a production environment, a build tool like Babel would typically be used to transpile JSX into JavaScript.
Viewing Your React App
Save your HTML file and open it in a web browser. You should now see the “Hello, React!” message rendered by your React component. This simple setup demonstrates how you can integrate React.js directly into HTML, making it accessible for those who are just starting with React development.
To use React js directly in HTML just use the script of React js through React js CDN
How to use React js script CDN directly in HTML?
To use React js CDN directly in HTML just write React js CND script in the head tag of the HTML
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
</html>