Hello, React ⚛! for beginners guide series 1.0

Hello beginners, it's 2020 and there is a high chance that you would have come across "React" or "Angular" or "Node" or "Mearn/Mean" stack those big-big words popping through social media, blogs, videos, college, colleague or through any other platform present in this beautiful world.

I am too a beginner and learning through various platforms(blogs, videos, tutorials, etc). I got into React through social media, Youtube videos popping up on the Web development framework and libraries, and I said let's give it a try, and find out what is React? Why it is advertising so much?
(P.S: This is my first post ever I hope I'll do justice with what I learned.)

In this post, we are going to talk about one of the libraries of Javascript which is React to develop front-end for the users.
1.) What is React?
2.) What problem does it solve?
3.) How to develop applications in React?

Now before jumping into it, you should have a basic knowledge of Javascript like variable declaration, functions, loops, Array, Objects, and ES6 methods.

What is ReactJs ⚛?

A ReactJs is one of the Javascript libraries which is developed by Facebook and released to the public in 2014 as an open-source. It is used for web development and building interactive UI for the users.

In react, you can structure your code into reusable component, think component as a function, I know it's confusing to think component as a function but just for ease of understanding think of it that way, everything will get clear as we move on to this series. Like a function that works on write once and uses whenever required, the same working principle is adopted by Components. Components are the small chunks or lego pieces of the lot which when put together forms a user-friendly web page.

Breakdown a web page into the component you'll get navigation bar, header, sidebar, main, section, footer. These, when put together, form the web page.

The component can be reused whenever required inside the project.
(Check out React document page. They have great documentation on React. You'll find helpful)

What problem does react solves?

Before React, developers have to make web pages from "vanilla javascript" which was quite time consuming and perform a lot of DOM operation to make the page intuitive, easy to navigate, and attractive at the same time to the user.
I spend a lot of time learning DOM and still, I haven't mastered it yet 😅.
As the large application grows there is a lot of "temporal dynamic data" that developer deals with and which gets changed with user interaction, that temporal dynamic data needs to be reflected on to the web page to give the user feedback. The maintaining of the temporal dynamic data in all the pages.

React considers all that and focuses more on building up the business logic and the presentational component and manipulation of DOM will be taken care of by react.

React provide us two things that make it stand than other Js libraries present

1. JSX: HTML syntactical sugar like structure
2. Virtual DOM: where Virtual DOM(I call VDOM) any change in the js file is first to get reflected inside the VDOM, then the Main DOM(I call MDOM) is compared if any changes inside the DOM is found then that part of the node is changed rather than repainting the whole DOM.

I know it is something to wraps one head around. But will come back to these topics later on the series.

How to develop applications in React?

Well to develop application React is pretty easy to do and before we do that. You need to have Node, npm installed into your system. If you are unsure whether your system has a node or not. Open your terminal/command prompt and type node -v if the version number comes that's mean node is installed into your system, if not then visit Node js follow the download instruction as mention on them.
Once downloaded again fire up your terminal/command prompt and type node -v
Npm package also comes with the Nodejs installer and get installed automatically. You can check for the version of the npm package by typing npm -v, if the version number came that means the npm is installed successfully.

Node and npm version

We are good to go now and ready to build a react application ⚛ .

1. Create a folder on desktop or wherever you want(mine reactJs Bootcamp).
2. Open your terminal/command prompt and navigate to the folder you have created and type npx create-react-app your-app-name-here and press enter.
3. Sit back or go and have some coffee as this will take some pretty time to create your project.
4. Once you received the successful message with your application name as mentioned in the below image. Navigate to your project name by typing cd your-app-name-here into the terminal/command prompt and enter npm start( in my case yarn start). For more installation guide visit Create React App

Installation success

1. The default browser will open and a default react's application will be up and running at localhost:3000. Note: If some application is using the default port number(3000 in this case) then the react app will prompt a message about running the application on to different port numbers. Simply enter 'Y' to run the application on a different port number.

Change port number

(If some error occurs during the installation, visit Create React App for more explanation of what went wrong and follow the steps mentioned over there.)

Your app is now up and running

Running at port number 3001

For this tutorial I have created a react app named my-app.
Fire up your code editor like VS Code, Sublime, Atom, etc( I use Visual Studio Code) and navigate to the project you just created.
This is what your project file structure will look like.

Credit: Create-React-App

React create 3 folders and 4 files at the root level of the project. You don't have to modify or delete the node modules folder, you have a public folder which contains the index.html file, logos, etc, again you don't have to change the any of the files right now,( in future, we might change some of the files).
In Src folder there is App.js file where we will print the Hello React! on to the browser.

App.js

Remove all the elements present inside the header and write Hello React ⚛!. and add some text inside the p tag, like introducing yourself, etc.
Save the file and the browser will automatically load the page with text changed

With change text