React JS for Beginners
Tags: javascript, react, elastikteams
Published: 2021-09-30 10:17:20

#Summery: 
As I recently completed learning React JS and   initially I had a lots of questions like what , why and how n all then I started it from Why ? why we need to use React ? and the here is the answer , we can use it on vast variety of platform to build a quality UI. Its library approach allowed react to evolve into such a remarkable tool.
Initially I just started with a reading documentation part then I took a scrimba course for reference then I learnt most of the topics of React from that course just like Introduction, why use React, ReactDOM, Functional component, class component, JSX, Props, Props in constructor, State, some part of conditional render, lifecycle etc with the hands-on experience. while learning this sometimes found difficulties but with the help of team members and other reference I completed learning and also apart from just theory or documentation part I tried to build some real life application just like Sign Up page and To Do App.
While learning I didn’t learn only React JS I learnt a other lots of thing when I got some difficulties then I searched a lots of thing tried to solve lots of problem and learn a lot, I learned time management also  

#React JS:
__Intro__:It’s an efficient and flexible JavaScript library for building user interfaces. It is an open source and  component based library which is used only for view layer of application. React is popular as a front-end web development tool.
There are more topics which includes in React JS learning process React pros, and Cons, React JSX, React components, React Forms, React State, React Hooks, React Lifecycle, React Hooks etc.
The main objective of React JS is to building a user interface that improves the performance of app. The two main features make React more than a library JSX and Virtual DOM (Document Object Model).

__What is React Components and Props?__
In React we can define component as function and class.                                     To define __class  Component__  we have to extend React.Component .you must define only one method in React.Component called __render()__.

``` 
class Demo extend React.Component {                                                   
    render(){                                                                                                             
    return<h1>This is my first blog</h1>;                                                                                                          
     }                                                                                                                                                        
   }

 ```

__Pass Props to the class component__

```
class Parent extends React.component{                                                                  
    render(){                                                                                                                             
        return(                                                                                                                            
             <child example = “REACT”/>                                                                                               
              )                                                                                                                                                      
            }                                                                                                                                                   
       }
  class Child extends React.component{                                                                
     render(){                                                                                                                              
         return(                                                                                                                                  
              <div>                                                                                         
              <h1>{this.props.example}</h1>                                                                                    
              </div>                                                                                                                                         
               )                                                                                                                                                         
             }                                                                                                                                                      
        }

```
To define __functional component__ lets take same example as above but created using functional component 
```
function Demo(){                                                                                                 
   return<h1>This is my first blog</h1>;                                                                                      
    }
```
__Pass Props to functional component__
In React we can pass props or properties into child components  so we can create a App component that can render a welcome
```
 function welcome (props) {                                                                                         
    return ()                                                                                                                                                                                                                                                   
       <h1>Hello, {props.name}</h1>;                                                                                            
          }                                                                                                                                       function App () {                                                                                                      
  return()                                                                                                                               
       <div>                                                                                                                         
       <h1>Welcome name = “Megha”</h1>                                                                                                                                                                                                        
       </div>                                                                                                                                       
          );                                                                                                                                                      
     }                                                                                                                                   
 ReactDOM.render(                                                                                                                          
     </App>                                                                                  
     document.getElementById(‘root’)                                                                                               
                );
```
 
__Introducing JSX__

JSX is a JavaScript extension syntax used in React. we use JSX to write HTML and JavaScript code together.

```
class Demo extends React.Component{                                                                       
    render(){                                                                                                          
    return
      <h1>This is my first blog</h1>;                                                                            
            }                                                                                                                                                         
      }                                                                                                                            ReactDOM.render (<Demo/>,  document.getElementById(‘root’));

```

__Introducing state__
The state object is where you store the property values that belongs to the component. State object can initialize in the constructor method. We can refer state object anywhere in the component using __this.state.property_name__.
```
class Demo extends  React.component{
    constructor(props){                                                                                     
    super(props);                                                                                                              
     this.state = {                                                                                                           
       name :“Megha”                                                                                                                       
                 };                                                                                                                                                      
             }                                                                                                                                      
      render(){                                                                                                                              
      return(                                                                                                                                     
     <div>                                                                                                                                
      <h1>My name is {this.state.name}</h1>                                                                
     </div>                                                                                                                                      
        );                                                                                                                                                      
     }                                                                                                                                                 
  }
```

__Reasons to use React:__
I have recently completed learning about React .As far as I understand why we use React or the things which I like about the React those are 
React is simple and easy to learn its important as a learning perspective because if a technology is hard to learn we will probably find difficult to start 
__React JS__ works in a component based structure in React we can start with small component like text button and combine them into large  and each component has its logic and behave differently 
 __Virtual DOM(Document Object Model)__ is a programming concept  in that an ideal or virtual representation of UI is kept in memory and synced with the real DOM by a library such as  React DOM. Rendering the virtual DOM is actually faster than rendering the UI in the actual browser Dom. 
__JSX(JavaScript XML)__ allows us to write HTML elements in JavaScript and place them into DOM without any createElement().JSX makes it easier for us to write React application 

__Things which I don’t like in React:__
Just like React have a some reasons to use there are some reasons not to use or I don’t like,  those are
__Its Slow__ sometimes page load speeds are reduced this happens because javascript functions are running in the browser to lead the content from the server and render it through react functions

__Application using React__
1.Online Code Editor                                                                                         Product Architecture based on tools used:
•	Creating the structural aspect of code editor using HTML, CSS
•	Implementation of front features using React
      2.Social  Media App
      3.To Do App
      4.Productivity App