Did you know you can build a static Reactjs website with a CDN link? Yes! let’s understand how with some React CDN example demo code.
In this blog, we will discuss how you can build your own React JS static website with just one file index.html.
I will start with what is CDN and then I will move on to the code that you can use to build your React static website with the help of CDN.
Let’s get started!!
What Will You Learn?
CDN
A CDN (Content Delivery Network) is a group of servers spread out over many locations. These servers store duplicate copies of data so that servers can fulfill data requests based on which servers are closest to the respective end-users.
CDNs make for fast service less affected by high traffic.
CDNs are used widely for delivering stylesheets and JavaScript files (static assets) of libraries like Bootstrap, jQuery, etc.
React CDN Example
React is a popular JavaScript library for building user interfaces. It allows you to create reusable components that can render data and handle events.
However, sometimes you may want to write some basic react code without installing any libraries or using create-react-app, which is a tool that sets up a modern web app by running one command.
CDN libraries help you build your own react js static application without relying on any frontend tooling libraries like vite, create-react-app, etc.
Next, we will understand how to build the static react application step by step.
Create HTML File
Create a simple HTML file and name it as index.html. This is going to be the starting point of our static website.
If you are in VS Code then you can just put a ! mark – it will give you a boilerplate code for HTML.
<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>Import React Libraries From CDN
To use React with CDN, you need to add two script tags to your HTML file: one for React and one for ReactDOM. React is the core library that provides the functionality for creating components and elements.
You can use the following script tags to load the latest versions of React and ReactDOM from unpkg, which is a CDN service that hosts npm packages:
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>React Code in HTML
Now you can write the react code in HTML inside the script tag. The script tag should have the type as text/babel.
Inside the script tag, you can write normal react components.
If this is your first time looking at React code, then I will recommend you learn these 3 the essentials of React application through an example project.
<script type="text/babel">
const App = () => {
const [count, setCount] = React.useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
</script>Render in DOM
Important that you render the react code inside the HTML. For that, we need to use a division element with an id root. Then we can render the component inside this div element that has the id root.
<script type="text/babel">
// ...
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
</script>Import babel to support JSX
We use type="text/babel" for the script tag, which tells the browser to treat the code as JSX.
JSX is not supported by most browsers, so we need to use a tool called Babel to transform it into plain JavaScript.
Babel is also available as a CDN script file, which you can add to your HTML file before the react code.
<script
type="text/javascript"
src="https://unpkg.com/babel-standalone@6/babel.js"
></script>React CDN Example Site
After you open the file index HTML. You will see something like this.
In this interface, if you click on the button it will change the state and increase the number of clicks.
It is a pretty simple React application, but it is also very important for you to know how you can build your React applications without using any kind of library.
This is also a famous interview question if you go for any kind of React interview.
You can extend the functionalities of this simple static app with some more React concepts. Want to revise the concepts as soon as possible? Here is a video that will shortly introduce you to react concepts –
Conclusion
You have successfully written your first basic react code using CDN script files. You can use this method to experiment with React and learn its basics.
Now you know how you can build a static website using React without relying on any kind of library like Vite or create-react-app.
Thank you for reading till the end, see you soon!
