01 Introduction to foundational tools and frameworks in web development.

Ayush Kumar's photo
Ayush Kumar
·

5 min read

Table of contents

Coding :

Build your first Hello World program using,

  • Using just HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01 Inception</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="root">
        <h1>Hello World is replaced by React</h1>
    </div>
</body>
</html>

  • Using JS to manipulate the DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01 Inception</title>
</head>

<body>
    <div id="root"></div>

    <script>
        const heading1 = document.createElement('h1');
        heading1.textContent = 'Hello World - JS';
        // Appending the element to DOM

        const root = document.getElementById('root');
        root.appendChild('heading1');
    </script>
</body>
</html>

Using React

  • Create an Element

This function React.createElement() takes three arguments:
📝 React.createElement(type/element, props/attribure, children)

  • type: The type of the React element (e.g., "h1" for heading level 1).

  • props: An object containing the attributes and their values for the element.

  • children: The content or children of the element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01 Inception</title>
</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>

    <script>
        const heading1 = React.createElement("h1", {}, "Hello World from React");
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(heading1);
    </script>
</body>
</html>

Create a React element with attributes

const heading1 = React.createElement("h1", {
    className: "heading-1",
    id: 'first-heading',
    xyz: 'abc'
}, "Hello World from React app");

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(heading1);

  • Create nested React Elements

/*
<div id='parent'>
    <div id="child">
        <h1>I a Heading Level 1</h1>
    </div>
</div>
*/
const parent = React.createElement('div', { id: 'parent' },
    React.createElement('div', { id: 'children' },
        React.createElement('h1', {}, "I am Heading Level 1")
    )
);
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(parent);

  • Create siblings of React Elements

/*
<div id='parent'>
    <div id="child-1">
        <h1>I a Heading Level 1</h1>
    </div>
    <div id="child-2">
        <h1>I a Heading Level 2</h1>
    </div>
</div>
*/
const parent = React.createElement('div', { id: 'parent' },
    [
        React.createElement('div', { id: 'children-1' },
            React.createElement('h1', {}, 'I am Heading 1')
        ),
        React.createElement('div', { id: 'children-2' },
            React.createElement('h1', {}, 'I am Heading 2')
        )
    ]
);

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(parent)

Use root.render

Theory :

Q: What is Emmet?

A: Emmet is the 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.

Q: What is CDN? Why do we use it?

A: A content delivery network (CDN) refers to a geographically distributed group of servers that work together to provide fast delivery of Internet content. The goal is to provide high availability and performance by distributing the service spatially relative to end users.

Q: Why is React known as React?

A: And it's called React because it reacts. It was developed by Facebook (a site that CONSTANTLY updates their data) to improve the user interface development and more effectively change (REACT to) what the user sees when they're doing things like mouse clicking, submitting and typing.

Q: What is crossorigin in script tag?

A: The crossorigin attribute sets the mode of the request to an HTTP CORS Request. The purpose of crossorigin attribute is used to share the resources from one domain to another domain. Basically, 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.

Syntax

<script crossorigin="anonymous|use-credentials">

Q: What is difference between React and ReactDOM?

A: React is a JavaScript library for building User Interfaces whereas ReactDOM is also 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().

Q: What is difference between react.development.js and react.production.js files via CDN?

A: 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.

Q: What are async and differ attributes in <script> tag?

A: 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.

Syntax

<script async src="demo_async.js"></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.

Syntax

<script defer src="demo_defer.js"></script>

Q: Difference between a Library and Framework?

A: A framework is a set of pre-written code that provides a structure for developing software applications. A library, on the other hand, is a collection of pre-written code that can be used to perform specific tasks.

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 a number of methods that a developer can just call whenever they write code. React js is library and Angular is Framework.

The framework provides the flow of a software application and 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.

References:

react core