Home Front-end Development Create React Hello World Application from Scratch

Create React Hello World Application from Scratch

-

In last tutorial I have given details on how you can create React application using Create React App package.

Must Learn – Ultimate way create your First React Application

Now in this tutorial I want to keep using the same application created from last tutorial but with little tricks, here we will delete all the files from src folder and create from scratch.

The goal is to give you details understanding on how React Virtual DOM exactly works.

If you have not read the last tutorial then I would suggest to follow that one before reading this tutorial.

Must Read – [LINK]

Delete all the files from SRC folder

As I told you I want you to delete all the files from src folder, so go ahead and delete following selected files:

Files to Delete

Run npm start

Navigate to your project directory from terminal or command prompt if you are on windows and execute following command:

You don’t have to worry about the output for now because the page will be blank because nothing is there right now.

Add new index.js File

Now let’s start by adding a new file in src folder calling it index.js

Create new index.js file

Next open up index.js file and in this file we need import couple of objects from React Module, if you not familiar with ES6 modules don’t worry just code along as showing below:

So in the above script we are importing React object from react module and similar we are importing ReactDOM object from react-dom module.

Then next we defining new element using const, const is the new feature from modern javascript previously we were only using var but now we have const and let. so for element we seeding an JSX expression, as I told you before in tutorial that Babel will compile this down to make it work on browser.

In to then last line we are just logging element into the console.

Note – there is one thing you need to know about the projects that are created using create-react-app package when you save the changes and if npm start is running on your terminal this application is automatically going to restarted now you don’t have go browser and refresh it, this is what we called hot module reloading.

So save the change and back to the browser and open up the console we can do that by ALT + Command + i on mac or ALT+CTL+I on windows or if that shortcut doest not work for you then goto the view menu on the top and Developer – Developer Tools

After opening the console you see following output , that is the output from JSX expression.

If you example the object you can see that the type of this element the type property is set to h1 and we have other bunch properties so earlier on the first tutorial on Rect series [LINK] I talked about Virtual DOM which is light wight in memory representation of the UI it is not the real browser DOM is the virtual DOM.

And this object you see in the console this Rect Element is a part of Virtual DOM so whenever the state of this object changes React will get new React element then React will compare this element with the previous one it will figure out what is change and then it will reach out to the real DOM and updated accordingly.

Render React Element to DOM

So in index.js we have JSX expression the result of that is React element which is the part of the Virtual DOM now we want to render this inside of the real DOM and if you notice that’s why we needs to import ReactDOM from the react-dom module on the top.

So let’s make some changes to use ReactDOM and ReactDOM to render element into real DOM.

So we are calling React DOM and calling render function and as the first argument we need to pass element that we need to render and as a second argument we need to specify where in the real DOM we want to render this element. if you go back to the public/index.html file you will see that it has div with the id root

I told that this the container of our react application so we are using that here.

So save changes and go back to the browser and you see Hello World message, make sure npm start is still running.

if you inspect in the developer tool, you see that the our div with the id root and inside of this div we have our react element

This is a very simple application just for demonstration and undertaking core process.

In a real word application in stead rendering a simple element in DOM, we render our App component.

App component is the root component of the React Application and it can include children components like menu, navigation, sidebar and profile etc.

So in React we always have tree of compontaend which will eventually produce the complex markup inside Real DOM.

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

No Spam, ever. We'll never share your email address and you can opt out at any time.

Yogesh Kolihttp://www.itechempires.com
Yogesh Koli is a software engineer & Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 6+ years of experience working with the front-end and back-end web application development.
avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

Tutorials You May Like!

- Advertisement -