Day - 1 & Day - 4 Tasks (React.JS)

1. What is React & its features?

React is an open-source front-end JavaScript library that is used for building user interfaces, especially for single-page applications. It is used for handling view layer for web and mobile apps. React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed in 2011 and on Instagram in 2012.

React Features -

  1. It will make use of the virtual DOM rather than real DOM (Data Object Model) as RealDOM manipulations are expensive.
  2. It follows unidirectional data binding or data flow.
  3. It uses reusable or composable UI components for developing the view.
  4. it always create the application which will be Single page application.

2. What are the advantages of using React?

  1. Its a easy learning curve.
  2. Use of Virtual DOM to improve efficiency - React uses virtual DOM to render the view. As the name suggests, virtual DOM is a virtual representation of the real DOM. Each time the data changes in a react app, a new virtual DOM gets created. Creating a virtual DOM is much faster than rendering the UI inside the browser. Therefore, with the use of virtual DOM, the efficiency of the app improves.
  3. Gentle learning curve - React has a gentle learning curve when compared to frameworks like Angular. Anyone with little knowledge of javascript can start building web applications using React.
  4. SEO friendly - React allows developers to develop engaging user interfaces that can be easily navigated in various search engines. It also allows server-side rendering, which boosts the SEO of an app.
  5. Reusable components - React uses component-based architecture for developing applications. Components are independent and reusable bits of code. These components can be shared across various applications having similar functionality. The re-use of components increases the pace of development.

3. What is SPA?

  1. SPA stands for Single Page Application.
  2. Any web application, in which when you are clicking on any button or selecting option from navigation bar then if your page which means browser page is reloading then that means that application is your multi - page application . If it does not reload the browser page and just only updates the page without reloading then that application is known as Single Page application.
  3. SPA will manage using components or React-Router through in React.

4. What is CRA?

  1. The create-react-app is a tool/boilerplate that allow us to create quickly and run our application quickly without any config.
  2. It is a easiest way for creating react application.
  3. While creating cra it provide a default setup which includes module bundler(webpack) and babel and other required module also.

5. What is JSX?

  1. JSX stands for JavaScript XML. It allows us to write HTML inside JavaScript and place them in the DOM without using functions like appendChild( ) or createElement( ).
  2. As stated in the official docs of React, JSX provides syntactic sugar for React.createElement( ) function.
  3. It allows to write HTML inside the Javascript.

6. What is Virtual DOM?

  1. The Virtual DOM is an in-memory representation of Real-DOM.
  2. The representation of a UI is kept in memory and synced with the "real" DOM.
  3. It's a step that happens between the render function being called and the displaying of elements on the screen.
  4. This entire process is called reconciliation.
      OR
  1. First of all we understand that what is dom so whenever the html css and javascript file goes to browser and run first time then it will create tree like structure this structure is also known as document object model.
  2. So react is used special like dom called virtual dom instead of real dom, other js framework updates real dom which makes the web application slow.
  3. Whenever any react application gets loaded on screen for the first time react component gets mounted.
  4. Now when any user makes changes on the screen like button click bcz of which the state variable will get updated so in this cases the change will not directly go to real DOM instead react uses virtual dom so we are having two virtual dom one virtual dom created during mounting of component so it si a copy of real dom and another virtual dom contains the new updates, states Now this two virtual dom will get compared to each other and will check for the new changes this complete procedure known as "diffing algorithm."
  5. Now the new changes will be updated in our real dom this process is known as "Reconciliation" So manipulating virtual dom is much faster.

7. What is Babel?

  1. Babel is a toolchain that is mainly used to convert ECMAScript code into a backwards compatible version of JavaScript.
  2. Babel has support for the latest version of JavaScript through syntax transformers.
  3. Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript.

8. Differentiate between Library & Framework?

    Library -
  1. It is a collection of functions -In case of library the Execution of code will be decided by the developers Means developers are in charge of the flow of the whole application.
  2. We are choosing when and where to call the library.
  3. In case of library its developers duty to design the structure.
  4. Library follows View model.

    Framework -
  1. Framework is a collection of multiple other libraries.
  2. In case of framework the execution is already defined or decided.
  3. The framework is in charge of the flow of the whole application.
  4. It provides some places for we have to plug in our code, but it calls the code you plugged in as needed.
  5. Framework provides you a structure in which we just put down the code our functionality. It follows MVC structure (model view controller)

9. Named export and Default export?

  1. Whenever we want to multiple export inside single file then we use named export bcz default export allow only one export inside any file.
  2. If we want named export then just put export keyword before any function/object/class component.
  3. While importing in case of named export we enclose inside curly braces bcs we can import multiple variable form single file.
  4. But in case of default export we do not need to enclose inside curly brace while importing bcs it is only one export.

10. Differentiate between Class and Functional Components?

Class Components -

  1. A class component requires you to extend from React. Component and create a render function which returns a React element.
  2. It must have the render() method returning JSX (which is syntactically similar to HTML)
  3. Also known as Stateful components because they implement logic and state.
  4. React lifecycle methods can be used inside class components (for example, componentDidMount).
  5. It requires different syntax inside a class component to implement hooks. 
                    example -
                constructor(props){
                super(props);
                this.state = {name:''}
                }
  6. Constructor are used as it needs to store state.

Functional Components -

  1. A functional component is just a plain JavaScript function that accepts props as an argument and returns a React element.
  2. There is no render method used in functional components.
  3. Also known as Stateless components as they simply accept data and display them in some form, that they are mainly responsible for rendering UI.
  4. React lifecycle methods (for example, componentDidMount) cannot be used in functional components.
  5. Hooks can be easily used in functional components to make them Stateful. 
                example -
            const [name,SetName]= React.useState('')
  6. Constructors are not used.

11. Differentiate between stateful and stateless components?

Stateful Components -

  1. Stores info about component’s state change in memory.
  2. Have authority to change state.
  3. Contains the knowledge of past, current and possible future changes in state.
  4. Stateless components notify them about the requirement of the state change, then they send down the props to them.

Stateless Components -

  1. Calculates the internal state of the components.
  2. Do not have the authority to change state.
  3. Contains no knowledge of past, current and possible future state changes.
  4. They receive the props from the Stateful components and treat them as callback functions.

12. What is react props?

    We know that the react is all about the component and that all component are connected to each others like in parent-child / sibling relations but if we want to communicate/pass data with each other then how it is passed then there is props comes into picture so props are used to pass data from parent component to child component.

    Props -

    1. Props are arguments passed into React components.
    2. Props stand for "Properties." They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes.
    3. Props are passed to components via HTML attributes.
    4. Props stands for properties.
    5. React Props are like function arguments in JavaScript and attributes in HTML.

13. What is react state?

    1. The state is an updatable structure that is used to contain data or information about the component.
    2. The state in a component can change over time. The change in state over time can happen as a response to user action or system event.
    3. A component with the state is known as stateful components.
    4. It is the heart of the react component which determines the behavior of the component and how it will render.
    5. They are also responsible for making a component dynamic and interactive.
    6. It can be update by using the setState() method.

14. What is react life cycle & its methods?

    Lifecycle Methods ( Class Component )

    I. Mounting Phase -

    When an instance of a component is being created and inserted into the DOM.

    1. Constructor   [Only in mounting]   //initialize the state & bind the event

    - A special type of function that will get called whenever a new component is created.
    - Used to initialize states & Binding events.
    - Not perform, Http req.

    2. static getDerivedStateFromProps   [rarely used]

    - When the state of component depends on change in props.
    - set the state.
    - Not perform, Http req.

    3. render

    - Only Required Method.
    - Return JSX.
    - Children component Lifecycle methods also get execute.
    - Not perform, Http req.

    4. componentDidMount   [Only in mounting]

    - Invoked immediately after a component and its child components have been rendered to DOM.
    - Perform any AJAX call to load data.

    II. Updating Phase -

    When a component is being re-render as a result of changes to either its props or state.

    1. static getDerivedStateFromProps

    - Method is called every time a component is re-rendered.
    - set the state
    - Not perform, Http req.

    2. shouldComponentUpdate

    - Dictates if the component should re-render or not.
    - Performance Optimization
    - Not perform, Http req.

    3. render

    - Only Required Method
    - Return JSX
    - Not perform, Http req.

    4. getSnapshotBeforeUpdate()   [Rarely Used]

    - Called right before the changes from the virtual DOM are to be reflected in the DOM.
    - Capture some Information From DOM.

    5. componentDidUpdate()

    - called after the render is finished in the re-render cycles.

    III. Unmounting Phase   ( LAST WISH ) -

    When a component is being removed from the DOM.

    1. componentWillUnmount

    - Method is invoked immediately before a component is unmounted and destroyed.
    - Cancelling any network req., also invalidating timers.
    - Do Not Call The SetState Method.

14. What is react router & need of react router?

React Router -

  1. Routing is a process in which a user is directed to different pages based on their action or request. ReactJS Router is mainly used for developing Single Page Web Applications. React Router is used to define multiple routes in the application.
  2. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular route.
  3. React Router is a standard library system built on top of the React and used to create routing in the React application using React Router Package.
  4. It provides the synchronous URL on the browser with data that will be displayed on the web page. It maintains the standard structure and behavior of the application and mainly used for developing single page web applications.

Need of React Router -

  1. React Router plays an important role to display multiple views in a single page application. Without React Router, it is not possible to display multiple views in React applications.
  2. Most of the social media websites like Facebook, Instagram uses React Router for rendering multiple views.