Hello, React ⚛! for beginners guide series 1.0
Tags: react, beginners, webdev, codenewbie
Published: 2020-05-24 15:58:48

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](https://reactjs.org/) 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](https://nodejs.org/en/) 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.

<!-- Command prompt goes here-->
![Alt Command prompt](https://dev-to-uploads.s3.amazonaws.com/i/y54yh2v4gonlcgpv3ajj.jpg)
<figcaption>Node and npm version</figcaption>
We are good to go now and ready to build a react application ⚛ .

<!--Lets code image goes here-->
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qk67cv0yhf0kjpo8d4ly.jpg)

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](https://create-react-app.dev/docs/getting-started/)

<!-- Installation success msg goes in here-->
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dczwj1qy1f7swh4pz8hl.jpg)
<figcaption>Installation success</figcaption>

5. 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 image goes here-->
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h549n9tasm9ldapkp0v3.jpg)
<figcaption>Change port number</figcaption>
(_If some error occurs during the installation, visit [Create React App](https://create-react-app.dev/docs/getting-started/) for more explanation of what went wrong and follow the steps mentioned over there._)

Your app is now up and running 
<!--React App image run here-->
![Alt React App running](https://dev-to-uploads.s3.amazonaws.com/i/3bvul6re8gkr71e1g78s.jpg)
<figcaption>Running at port number 3001</figcaption>

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.

<!-- File structure image here -->
![Alt my-app file structure](https://dev-to-uploads.s3.amazonaws.com/i/ctq24m4xjv0cpoa6x5a8.jpg)
<figcaption>Credit: Create-React-App</figcaption>

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 Image comes here-->
![Alt App.js file](https://dev-to-uploads.s3.amazonaws.com/i/txojio5moma1n4g8do05.jpg)
<figcaption>App.js</figcaption>

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
<!-- Hello React image here -->
![Alt Hello React!](https://dev-to-uploads.s3.amazonaws.com/i/1rnjnzp28e0m5eyq2s5g.jpg)
<figcaption>With change text</figcaption>