Hey guys in this article, you will learn about creating React app using CDN links with full coding example.
Read More:
- Check the Complete JSP Tutorials
- Check the Complete Spring Boot Tutorials [100+ Examples]
- Check the Complete Spring Boot and Thymeleaf Tutorial
- Check the Complete AWS Tutorial
- Check the Complete JavaServer Faces (JSF) Tutorial
- Check the Complete Spring Data JPA Tutorial
- Check the Complete Spring Security Tutorial
- Check the Javascript Projects for Beginners
- Check the Spring Boot JdbcTemplate Tutorials
Table of Contents
Create a HTML file
Create index.html file and add the following content. This file contains the basic HTML boiler plate code.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Include the CDN Links
Inside the <head> section, include the CDN links for react, react-dom and babel.
<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>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
You can find the CDN links on their official website.
Check the React CDN link
Check the Babel CDN link
Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don’t support certain features natively, Babel will help you compile those features down to a supported version.
Create React component
- React components are the building block of React application.
- It is a javascript function that contains the HTML content and logic for the component
- React component name should start with Capital letter. Eg: Employee, Customer, Navbar, Card etc..,
- We use react component as as regular HTML tags Eg: <Employee>, <Customer>, <Navbar>, <Card> etc..,
<script type="text/babel">
const MainContent = () => {
return (
<div>
<p>Main content goes here...</p>
</div>
);
}
//render the component to the DOM
ReactDOM.render(<MainContent />, document.getElementById('main-content'));
</script>
ReactDOM is from react-dom library, it call a method render(), which takes in 2 parameters, the name of the component which you want to render and the place you want to render the component.
Open the file in a Browser
Open the file index.html inside the browser and you will see the following content
That’s it for this post, if you like this post, please share this post with your friends and collogues and also share this on your social media profiles.
