Table of contents
- What is Emmet ?
- "Hello World" program using plain HTML
- "Hello World" program using vanilla JavaScript
- Injecting React using CDN
- Difference between a Library and a Framework?
- What is CDN? Why do we use it?
- Why is React known as React?
- What is crossorigin in the script tag?
- What is the difference between React and ReactDOM?
- What is difference between react.development.js and react.production.js files via CDN?
- What are async and defer attributes in the script tag?
- "Hello World" program using React
In this blog series, we'll start learning react from scratch and cover advanced topics down the line.
Forget react for the time being, let's see how to write a basic program using HTML.
I'm using Emmet to generate the basic boilerplate HTML code. Now, you may have a question...
What is Emmet ?
Emmet is an essential toolkit for web developers. It allows you to type shortcuts that are then expanded into full pieces of code for writing HTML and CSS, based on an abbreviation structure most developers already use that expands into full-fledged HTML markup and CSS rules.
"Hello World" program using plain HTML
Create an index.html file inside your project folder and add the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learning React</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
If you open the above file w/ your browser you'll see:
"Hello World" program using vanilla JavaScript
Easy stuff. Now instead of using HTML let's use pure Js to do the same thing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learning React</title>
</head>
<body>
<div id="root"></div>
<script>
const heading = document.createElement("h1");
heading.innerHTML = "Hello World";
const root = document.getElementById("root");
root.appendChild(heading);
</script>
</body>
</html>
As you can see below, we have successfully manipulated DOM using vanilla JavaScript.
Injecting React using CDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learning React</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="root"></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>
We can simply add these CDN links inside our app and we'll get access to both React and ReactDOM libraries. You can go to the console in your browser and check:
This, by the way, is the smallest react app. Cool right? Who said we needed jsx, npx create-react-app my-app? We'll cover those as well, later. But this is just enough to get started with react.
A lot of questions might have popped up in head right now. Let's try to answer them:
Difference between a Library and a Framework?
A library is a collection of packages that perform specific operations whereas a framework contains the basic flow and architecture of an application. The major difference between them is the complexity. Libraries contain several methods that a developer can just call whenever they write code. React js is a library and Angular is a Framework. The framework provides the flow of a software application, tells the developer what it needs and calls the code provided by the developer as required. If a library is used, the application calls the code from the library.
What is CDN? Why do we use it?
A content delivery network (CDN) refers to a geographically distributed group of servers that work together to provide fast delivery of Internet content. The main use of a CDN is to deliver content through a network of servers securely and efficiently.
Why is React known as React?
React is named React because of its ability to react to changes in data. React is called React because it was designed to be a declarative, efficient, and flexible JavaScript library for building user interfaces. The name React was chosen because the library was designed to allow developers to "react" to changes in state and data within an application and to update the user interface in a declarative and efficient manner. React is a JavaScript-based UI development library. Facebook and an open-source developer community run it.
What is crossorigin in the script tag?
The crossorigin attribute sets the mode of the request to an HTTP CORS Request. The purpose of the crossorigin attribute is to share the resources from one domain to another domain. It is used to handle the CORS request. It is used to handle the CORS request that checks whether it is safe to allow for sharing the resources from other domains.
What is the difference between React and ReactDOM?
React is a JavaScript library for building User Interfaces whereas ReactDOM is also a JavaScript library that allows React to interact with the DOM. The react package contains React.createElement(), React.Component, React.Children, and other helpers related to elements and component classes. You can think of these as the isomorphic or universal helpers that you need to build components. The react-dom package contains ReactDOM.render(), and in react-dom/server we have server-side rendering support with ReactDOMServer.renderToString() and ReactDOMServer.renderToStaticMarkup().
What is difference between react.development.js and react.production.js files via CDN?
Development is the stage of an application before it's made public while production is the term used for the same application when it's made public. Development build is several times (maybe 3-5x) slower than the production build.
What are async and defer attributes in the script tag?
Async - The async attribute is a boolean attribute. The script is downloaded in parallel(in the background) to parsing the page, and executed as soon as it is available (do not block HTML DOM construction during downloading process) and don’t wait for anything.
<script src="demo_async.js" async></script>
Defer - The defer attribute is a boolean attribute. The script is downloaded in parallel(in the background) to parsing the page, and executed after the page has finished parsing(when browser finished DOM construction). The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM.
<script src="demo_defer.js" defer></script>
Unless you're supporting ancient legacy systems, always add type="module" to all your script tags:
<script type="module" src="main.js"></script> and place the tag inside <head>
<script defer nomodule> can be used as a legacy fallback.
As the name suggests, it allows you to import modules, which makes it easier to organize your code. Enable strict mode by default. This makes your code run faster and reports more runtime errors instead of silently ignoring them. Execute your code only after the DOM has initialized, which makes DOM manipulation easier. Thanks to this, you won't need to listen to load/readystatechange/DOMContentLoaded events. Prevent top-level variables from implicitly polluting the global namespace. Allow you to use top-level await in supported engines. Load and parse your code asynchronously, which improves load performance.
"Hello World" program using React
Let's create a js file inside our project folder instead of writing the logic inside script tags for the sake of modularity.
const heading = React.createElement(
"h1",
{
id: "title",
},
"Hello Everyone!"
);
const heading2 = React.createElement(
"h2",
{
id: "title",
},
"Hello Everyone!"
);
const container = React.createElement(
"div",
{
id: "container",
},
[heading, heading2]
);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(container);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learning React</title>
</head>
<body>
<div id="root">Not rendered</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>
<script src="app.js"></script>
</body>
</html>
It's best practice to insert Not rendered inside your root element in case you are not able to properly render the root.
The ordering of the script is also important. If we added our app.js script before inserting the CDN then the app won't work.
Coming to our logic, if we want to add multiple elements inside any container, then we can pass it as a list: [heading, heading2]. Also, for creating elements, since it's a standard property available in React, we use the React library. But for any DOM manipulation, we need to use ReactDOM library.
We get any element we want to make as the root of our react app, in our case: a div with an id "root", and render our container inside the root.
Anything that was already present inside the root will be overwritten by ReactDOM when we use the render() function.
We've successfully built a basic React app.
That's all for now folks. See you in the next blog!