How to write a pure react App with out dependencies

This article will be walking us through the rocket science of building a pure "Hello World" React App without any dependencies. You can build a custom bundle, include it using the script src, HTML tag, and use without the React Framework for example: Vanilla JavaScript, Jquery or other frameworks that use direct DOM manipulation.

This article is unique and it will expose the ecosystem around React. When I began learning React, it seemed like step 7, and it exempted the prior steps of how to set up a React project. React is not a stand alone library, so it is useful to know the tools you are using. As a developer, one should go above using but knowing how things work and what the are doing. .

Set Up

Install Node.js; Ensuring your Node is above 12, preferably the latest. I used Node 16.16.0.
I have already installed my Visual Studio code, you could use your preferred code editor.
Your Command line Interface, I am using git bash.

Let's start writing pure React. No compile step. No JSX, No Babel, No Webpack or Parcel. Just some JavaScript on a page.

Starting your project

Go to your CLI and create a directory named 'Hello-World'.
Inside your 'Hello-World' directory create another directory named 'src' and put a 'index.html' file there.
Inside the 'index.html' file put these lines of code;

<!DOCTYPE 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>Hello World</title>
</head>
<body>
    <div id="root">

    </div>
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script >

// code goes here

    </script>
</body>
</html>

Now open this 'index.html' file in your browser with command key +O for windows and Linux to open prompt. Move to where you saved the file and open it. It will display a blank page.
Add a root div in your 'index.html' file. this is where we will render our React App. Your don't have to call it root but it's a common practice.

We are going to be using two common script tags:

The first is the React Library:

It is simply the interface of how to interact with React; all methods except one will be via this library. It's just the API, has no way of rendering itself.

The second React library :

The second is the rendering layer. since we are rendering it on the browser, we are using REACT DOM. The order of both is not quite important.

The last script tag is where we will be putting our code. It must come after the first two script tags.

In the last script tag, put the following.

const App = () => {
  return React.createElement('div', {}, 
React.createElement('h1', {}, 'Hello World!')
);
  };

ReactDOM.render(React.createElement(App), document.getElementId('root'));

This is the simplest React App.

From the first line of code:

We first created our own component, App. React is all about components. which could be function or class component. We used a function component.
A function component returns markup which is what React.createElement generates. The React.createElement creates one instance of some component, to create DOM tags such as h1, and div and are outputted to the DOM.
The document.getElementId to take an existing div out of the HTML document. then we take that element and pass that into ReactDOM.render, here we are telling the React where we want to render our App. Note we are using React.createElement with App as a parameter to ReactDOM.render. We need an instance of an App to render out. App is a class of components and we need to render a single instance of a class. React.createElement makes an instance of a class.

If you liked this article please follow me on Hashnode for my latest articles. I'm tweeting my journey on Twitter daily, this way to my LinkedIn .

I share my knowledge on,

🌐 Web Development
✍️ Content Creation
💼 Career Development
🦾Personal Growth
BlockChain
And more!

Happy coding!

NecheyGrace's Blog