Mastering React with CDN: Is JSX Really Necessary?
Uncover the secrets of JSX-free React programming with CDN
I am a full-stack JavaScript developer from India .
Do you know that you can leverage the power of a Content Delivery Network (CDN) to use React without even installing the Create React App on your local machine? Yes, you heard it right!
In the world of web development, efficiency and simplicity are key. When it comes to using libraries like React, we often think about setting up a local environment, installing dependencies, and running a local server. But what if I told you there’s an easier way?
Welcome to the world of CDNs, where you can start coding with React in no time. In this blog, we will explore how to use a CDN link for React, bypassing the need for local setup. So, are you ready to dive into this exciting journey of learning and discovery? Let’s get started!
Pure HTML
let’s start with the basics. Here’s a simple HTML code snippet for a webpage with two headings inside a div:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- This is pure HTML -->
<div id="root">
<h1>Hello World</h1>
<h1>This is Lecture one </h1>
</div>
</body>
</html>
Now open this file in your browser, you can do that by using the live server extension in vs code or by double clicking on your index.html file in your folder. You will see something like this on your browser:
Javascript
Let's do the same DOM manipulation using Javascript. Make an index.js file now add this file to your inde.html file using a script tag like this:
<script src="./index.js"></script>
Now whatever code you write in your js file will be loaded in this script tag in index.html at this place. Your modified index.html should look like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
Now we will do the same DOM manuplation that we did using pure HTML. For this, we will be using the document object provided to us by our dear browser. Document object is an interesting thing this is an entry point into the content of a web page, to read more about document objects you can refer here: click here
Below I am writing code that will manipulate DOM. If you don't understand what DOM is you can read about it more here: click here
If you don't understand the code that I have written below no need to panic you can do a simple chatGPT or Google search you will get it don't worry.This is the code, try to go through it:
// get your div tage
const divTag=document.getElementById("root")
// create first h1 tag
const firstH1Tag=document.createElement("h1")
console.log(firstH1Tag)
//create second h1 tag
const secondH1Tag=document.createElement("h1")
// add innerHtml to first h1 tag
firstH1Tag.innerHTML = "Hello World";
// add innerHtml to second h1 tag
secondH1Tag.innerHTML = "This is Lecture one ";
// append these h1 tags to div as child
divTag.appendChild(firstH1Tag)
divTag.appendChild(secondH1Tag)
You can see that initially when we pure HTMLor code was very easy to code but as we moved into coding the same thing with JS we got some more code to do, you may initially think that HTML code is easy why should I do this with JS, Yes you are right but only in this as your application will grow you will found that second approach is good. If your application grows too big like we use daily many of you will find doing this even more difficult with your second approach then you have to move to something called libraries which are pre-written code by developers and you will directly use them in your code without much worrying about their code or how internally they have coded that piece of code or that library. For fast and smooth UI building we will move to Reactjs.
React
Now let's do the same thing that we did earlier with Reactjs. As I said earlier Reactjs is a library, a code written by someone else so to use that code you have to import that code in your code. HOW to do that, there are multiple ways to do but we will be using here a simple way that is by CDN(Content Delivery Networks) to read more about CDN you can read here: click here.
To include React in your app you have to import two links in your html file. After importing these two links into your HTML file your file will look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">Hello World </div>
<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>
</body>
</html>
Now comes the most interesting part of this blog which is how you will know that you have injected the react code into your code. To know that you can go to your console in developer tools and write there React you will get something like this:
Did you see that, What is this React keyword is giving us an object, but we did not define this React keyword in our code? then how does this come to my code this is because of the first link that you have pasted in your code. If you copy this link(https://unpkg.com/react@18/umd/react.development.js) and paste in paste it into your browser. you will get some code on your screen what is code that code is JS code, React is a JS code that is written by someone else for you. React is global now you can use it anywhere in your app to get access to the React library. Okay, I get that the first link is for React but what is this second link for !!. This second link is for React DOM, what the hell this is this, Have you ever heard about something called React Native I think you must have This means that React can also be used in other places so to use React with the web we will use React DOM.It is a library that provides DOM-specific methods and can be used with React to build user interfaces. Did you notice react.development.js and react-dom.development.js. What do they mean? They mean that these files are for the development version of the React DOM library. They are not minified, so they are readable and include helpful error messages, making them useful for development. However, they are larger and slower than the production version, so these are not recommended for use in a production environment. That is enough of the theory let's move toward coding. Below is the code for the same using Reactjs and ReactDOM library.
// creating first h1 tag
const firstH1Tag=React.createElement("h1",{className:"myClass", key:"1"},"Hello World")
// creating second h1 tag
const secondH1Tag=React.createElement("h1",{className:"myClass",key:"2"},"This is Lecture one")
// create a div that will contain both h1 tag as child to it
const container=React.createElement("div",{className:"container "},[firstH1Tag,secondH1Tag])
//creating root
const root=ReactDOM.createRoot(document.getElementById("root"))
root.render(container)
Let's now understand what we have done. Firstly we are creating a React element of type “h1” with a class name of “myClass”, a key of “1”, and the text “Hello World”.
Then again in the next line, we created another React element of type “h1” with a class name of “myClass”, a key of “2”, and the text “This is Lecture one”.
Then we created a React element of type “div” with a class name of “container”. It has two children, firstH1Tag and secondH1Tag, which are included in an array.
Then we created a new root container at the DOM element with the id “root” using the ReactDOM.createRoot() method and at the last line we rendered the container component (which includes the two h1 tags as children) inside the root container. You can read about React.createElement() Here and ReactDOM.createRoot() Here .
Conclusion
We’ve explored how to create web elements using HTML and JavaScript, and then using React. Both methods have their strengths, and the choice between them depends on your project’s needs. React simplifies the process and can be loaded into your project via a CDN link. Keep exploring and happy coding!
