First ReactJs App setup and run - Hello World in ReactJs

Introduction:

ReactJs is a widely popular open source library initiated by Facebook which is used to develop Single Page Application.

React is a Library not a framework, it does not provide complete solution. It is responsible only for handling user interfaces or building front end application and it does it very well.

Setting up ReactJs in the local: 🚀

1. Install Node (we basically need npm and along with npm, npx comes pre bundled.).

        https://nodejs.org/en/download/

        (Download LTS version)

2. Create reactJs App by using create-react-app,

    reference: https://github.com/facebook/create-react-app

       type it in your terminal to create ReactJs App,

npx create-react-app react-js-hello-world

Your ReactApp is successfully created! 😊

3. With the help of create-react-app tool, we are able to create basic react working template for quick development. Generated ReactJs app looks something like this,

4. Complete folder structure looks something like this,

5. Now I am removing all the unnecessary files and codes from all the files which we do not really need as of now, we will be focusing on the code which is relevant to us and will try to understand the wiring, how ReactJs actually works, 👍🏻

If you notice in line number 6, I introduced <h1> tag and printed a label. Do not worry I will make you understand how exactly html tags are working inside a JS function in sometime,

6. Okay! now try to run our very first ReactJs App. 😄 by using following command,

npm start

Server got started successfully at http://localhost:3000 ✌🏻

Woohoo! provided header is printed.

How ReactJs App is working ?

In this section will be trying to understand 2 concepts,

1. Virtual DOM
2. JSX

First look at this static html file named as index.html, notice here we have empty <div> element which contains the id attribute which value is root. This <div> element is serving a great purpose here, basically React uses it as a container for dumping all the dynamically generated html from the JS,

Did not understand? 🤔 let me introduce complete wiring then it will make sense 🤓

   index.html

Now in the App.js file, inside App() function, you are seeing html elements, actually these are not actual html elements. It looks like html elements though, this is the magic of ReactJs through which you are able to write html markup inside a JS function which has a great advantage (hint: It makes updation very efficient in the DOM tree). 😄

Actually this is virtual DOM not the real html DOM provided by JSX (JavaScript XML), so JSX enables users to write the html script in react.

This is just to understand that what is going on behind the scene, as an end user it is just like using html markup, all the complexities are abstracted from end user by React.

   App.js

      

eventually this above JSX will be parsed to JS code, something like this,

React.createElement("div", {className: "App"},
      React.createElement("h1", null, "Hello World! this is my first React Js Application! 🚀")
)

Okay! now index.js is handling the actual rendering of the DOM, it decides where exactly the JSX of App component need to be rendered.

    index.js

If you remember in the index.html, we created empty <div> having the "root" id, we are giving its reference as a second argument of render() function so that provided React component would be dumped or rendered in the html file dynamically and when users load the browser index.html will be displayed with dynamically loaded React component.

Alright guys, so this is the basic understanding on ReactJs to start development in React app.

.

.

.

Thank you for reading!

🙋🏻‍♂️