• Redux is one of the most trending libraries for front-end development in today’s marketplace.
• There are three principles in redux:
  • Single source of truth
  • State is read-only
  • Changes are made with pure functions

Single source of truth:

• The entire application is stored in an object/ state tree within a single store.
• It debugs or inspects the application and easier to keep track of changes over time.
• It has been traditionally difficult to implement – Undo/Redo.
• If all of your states is stored in a single tree, it can be suddenly trivial to implement.

For example,

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

State is read-only:

• The only way to change the state is to emit an action, an object describing what happened.
• It ensures that neither the views nor the network callbacks will ever write directly to the state.
• All changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for.
• The minimal representation of data is just like state, the action is the minimal representation of the change to that data.

For example,

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

Changes are made with pure functions:

• To specify how the state tree is transformed by actions, you write pure reducers.
• Pure functions are those whose return value depends solely on the values of their arguments.
• Reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.

For example,

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)

• We pass a prop with another component with the help of all the components that come between, this method is known as prop drilling.
• Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level.
• We refer prop drilling to the process of sending props from a higher-level component to a lower-level component.

For example,

  import React, { useState } from "react";
  
function Parent() {
  const [fName, setfName] = useState("firstName");
  const [lName, setlName] = useState("LastName");
  return (
    <>
      <div>This is a Parent component</div>
      <br />
      <ChildA fName={fName} lName={lName} />
    </>
  );
}
  
function ChildA({ fName, lName }) {
  return (
    <>
      This is ChildA Component.
      <br />
      <ChildB fName={fName} lName={lName} />
    </>
  );
}
  
function ChildB({ fName, lName }) {
  return (
    <>
      This is ChildB Component.
      <br />
      <ChildC fName={fName} lName={lName} />
    </>
  );
}
  
function ChildC({ fName, lName }) {
  return (
    <>
      This is ChildC component.
      <br />
      <h3> Data from Parent component is as follows:</h3>
      <h4>{fName}</h4>
      <h4>{lName}</h4>
    </>
  );
}
  
export default Parent;

Output:

• They are more of a brief syntax for writing the function expression. It is also known as ‘fat arrow ‘(=>) the functions.
• This keyword represented the object that called the function, which could be the window, the document, a button or whatever in a regular function.
• It allows to bind the context of the components properly since in ES6 auto binding is not available by default.
• While working with the higher-order functions, Arrow functions are most useful.
• This keyword always represents the object that defined the arrow function in arrow function.

For example, in regular functions:

class Header {
  constructor() {
    this.color = "Blue";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

For example, in Arrow functions:

class Header {
  constructor() {
    this.color = "Blue";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

For Example,

// using refs

class App extends React.Component {

 constructor(){

  super();

  this.state = { sayings: ""};

 }

 update(e){

  this.setState({ sayings: this.refs.anything.value});

 }

 render(){

  return (

   <div>

    Welcome to Kaashiv <input type="text" ref="anything"

      onChange = {this.update.bind(this)}/>

   <br/>

   <em>{this.state.sayings}</em>

  </div>

  );

 }

}

 ReactDOM.render(< App />, document.getElementById('root'));

 

 Output:

Functional Components

• Functional components are simply JS functions.
• In React we can create Functional Component by writing a JS function.
• To create React app efficient, we use functional component only when we are sure that our component does not require to interact with any other components.
• It does not require data from other components.

For example,

const Democomponent=()=>

    {

            return <h1>Welcome to Kaashiv!</h1>;

    }

Class Components

• The class components are much like the functional component but has a few additional capabilities that makes class component a little more complicated than the functional components.
• The class components can work with each other where functional components are not aware of the other components in your program.
• From one class component to other class components, we can pass the data.
• In React we use JavaScript ES6 classes to create class-based components.

For example,

class Democomponent extends React.Component
   {
       render(){
             return <h1>Welcome to Kaashiv!</h1>;
      }
  }

• It is an object which exposes a number of top level APIs to interact with the browser DOM.
• It provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page.
• Most of your components should not need to use this module.
• It consists of following methods:
  • render ()
  • findDOMNode ()
  • unmountComponentAtNode ()
  • create Portal ()
  • hydrate ()

render ()

• It is used to render a single React Component or several Components wrapped together in a Component or a div element.
• In ReactDom it is one of the most important methods.
• This function uses the efficient methods of React for updating the DOM by being able to change only a subtree, efficient diff methods, etc.
• Element, Container, Callback are three parameters used in this method.

Syntax:

findDOMNode ()

• It is used to get the DOM node where a particular React component was rendered.
• The following method can be done by adding a ref attribute to each component itself and it is used rarely in ReactDOM.
• It is also useful for reading values out of the DOM, such as form field values and performing DOM measurements.
• A single parameter component that expects a React Component to be searched in the Browser DOM.

Syntax:

unmountComponentAtNode ()

• It is used to unmount or remove the React Component that was rendered to a particular container.
• It is better to remove the component, making the web page more efficient.
• A single parameter container which expects the DOM container from which the React component has to be removed.

Syntax:

create Portal ()

• It is used to create a portal and provide a way to render children into a DOM node that exists outside the hierarchy of the DOM component.
• It allows us to render a component into a DOM node that resides outside the current DOM hierarchy of the parent component.
• Child, Container are the two parameters used in this method.

Syntax:

hydrate ()

• It is equivalent to the render () method, but is implemented while using server-side rendering.
• Element, Container, Callback are the three parameters used in this method.

Syntax:

]]> https://www.wikitechy.com/interview-questions/reactjs/what-is-react-dom/feed/ 0 https://www.wikitechy.com/interview-questions/reactjs/what-is-react-router/ https://www.wikitechy.com/interview-questions/reactjs/what-is-react-router/#respond Thu, 24 Mar 2022 12:15:10 +0000 https://www.wikitechy.com/interview-questions/?p=3991

• The standard library used for routing in React refers to React Router.
• In react, it permits us to build a single-page web application with navigation without even refreshing the page when the user navigates.
• It also allows changing the browser URL and will keep the user interface in sync with the URL.
• The component structure for calling the components, using which appropriate information, can be shown in React Router.
• Any other compatible routing library would also work with React.
• In react-router there are four major components:
  • Browser Router
  • Routes
  • Route
  • Link

For example(1),

Comments for React Components:

• We can write comments in React using the double forward-slash // or the asterisk format /* */, similar to regular JavaScript.

import React, { Component } from 'react';
  
// This is a comment
  
class App extends Component {
  
    /* This is 
    also a comment*/
    render() {
        return (
            <div>
                <h1>Welcome to Kaashiv</h1>
            </div>
        );
    }
}
  
export default App;

Output :

For example(2),

In example(1) does not work when we want to comment on things inside the render block. we use JSX inside the render block and must use the multi-line comments in curly braces {/* */} .

import React, { Component } from 'react';
  
class App extends Component {
    render() {
        return (      
            <div>
                // This is not a valid comment
                /* Neither is this */
  
                { /* THIS ONE IS A VALID COMMENT */ }
}
                  
                <h1>Welcome to Kaashiv</h1>
            </div>
        );
    }
}
  
export default App; 

Output:

For example(3),

We must remember, that even though JSX gets rendered just like normal HTML. It is actually a syntax extension to JavaScript. So, using <!– –> as we did with HTML and XML will not work.

import React, { Component } from 'react';
  
class App extends Component {
    render() {
        return (     
            <div>
                <!-- This is not a valid comment -->
                  
                {/* THIS ONE IS A VALID COMMENT */}
                  
                <h1>Welcome to Kaashiv</h1>
            </div>
        );
    }
}
  
export default App;

Output:

• It is an application architecture that Facebook makes use of internally for constructing the client-side web application with React .
• It is a programming concept, where the data is a Unidirectional Data Flow model.
• The project has dynamic data, where it is useful.
• We need to maintain the data updated in an effective
• The runtime errors become reduced.

• In this application, there are four major roles:
  • Action
  • Dispatcher
  • Store
  • View

Action:

• In this creator an action from method parameter,assign it a type and then provide to a dispatcher.

Dispatcher:

• It sends every action to all stores via callbacks that have registered with it.

Store:

• It updates themselves in response to an action ,emit the change event to alert the controller view.

View:

• It retrieves new data from the stores and provides the new data to their descendants in the component tree.

]]> https://www.wikitechy.com/interview-questions/reactjs/what-is-flux/feed/ 0 https://www.wikitechy.com/interview-questions/reactjs/what-is-virtual-dom/ https://www.wikitechy.com/interview-questions/reactjs/what-is-virtual-dom/#respond Tue, 22 Mar 2022 06:51:48 +0000 https://www.wikitechy.com/interview-questions/?p=3969

Why do we need a virtual DOM ?

• In our client-side application has a super complex structure, which will result in a complicated DOM tree.
• Manipulating DOM at once can without problems result in overall performance.

For example, let’s take this simple HTML document with an unordered list one list item.

<!doctype html>
<html lang="en">
 <head></head>

 <body>
    <ul class="list">
        <li class="list__item">List item</li>
    </ul>
  </body>
</html>

This document can be represented as the following DOM tree.

We need to adjust the content of the first list item to “List item one” and also add a 2nd listing object. we will need use the DOM APIs to find the elements we need to replace, create the new elements, upload attributes and content, then finally replace the DOM elements themselves.

const listItemOne = document.getElementsByClassName("list__item")[0];
listItemOne.textContent = "List item one";

const list = document.getElementsByClassName("list")[0];
const listItemTwo = document.createElement("li");
listItemTwo.classList.add("list__item");
listItemTwo.textContent = "List item two";
list.appendChild(listItemTwo);

Key Features of AngularJS:

• Observables are just a few of Angular’s highlights and Built-in support for AJAX, HTTP.
• Inline with current technologies.
• Error-handling support has been improved.
• Local CSS / shadow DOM.
• Typescript is time-saving.
• Validation and forms.

Key Features of ReactJS:

• It is  ability to use third-party libraries.
• Saving the time.
• Simplicity and Composability.
• lightning-fast speed and Improved user experience.
• More rapid development
• One-directional data binding provides code stability
• Reacts the component.

• It is an updatable structure that is used to contain data or information about the component and can change over time.
• State Can be modified using this.setState. State can be asynchronous
• The component can be directly accessed or modified inside the component.
• It is kept as simple as possible.
• It represents the component’s local state or information.

For Example,

class Test extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            name: "kaashiv"    
        };  
    }    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.name}</p>      
            </div>    
        );  
    }
}

Props:

• In UI that components in React are used again and again.
• In the component, we need to change the content inside.
• It is an object which stores the value of attributes of a tag and works similarly to the HTML attributes.
• From one component to other components, It allows the passing of data.
• While inside the component we cannot modify the props, because they are immutable.
• They are used to passing data between React components.

For Example,

class ParentComponent extends Component {    
    render() {    
        return (        
            <ChildComponent name="Second Child" />    
        );  
    }
}

const ChildComponent = (props) => {    
    return <p>{props.name}</p>; 

Difference between State and Props :

Uses of Redux :

• React Redux is the official UI bindings for react Application.
• It is stored up to date with any API modifications to make certain that your React additives behave as expected.
• It Implements Performance Optimizations For You.

Store :

• The entire state of your application lists where placed in a store.
• In Redux. It is like a brain responsible for all moving parts.
• It has a dispatch function and then manages the status of the application

Action :

• Action is sent or dispatched from the view which are payloads that can be read by Reducers.
• It is a natural object created to store the facts of the user’s event.
• It consists of information along with type of action, time of occurrence, location of occurrence, its coordinates, and which state it aims to change.

Reducer :

• It updates the store via the state accordingly and read the payloads from the actions.
• At initial state, it is a pure function to return a new state.

For example:

import React, { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("blue");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("yellow")}
      >Yellow</button>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("orange")}
      >Orange</button>
      <button
        type="button"
        onClick={() => setColor("violet")}
      >Violet</button>
    </>
  );
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

We must import Hooks from react. The useState is used to track the application state.

Rules of Hooks:

• Call Hooks from React function components.
• Call Hooks from Top level.
• It cannot be conditional.

                 Class component  

Functional component  Class-based Components uses ES6 class syntax. Functional Components are simpler comparing to class-based functions.

  The lifecycle methods can be used. Functional Components mainly focuses on the UI of the application, not on the behavior. More code to write. Easy to write. Used for presenting static data. Used for dynamic source of data. Can’t handle fetching data. Handles any data that might change. It must have a render() method. It doesn’t have a render() method. Here,React lifecycle methods (like componentDidMount, etc.) are used React hooks are there to be as a better alternative to the traditional React lifecycle methods. For e.g:

const [name,SetName]= React.useState(‘ ‘) For e.g:

constructor(props) {

super(props);

this.state = {name: ‘ ‘}

}

  In functional components to make them Stateful, Hooks can be easily used. In class component to implement hooks,It requires different syntax.

Let’s see how JSX works:

 Create an element without using JSX.

const text = React.createElement('p', {}, 'Welcome to kaashiv');

const container = React.createElement('div','{}',text );

ReactDOM.render(container,rootElement);

 Create an element using JSX:

const container = (

<div>

  <p>Welcome to kaashiv</p>

</div>

);

ReactDOM.render(container,rootElement);

]]> https://www.wikitechy.com/interview-questions/reactjs/what-is-jsx/feed/ 0 https://www.wikitechy.com/interview-questions/reactjs/what-is-the-difference-between-element-and-component/ https://www.wikitechy.com/interview-questions/reactjs/what-is-the-difference-between-element-and-component/#respond Mon, 21 Mar 2022 09:49:20 +0000 https://www.wikitechy.com/interview-questions/?p=3950  

 Element  

Component It is an object describing what you would like to project on the screen in terms of the DOM nodes or other components. It is a function or class that accepts an input and returns a React element.  

It contains other elements in its props.  

It can be a class with a render() method.  

It describes what we want to see on the screen  

It is a template. A blueprint. A global definition.  

It is an immutable description object and you can not apply any methods on it  

It has to keep references to its DOM nodes and to the instances of the child components.  

There is no any method used.  

The lifecycle method is used for each element.  

They are immutable i,e once created cannot be changed.  

The state in a component is mutable.  

React Hooks cannot be used with elements as elements are immutable.  

React hooks can be used with both functional and class components  

Elements are faster.  

Components are slower.  

It is an object representation of a DOM node.  

It is an object representation of the DOM tree.  

e.g,
<button class=”white”> </button>

  e.g,

const LogIn = () => (

<div>

<p> Login </p>

<button> Continue </button>

<button color = “orange”> Cancel </button>

</div>

);

For example in Passing props

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    console.log(this.props) // prints { name: 'bharath', age: 23}
  }
}

For example in Not passing props

class MyComponent extends React.Component {
  constructor(props) {
    super()

    console.log(this.props) // prints undefined

    // but props parameter is still available
    console.log(props) // prints { name: ' bharath ', age: 23 }
  }

  render() {
    // no difference outside constructor
    console.log(this.props) // prints { name: ' bharath ', age: 23 }
  }
}

• In The above code snippets shows that this.props is different only within the constructor.
• It would be the same outside the constructor.

Advantages of React

• Makes JavaScript coding easier.
• Template designing made easy.
• Provides amazing developer tools.
• Reusable Components.
• SEO Friendly.

Disadvantages of React

• JSX as a barrier.
• Lack of Documentation.
• Poor Documentation.
• It Covers only the UI Layers of the app and nothing else.

Features of React

Jsx :

• JSX is a preferable choice for many web developers.
• It makes the syntax just like HTML and is used to create React components by developers.
• It is a syntax extension to JavaScript.
• It is super easy for developers to write the building blocks.

  Virtual DOM :

• In this object is a perfect description of the original DOM object
• It will modify only that object in real DOM instead of updating whole objects.
• It compares the difference between the new DOM and previous DOM representation.
• It will reduces the time and cost taken for development.

Performance :

• React divides the complex user interface into unique elements.
• It increase the development time, multiple users can work on each element simultaneously.
• It will perform efficiently.

One-way Data binding :

• It provides good control throughout the application.
• This gives better control over it.
• It is designed to the extent that it can support One-way data binding or Unidirectional dataflow.

Declarative UI :

• It is the best for creating engaging and interactive user interfaces for mobile.
• It will generate a simple view for each state of the application
• In this feature makes React code more readable and easier to fix bugs.

Components :

• Components are the heart and soul of React
• The applications of ReactsJS are created with multiple components.
• React JS components play a huge part in deciding the app visuals and interactions.
• It is made up of several components.