Search

What Is a React Component?

React is one of the most popular JavaScript libraries for building user interfaces. If you are thinking of getting into front-end development or web development, then learning React will be a good way to start. In this blog you are going to learn basic concepts in React such as components and their types, JSX syntax and props. Let’s start with JSX. What is JSX? Soon after installing a React project, if you open App.js in your favourite editor you will observe that a JavaScript function returns some HTML code. It is called JSX(JavaScript XML). This is a valid and widely accepted syntax extension to JavaScript. It is recommended to use it to describe what the UI should look like.  In frontend-related projects, we keep HTML, CSS, and JavaScript code in separate files. However, React works a bit differently. In React we don’t create HTML files because JSX allows us to write HTML and JavaScript combined in the same file. But CSS needs to be separated to a new file as shown in the figure (App.css). Why JSX? Within JSX we can add JavaScript(logic, functions, variables etc) as well by using curly braces { } inside the HTML as shown in the figure. We can assign HTML tags to JavaScript variables: Code:  var name = <p>React</p>; Here, we have assigned HTML to name variable. You can return HTML conditionally (such as if-else cases): Code:function App() {  var condition = true;  if (condition) {  return <p>true</p>;  } else {  return <p>false</p>;  }  } Read more about JSX hereThere are some differences as compared to HTML: Some attributes like ‘class’ become ‘className’ (because class refers to JavaScript classes), ‘tabindex’ becomes ‘tabIndex’ and should be written in Camel Case. We can’t return more than one HTML element at once, so make sure to wrap them inside a parent tag. Code:return (   <div> <p>Hello</p> <p>World</p> </div> )What is a Component? A component is an independent, reusable bit of code which divides the UI into smaller pieces. For example, if we were building the UI of React website using Reactjs we can break its UI into smaller parts as shown in the figure.Instead of building the whole UI under one single file like HTML, we can divide all the sections (marked with red) into smaller independent pieces. In other words, these are components. Each component will go into its own JavaScript file. In React we have two types of components: functional and class. Let's look at each type of component in more detail. But before that, let’s gain an understanding of extraction of components. Extracting Components As you know, everything in React is a component. Each component returns some HTML but we can return only a single HTML element; inside which we can write many child elements as we have seen in the examples. Instead of writing all the code in a single file we can split our app into multiple components. We can then extract the code which is used for some unique purpose into a separate component and use that component wherever we want in our app, instead of rewriting and duplicating the code. In the following examples we have already extracted components into HelloWorld.js: For rendering the title  Description.js: for rendering the description Now I can use both the components in any place inside the app without duplicating the code. This is called extracting and reusing components What are Functional Components? The first, most important and recommended component type in React is a functional component. A functional component is basically a JavaScript function that returns a React element (JSX).  Functional components start with function keyword. Code:function HelloWorld() {  return <h1>Hello world</h1>;  }Alternatively, you can also create a functional component with the arrow function syntax(ES6).Code:  const HelloWorld = () => {  return <h1>Hello world</h1>;  };You need to export the component in order to use it somewhere else. Code: function HelloWorld() {  return <h1>Hello World</h1>;  }  export default HelloWorld; As HelloWorld is exported here, we can import this component into another file (which will be App.js in our case) and use it as shown below. Code:import HelloWorld from "./HelloWorld";  const App = () => {  return (  <div className="App">  <header className="App-header">  <HelloWorld />  </header>  </div>  );  };  export default App;In short, a functional component is a JavaScript function or ES6 function which takes props as arguments and returns a JSX. Components should always start with a capital letter. What are Class Components? Another type of component is a class component. Just as we have functions, we also have classes in JavaScript. Class components are ES6 classes that return JSX. The same  HelloWorld function can be converted to a class component. Class components start with class keyword that extends the Component constructor from React and has a render method which returns a JSX. Code: class HelloWorld extends React.Component {  render() {  return <h1>Hello World</h1>;  }  } What are the uses of class components? Apart from returning the JSX, sometimes we have a situation where we need to manage some data inside the components; which makes the components more dynamic and makes our application faster and more user friendly. This data is called state.  We used to use class components in order to manage the state. In the older versions of React (before version 16.8), it was not possible to use state inside functional components. Apart from managing the state we use class components to perform some additional operations, like life-cycle methods.  To summarise, a class component is an ES6 class which extends a React.Component. It uses render method to return a JSX. It accepts props (inside constructor) if necessary. This has changed with the introduction of React Hooks, and now we can also manage state and perform life cycle methods inside functional components with hooks.  What are Props? A Prop is a way that components communicate. React uses props to transfer data from one component to another component. But remember that props only transport data in a one-way flow (only from parent to child components). It is not possible for props to pass data from a child to parent, or to components at the same level. Now let’s go back to our App component and pass props from an App to its child (HelloWorld.js in our case).  First, we need to define a prop on the HelloWorld Component and assign a value to it. Code:import HelloWorld from "./HelloWorld"; const App = () => {  return (  <div className="App">  <header className="App-header">  <HelloWorld title="Hello World" />  </header>  </div>  );  }; Here we passed title as a prop to HelloWorld component and gave it a value of “Hello World” which is a string. Props are custom values and they also make components more dynamic.  Since the HelloWorld component is the child here, we need to define props on its parent (App), so we can pass the values and get the result simply by accessing the prop title in the HelloWorld component as shown below. Code:function HelloWorld(props) {  return <h1>{props.title}</h1>;  }  export default HelloWorld; If you save the files and start the app and look at the browser, you will find HelloWorld on the screen as shown below. Now we have made the HelloWorld component more dynamic by passing our title as a prop to the component. Let’s see how we made it dynamic. We can use HelloWorld component more than once in our App component but with a different value than our title prop, as shown below. Code:import HelloWorld from "./HelloWorld";  const App = () => {  return (  <div className="App">  <header className="App-header">  <HelloWorld title="Hello World" />  <HelloWorld title="Hello India" />  <HelloWorld title="Hello America" />  <HelloWorld title="Hello China" />  </header>  </div>  );  }; Now if you save the files and reload the browser, the screen is shown as below.Now we are outputting different titles from the same component (HelloWorld.js) which makes the component Dynamic. We can do the same using class components as well. Now let’s change HelloWorld.js into a class component which accepts props. We can achieve that by changing the code as shown below. Code:  import React from "react";   class HelloWorld extends React.Component {  constructor(props) {  super(props);  }  render() {  return <h1>{this.props.title}</h1>;  }  }   export default HelloWorld;Now when you save it, you will find no change in the output you see on the screen. But this time we are using class components. Note: We can access props directly upon this keyword in class components (this.props.title) and there is no need of a constructor. It has been added just for the reference, and we will learn about it next. It's important to note that props are Read Only; that is, we cannot change the value of the props inside the child components. We can only use the props as shown in the example without changing their value. What is a Constructor? In JavaScript the constructor is a method used to initialize an object's state in a class. It is automatically called during the creation of an object in a class.  The concept of a constructor is the same in React. The constructor in a React component is called before the component is mounted. We use that to define a state object inside a class component. We can change our existing class component to use state and props by changing the code as shown below. Code:import React from "react";  class HelloWorld extends React.Component {  constructor(props) {  super(props);  this.state = {  header: props.title,  };  }  render() {  return <h1>{this.state.header}</h1>;  }  } Now if you save you will find no change in the output you see on the screen. But this time we are using state and props inside the class component. Sometimes when working with React, people get carried away and create too many components. This leads to deeply nested structures which make it difficult to pass props all the way down. This can be solved to an extent by using 2 techniques. Composition Higher Order Components What is Composition? In React, a composition is a pattern of the component model. It's how we build components from other components, of varying complexity and specialization through props. Depending on how generalized these components are, they can be used in building many other components.  The Provider component which is provided by React Redux and Context API in React Hooks is the best example of a Composition. For Example:  Here we have App.js which passes title and description as props to HelloWorld.js component. Code:  import "./App.css";  import HelloWorld from "./HelloWorld";   const App = () => {  return (  <div className="App">  <header className="App-header">  <HelloWorld  title="Hello World"  description="Getting started with react"  />  </header>  </div>  );  };  export default App; HelloWorld.js uses title prop but it does not use the description; instead, it just sends it as a prop to its child component, that is Description.js.import Description from "./Description";  const HelloWorld = (props) => {  return (  <div>  <h1>{props.title}</h1>  <Description description={props.description} />  </div>  );  };  export default HelloWorld;Description.js actually uses a description which is passed from App.js. This is called prop drilling. This can be avoided by creating a context for our App and composing our app with the Provider component, which is provided by createContext hook, and then passing our required data as an object to the provider component as shown below. Code:import { createContext } from "react";  import "./App.css";  import HelloWorld from "./HelloWorld";  export const Context = createContext();   const App = () => {  return (  <Context.Provider  value={{  title: "Hello World",  description: "Getting started with react",  }}  >  <div className="App">  <header className="App-header">  <HelloWorld />  </header>  </div>  </Context.Provider>  );  };   export default App;Now we can pull out our data from the context using a useContext hook, and use the required data within the components instead of passing them as props, as shown below. Example: In HelloWorld.js we pull out the title as we only need that in this component. Code: import { useContext } from "react";  import Description from "./Description";  import { Context } from "./App";  const HelloWorld = () => {  const { title } = useContext(Context);  return (  <div>  <h1>{title}</h1>  <Description />  </div>  );  };  export default HelloWorld;Example:In HelloWorld.js we pull out the description as we only need that in this component. Code: import { useContext } from "react";  import { Context } from "./App";  const Description = (pops) => {  const { description } = useContext(Context);  return <p>{description}</p>;  };  export default Description; If you observe in the above code, the components are not taking any props but are still getting access to all the data, as we have Composed our App component with the Provider component from context. This helps in less prop drilling, and cleaner and readable code. Higher Order Components: Higher Order Components are JavaScript functions used for adding additional functionalities to the existing component. These functions are pure, which means they are receiving data and returning values according to that data. If the data changes, higher order functions are re-run with different data inputs. A Higher Order Component (HOC) is wrapping around a "normal" component and providing additional data input. It is actually a function that takes one component and returns another component that wraps the original one. Now let's try to rewrite the App we used all this time using Higher Order Components. Let's create a Higher Order Component  MyHOC.js which takes a component and returns a component as shown below. Code: const MyHOC = (Component) => (props) => {  const description = "Getting started with react";  return <Component description={description} {...props} />;  };  export default MyHOC; Here our Higher Order Component returns a component. However, by enhancing its properties in this case we pass additional data (description) as a prop, along with the props which are passed to the component. Now we can pass our HelloWorld.js to this Higher Order Component as shown below. Code:import MyHOC from "./MyHOC";  const HelloWorld = (props) => {  return (  <div>  <h1>{props.title}</h1>  <p>{props.description}</p>  </div>  );  };   export default MyHOC(HelloWorld);Here we wrap the Helloworld.js within the Higher Order Component that we just created; but we can use the description prop passed by MyHOC component which is a Higher Order Component. We can avoid prop drilling, and add many other properties to other components using Higher Order Components. What have you learnt? We have learnt about the two types of components in React; functional and class components. We learnt about extraction of components and how to reuse the components. After that, we went on to learn about props: how to pass them and use them inside the child components. We understood what prop drilling is, and have seen how to avoid prop drilling by using composing method and Higher Order Components.  If you are aspiring to be a React developer, these are basic concepts that you should thoroughly understand, before moving on to more complex code. 

What Is a React Component?

9K
What Is a React Component?

React is one of the most popular JavaScript libraries for building user interfaces. If you are thinking of getting into front-end development or web developmentthen learning React will be a good way to start. 

In this blog you are going to learn basic concepts in React such as components and their types, JSX syntax and props. Lets start with JSX. 

What is JSX? 

Soon after installing React project, if you open App.js in your favourite editor you will observe that a JavaScript function returns some HTML code. It is called JSX(JavaScript XML). What are the components in React JS

This is a valid and widely accepted syntax extension to JavaScript. It is recommended to use it to describe what the UI should look like 

In frontend-related projects, we keep HTML, CSS, and JavaScript code in separate files. However, React works a bit differently. In React we don’t create HTML files because JSX allows us to write HTML and JavaScript combined in the same file. But CSS needs to be separated to a new file as shown in the figure (App.css). 

Why JSX? 

  • Within JSX we can add JavaScript(logic, functions, variables etc) as well by using curly braces { } inside the HTML as shown in the figure. 

What are the components in React JS

  • We can assign HTML tags to JavaScript variables: 

Code: 

 var name = <p>React</p>;

What are the components in React JS

 Here, we have assigned HTML to name variable. 

  • You can return HTML conditionally (such as if-else cases): 

Code:

functionApp() { 
  var condition =true; 
  if (condition) { 
    return <p>true</p>; 
  } else { 
    return <p>false</p>; 
  } 
} 

What are the components in React JS

Read more about JSX here

There are some differences as compared to HTML: 

  • Some attributes like class become className (because class refers to JavaScript classes), tabindex becomes tabIndex and should be written in Camel Case. 
  • We can’t return more than one HTML element at once, so make sure to wrap them inside a parent tag. 

Code:

return ( 
    <div> 
      <p>Hello</p> 
      <p>World</p> 
    </div> 
)

What are the components in React JS

What is a Component? 

A component is an independent, reusable bit of code which divides the UI into smaller pieces. For example, if we were building the UI of React website using Reactjs we can break its UI into smaller parts as shown in the figure.

What is Component

Instead of building the whole UI under one single file like HTML, we can divide all the sections (marked with red) into smaller independent pieces. In other words, these are components. Each component will go into its own JavaScript file. 

In React we have two types of components: functional and class. Let's look at each type of component in more detail. But before that, lets gain an understanding of extraction of components. 

Extracting Components 

As you know, everything in React is a component. Each component returns some HTML but we can return only single HTML element; inside which we can write many child elements as we have seen in the examples. Instead of writing all the code in a single file we can split our app into multiple components. 

We can then extract the code which is used for some unique purpose into a separate component and use that component wherever we want in our app, instead of rewriting and duplicating the code. 

In the following examples we have already extracted components into 

  1. HelloWorld.js: For rendering the title  
  2. Description.js: for rendering the description 

Now I can use both the components in any place inside the app without duplicating the code. This is called extracting and reusing components 

What are Functional Components? 

The first, most important and recommended component type in React is functional component. A functional component is basically a JavaScript function that returns a React element (JSX).  

Functional components start with function keyword. 

Code:

functionHelloWorld() { 
  return <h1>Hello world</h1>; 
}

What are the components in React JS

Alternatively, you can also create a functional component with the arrow function syntax(ES6).

Code:  

constHelloWorld= () => { 
  return <h1>Hello world</h1>; 
};

What are the components in React JS

You need to export the component in order to use it somewhere else. 

Code: 

functionHelloWorld() { 
  return <h1>Hello World</h1>; 
} 
exportdefaultHelloWorld; 

What are the components in React JS

As HelloWorld is exported herewe can import this component into another file (which will be App.js in our case) and use it as shown below. 

Code:

import HelloWorld from"./HelloWorld"; 
constApp= () => { 
  return ( 
    <divclassName="App"> 
      <headerclassName="App-header"> 
        <HelloWorld /> 
      </header> 
    </div> 
  ); 
}; 
exportdefaultApp;

What are the components in React JS

In short, a functional component is a JavaScript function or ES6 function which takes props as arguments and returns a JSX. 

Components should always start with a capital letter. 

What are Class Components? 

Another type of component is a class component. Just as we have functionswe also have classes in JavaScriptClass components are ES6 classes that return JSX. The same  HelloWorld function can be converted to class component. 

Class components start with class keyword that extends the Component constructor from React and has a render method which returns a JSX. 

Code: 

classHelloWorldextendsReact.Component { 
  render() { 
    return <h1>Hello World</h1>; 
  } 
} 

What are class components

What are the uses of class components? 

Apart from returning the JSX, sometimes we have a situation where we need to manage some data inside the components; which makes the components more dynamic and makes our application faster and more user friendly. This data is called state 

We used to use class components in order to manage the stateIn the older versions of React (before version 16.8), it was not possible to use state inside functional components. 

Apart from managing the state we use class components to perform some additional operations, like life-cycle methods.  

To summarise, a class component is an ES6 class which extends a React.Component. It uses render method to return a JSX. It accepts props (inside constructor) if necessary. 

This has changed with the introduction of React Hooks, and now we can also manage state and perform life cycle methods inside functional components with hooks.  

What are Props? 

Prop is a way that components communicate. React uses props to transfer data from one component to another component. 

But remember that props only transport data in a one-way flow (only from parent to child components). It is not possible for props to pass data from child to parent, or to components at the same level. 

Now lets go back to our App component and pass props from an App to its child (HelloWorld.js in our case).  

First, we need to define a prop on the HelloWorld Component and assign a value to it. 

Code:

import HelloWorld from"./HelloWorld";
constApp= () => { 
  return ( 
    <divclassName="App"> 
      <headerclassName="App-header"> 
        <HelloWorldtitle="Hello World" /> 
      </header> 
    </div> 
  ); 
}; 

What are the components in React JS

Here we passed title as a prop to HelloWorld component and gave it a value of “Hello World” which is a string. 

Props are custom values and they also make components more dynamic.  

Since the HelloWorld component is the child here, we need to define props on its parent (App), so we can pass the values and get the result simply by accessing the prop title in the HelloWorld component as shown below. 

Code:

functionHelloWorld(props) { 
  return <h1>{props.title}</h1>; 
} 
exportdefaultHelloWorld; 

What are the components in React JS

If you save the files and start the app and look at the browser, you will find HelloWorld on the screen as shown below. What are the components in React JS

Now we have made the HelloWorld component more dynamic by passing our title as a prop to the component. Let’s see how we made it dynamic. 

We can use HelloWorld component more than once in our App component but with different value than our title prop, as shown below. 

Code:

import HelloWorld from"./HelloWorld"; 
constApp= () => { 
  return ( 
    <divclassName="App"> 
      <headerclassName="App-header"> 
        <HelloWorldtitle="Hello World" /> 
        <HelloWorldtitle="Hello India" /> 
        <HelloWorldtitle="Hello America" /> 
        <HelloWorldtitle="Hello China" /> 
      </header> 
    </div> 
  ); 
}; 

What are the components in React JS

Now if you save the files and reload the browser, the screen is shown as below.What are the components in React JS

Now we are outputting different titles from the same component (HelloWorld.js) which makes the component Dynamic. 

We can do the same using class components as well. Now lets change HelloWorld.js into class component which accepts props. We can achieve that by changing the code as shown below. 

Code:  

import React from"react";  
classHelloWorldextendsReact.Component { 
  constructor(props) { 
    super(props); 
  } 
  render() { 
    return <h1>{this.props.title}</h1>; 
  } 
}  
exportdefaultHelloWorld;

What are the components in React JS

Now when you save it, you will find no change in the output you see on the screen. But this time we are using class components. 

NoteWe can access props directly upon this keyword in class components (this.props.title) and there is no need of constructor. It has been added just for the reference, and we will learn about it next. 

It's important to note that props are Read Only; that is, we cannot change the value of the props inside the child components. We can only use the props as shown in the example without changing their value. 

What is Constructor? 

In JavaScript the constructor is a method used to initialize an object's state in a class. It is automatically called during the creation of an object in a class.  

The concept of a constructor is the same in React. The constructor in a React component is called before the component is mounted. We use that to define a state object inside a class component. 

We can change our existing class component to use state and props by changing the code as shown below. 

Code:

import React from"react"; 
classHelloWorldextendsReact.Component { 
  constructor(props) { 
    super(props); 
    this.state= { 
      header:props.title, 
    }; 
  } 
  render() { 
    return <h1>{this.state.header}</h1>; 
  } 
} 

What are the components in React JS

Now if you save you will find no change in the output you see on the screen. But this time we are using state and props inside the class component. 

Sometimes when working with React, people get carried away and create too many components. This leads to deeply nested structures which make it difficult to pass props all the way down. This can be solved to an extent by using 2 techniques. 

  1. Composition 
  2. Higher Order Components 

What is Composition? 

In React, a composition is a pattern of the component model. It's how we build components from other components, of varying complexity and specialization through props. Depending on how generalized these components are, they can be used in building many other components.  

The Provider component which is provided by React Redux and Context API in React Hooks is the best example of a Composition. 

For Example:  

Here we have App.js which passes title and description as props to HelloWorld.js component. 

Code:  

import"./App.css"; 
import HelloWorld from"./HelloWorld";  
constApp= () => { 
  return ( 
    <divclassName="App"> 
      <headerclassName="App-header"> 
        <HelloWorld 
          title="Hello World" 
          description="Getting started with react" 
        /> 
      </header> 
    </div> 
  ); 
}; 
exportdefaultApp; 

What are the components in React JS

HelloWorld.js uses title prop but it does not use the description; instead, it just sends it as a prop to its child component, that is Description.js.

import Description from"./Description"; 
constHelloWorld= (props) => { 
  return ( 
    <div> 
      <h1>{props.title}</h1> 
      <Descriptiondescription={props.description} /> 
    </div> 
  ); 
}; 
exportdefaultHelloWorld;

What are the components in React JS

Description.js actually uses description which is passed from App.js. This is called prop drilling. 

This can be avoided by creating a context for our App and composing our app with the Provider component, which is provided by createContext hookand then passing our required data as an object to the provider component as shown below. 

Code:

import{ createContext } from"react"; 
import"./App.css"; 
import HelloWorld from"./HelloWorld"; 
exportconstContext=createContext();  
constApp= () => { 
  return ( 
    <Context.Provider 
      value={{ 
        title:"Hello World", 
        description:"Getting started with react", 
      }} 
    > 
      <divclassName="App"> 
        <headerclassName="App-header"> 
          <HelloWorld /> 
        </header> 
      </div> 
    </Context.Provider> 
  ); 
};  
exportdefaultApp;

What are the components in React JS

Now we can pull out our data from the context using a useContext hook, and use the required data within the components instead of passing them as props, as shown below. 

Example: In HelloWorld.js we pull out the title as we only need that in this component. 

Code: 

import{ useContext } from"react"; 
import Description from"./Description"; 
import{ Context } from"./App"; 
constHelloWorld= () => { 
  const{ title } =useContext(Context); 
  return ( 
    <div> 
      <h1>{title}</h1> 
      <Description /> 
    </div> 
  ); 
}; 
exportdefaultHelloWorld;

What are the components in React JS

Example:In HelloWorld.js we pull out the description as we only need that in this component. 

Code: 

import{ useContext } from"react"; 
import{ Context } from"./App"; 
constDescription= (pops) => { 
  const{ description } =useContext(Context); 
  return <p>{description}</p>; 
}; 
exportdefaultDescription; 

What are the components in React JS

If you observe in the above code, the components are not taking any props but are still getting access to all the dataas we have Composed our App component with the Provider component from context. This helps in less prop drilling, and cleaner and readable code. 

Higher Order Components: 

Higher Order Components are JavaScript functions used for adding additional functionalities to the existing component. These functions are pure, which means they are receiving data and returning values according to that data. If the data changes, higher order functions are re-run with different data inputs. 

Higher Order Component (HOC) is wrapping around "normal" component and providing additional data input. It is actually a function that takes one component and returns another component that wraps the original one. 

Now let's try to rewrite the App we used all this time using Higher Order Components. 

Let's create a Higher Order Component  MyHOC.js which takes component and returns a component as shown below. 

Code: 

constMyHOC= (Component) => (props) => { 
  constdescription="Getting started with react"; 
  return <Componentdescription={description}{...props} />; 
}; 
exportdefaultMyHOC; 

What are the components in React JS

Here our Higher Order Component returns a component. However, by enhancing its properties in this case we pass additional data (description) as prop, along with the props which are passed to the component. 

Now we can pass our HelloWorld.js to this Higher Order Component as shown below. 

Code:

importMyHOCfrom"./MyHOC"; 
constHelloWorld= (props) => { 
  return ( 
    <div> 
      <h1>{props.title}</h1> 
      <p>{props.description}</p> 
    </div> 
  ); 
};  
exportdefaultMyHOC(HelloWorld);

What are the components in React JS?What are the components in React JS

Here we wrap the Helloworld.js within the Higher Order Component that we just created; but we can use the description prop passed by MyHOC component which is a Higher Order ComponentWe can avoid prop drilling, and add many other properties to other components using Higher Order Components. 

What have you learnt? 

We have learnt about the two types of components in React; functional and class components. We learnt about extraction of components and how to reuse the components. After that, we went on to learn about props: how to pass them and use them inside the child components. We understood what prop drilling is, and have seen how to avoid prop drilling by using composing method and Higher Order Components.  

If you are aspiring to be a React developer, these are basic concepts that you should thoroughly understand, before moving on to more complex code. 

KnowledgeHut

KnowledgeHut

Author

KnowledgeHut is an outcome-focused global ed-tech company. We help organizations and professionals unlock excellence through skills development. We offer training solutions under the people and process, data science, full-stack development, cybersecurity, future technologies and digital transformation verticals.
Website : https://www.knowledgehut.com

Join the Discussion

Your email address will not be published. Required fields are marked *

Suggested Blogs

Handling React Events - A Detailed Guide

Event handling essentially allows the user to interact with a webpage and do something specific when a certain event like a click or a hover happens. When the user interacts with the application, events are fired, for example, mouseover, key press, change event, and so on. The application must handle events and execute the code. In short, events are the actions to which javascript can respond.   The actions to which javascript can respond are called events. Handling events with react is  very similar to handling events in DOM elements. Below are some general events that you would see in and out when dealing with react based websites:  Clicking an element  Submitting a form Scrolling page Hovering an element  Loading a webpage Input field change User stroking a key Image loading Naming Events in React Handling events with react is very similar to handling events in DOM elements, although there are some syntactic differences.   React events are written in camelCase.   A function is passed as the event handler rather than string. The way to write events in html / DOM is below:        click me onclick is written in lower case in html as shown above and what action to take when this onclick event triggers is taken care of by handleClick.In React, events are named using camel case and you pass a function as event handler as shown below:  Like in a functional component, event is written like below:       click me   In class based component ,event is written like below        click me Defining Events:Events are normally used in combination with functions, and the function is not executed until the event occurs, and the combination of event, HTML element, and javascript function is called binding which means to map all three. Generic syntax is:      Example:  Create a button element and what happens when onClick event triggered is driven by the function which is func() shown below     click me Let’s see some of the event attributes:   onmouseover : The mouse is moved over an element onmouseup : The mouse button is released onmouseout : The mouse  is moved off an element onmousemove: The mouse is moved Onmousedown: mouse button is pressed  onload : A image is done loading onunload: Existing the page  onblur : Losing Focus  on element  onchange : Content of a field changes onclick: Clicking an object  ondblclick: double clicking an object  onfocus element getting a focus  Onkeydown: pushing a keyboard key Onkeyup: keyboard key is released Onkeypress: keyboard key is pressed  Onselect: text is selected These are some examples of events:                                         Events                               function testApp (){                        alert((“Hello Event”);                                                   test Clicked                  test double Clicked                     Synthetic Events When you specify an event in JSX, you are not directly dealing with regular DOM events, you are dealing with a react event type called a synthetic event.It's a simple wrapper for native event instances and every synthetic event created needs to be garbage-collected which can be resource intensive in terms of CPU. The synthetic event object has properties mentioned below:  Boolean isTrusted  DOMEvent nativeEvent number timeStamp   void preventDefault() number eventPhase Synthetic events provide an interface and reduce browser inconsistencies and the event contains required information for its propagation to work. Synthetic event is reused for performance reasons in the browser, A synthetic event is a cross-browser wrapper around the browser’s native event it has the same interface as the native event. Synthetic events are delegated to the document node. Therefore native events are triggered first and the events bubble up to document, after which the synthetic events are triggered. The synthetic event object will be reused and all the properties will be nullified after the event callback has been invoked and this is for performance reasons.The workflow of synthetic event in react is:    Element ---- > Event ---- > synthetic event  ---- > handler(e)                                |                                                      |                                |  _______  Component ________|  umber timeStamp The Basics of React Event Handling Let’s explore how to handle events in react and we will showcase the click event and how it holds good for other types of events. Let’s start with functional components by creating a  file as clickAppHandler.js.In this file let’s create a  functional component  as shown below                        Import React from ‘...react’                         function clickAppHandler() {                                function clickHandler() {                                        console.log(‘clicked’)                                         }                                  return (                                                                                  Click                                                                          )                         }                       export default clickAppHandler  When onClick event triggers clickHandler function is called as shown below and when you click the button console will print the string “clicked” After this you need the add a component in the app component. In our code above you can see on click we pass the function as event handler and you will notice that we haven't added parentheses as it becomes a function, and we do not want that and we want handler to be a function not a function call. When a new component is rendered its event handler functions are added to the mapping maintained by the react.When the event is triggered and it hits and DOM object ,react maps the event to the handler, if it matches it calls the handler. The event handling in react is declarative and the advantage of declarative way to handlers is that they are part of the User interface structure.  Let’s take a look at event handling in class components                       Import React, { Component } from ‘...react’                         class TestApp extends Component {                              clickHandler() {                                  console.log(“clicked”)                                }                                render(){                                      return(                                                                                     Click me                                                                                 )                                 }                            }                       export default TestApp You cannot return false to prevent default behaviour in React. You must call preventDefault explicitly.  In HTML it looks like below:    Click Output: It will print “Clicked”  And in React, like this:  function clickHandle(e) {       e.preventDefault();       console.log(“Handled”);   }  Click  Output : console will print “Handled”  There are some  event handlers triggered by an event in the bubbling phase which is the same as with the normal DOM API; simply attach a handler to an eventual parent of an element and any events triggered on that element will bubble to the parent as long as it's not stopped via stopPropagation along the way   Click me  Below are some of the event handlers triggered in the bubbling phase:  MouseEvents           onClick           onDrag          onDoubleClick Keyboard Events                    onKeyDown                    onKeyPress                    onKeyUp Focus Events                  onFocus   onBlur To capture an event handler for the capture phase, append capture to the event name. For example, instead of using onClick, use onClickCapture to handle the click event.  Capture event example:                  Click me    Additional ExamplesExample1                       Import React from ‘...react’                         function clickAppHandler() {                                function clickHandler() {                                        console.log(‘clicked’)                                         }                                  return (                                                                                  Click                                                                          )                         }                       export default clickAppHandler   Example2       This example is along with HTML in a single file                                                            Events                               function testApp (){                        alert((“Hello Event”);                                                   test Clicked                  test double Clicked                     Adding Events: Below example is how you add an event. Highlighted in bold                      Import React from ‘...react’                         function clickAppHandler() {                                function clickHandler() {                                        console.log(‘clicked’)                                         }                                  return (                                                                                  Click                                                                          )                         }                       export default clickAppHandler  Passing Arguments to Event HandlerThere are two ways arguments are passed to event handler  Arrow function                    this.handleClick(id,e)}>Click                onClick is the event                e is the event object                 id can be state or props or some data Bind method      Click  In this case event object is automatically passed In both methods e represents the react event and its passed after the ID as second argument,With an arrow function this event e is passed explicitly but with bind method its automatically passed.                                     Import React,{ Component } from “react”;                                         class TestApp extends Component {                                           state = {                                                       id: 2,                                                      Name: “TestApp Dummy”                                                };                                                             //arrow function                                                 handleClick = (id,e) => {                                                       console.log(id);                                                       console.log(e);                                                  };                                               handleArg = (e) => { this.handleClick(this.state.id,e);}                                                          render() {     return (                    TestApp,{this.state.name}            onClick={this.handleArg}>Display            );   }  }  The react event is an object and obtained from react. Instead of creating a separate function for passing argument, you can directly pass the anonymous arrow function as shown in the render function below:     render() {        return (                                                                                                       TestApp,{this.state.name}                                                {                           this.handleClick(this.state.id,e);                                                               }}>Display                                                                                                         );                                                 }                                            }    Output:   click on button  “TestApp Dummy “                   Let’s see only how bind method looks like in the render function    render() {                                         return (                                                                                                 TestApp,{this.state.name}                                                   Display                                                                                                       );                                                  }                                              } Output: this will display the h1 tag and when you click the button handleClick function gets invoked and the console will display id of the state object as shown above. Building a Practice to Thoroughly Understand Events This blog focuses on event handling, which in turn teaches about event handlers declared in JSX markup.This approach helps in tracking down the element mapped with events in an easy way.  We also learned how to handle multiple event handlers in a single element by using JSX attributes.we also learned about ways to bind event handler and  parameter values. Then we learned about synthetic events which are abstractions around native events. The best way you can retain this learning is by practicing more and tackling the complexities that may arise as you practice. You can find several tutorials on the internet or share your questions with us here. Happy learning! 
5355
Handling React Events - A Detailed Guide

Event handling essentially allows the user to inte... Read More

MongoDB Query Document Using Find() With Example

MongoDB's find() method selects documents from a collection or view and returns a cursor to those documents. There are two parameters in this formula: query and projection.Query – This is an optional parameter that specifies the criteria for selection. In simple terms, a query is what you want to search for within a collection.Projection – This is an optional parameter that specifies what should be returned if the query criteria are satisfied. In simple terms, it is a type of decision-making that is based on a set of criteria.MongoDB's Flexible SchemaA NoSQL database, which stands for "not only SQL," is a way of storing and retrieving data that is different from relational databases' traditional table structures (RDBMS).When storing large amounts of unstructured data with changing schemas, NoSQL databases are indeed a better option than RDBMS. Horizontal scaling properties of NoSQL databases allow them to store and process large amounts of data.These are intended for storing, retrieving, and managing document-oriented data, which is frequently stored in JSON format (JavaScript Object Notation). Document databases, unlike RDBMSs, have a flexible schema that is defined by the contents of the documents.MongoDB is one of the most widely used open-source NoSQL document databases. MongoDB is known as a 'schemaless' database because it does not impose a specific structure on documents in a collection.MongoDB is compatible with a number of popular programming languages. It also offers a high level of operational flexibility because it scales well horizontally, allowing data to be spread or 'sharded' across multiple commodity servers with the ability to add more servers as needed. MongoDB can be run on a variety of platforms, including developer laptops, private clouds, and public clouds.Querying documents using find()MongoDB queries are used to retrieve or fetch data from a MongoDB database. When running a query, you can use criteria or conditions to retrieve specific data from the database.The function db.collection is provided by MongoDB. find() is a function that retrieves documents from a MongoDB database.In MongoDB, the find method is used to retrieve a specific document from the MongoDB collection. In Mongo DB, there are a total of six methods for retrieving specific records.find()findAndModify()findOne()findOneAndDelete()findOneAndReplace()findOneAndUpdate()Syntax:find(query, projection)We can fetch a specific record using the Find method, which has two parameters. If these two parameters are omitted, the find method will return all of the documents in the MongoDB collection.Example:Consider an example of employees with the database of employee_id and employee_name and we will fetch the documents using find() method.First, create a database with the name “employees” with the following code:use employeesNow, create a collection “employee” with:db.createCollection("employee")In the next step we will insert the documents in the database:db.employee.insert([{employee_id: 101, employee_name: "Ishan"}, {employee_id: 102, employee_name: "Bhavesh"}, {employee_id: 103, employee_name: "Madan"}])Find all Documents:To get all the records in a collection, we need to use the find method with an empty parameter. In other words, when we need all the records, we will not use any parameters.db.employee.find()Output in Mongo ShellThe pretty() method can be used to display the results in a formatted manner.Syntax:db.COLLECTION_NAME.find().pretty()Let’s check our documents with pretty() method:Query FiltersWe will see examples of query operations using the db.collection.find() method in mongosh.We will use the employee collection in the employees database.db.employee.insert([{employee_id: 101, employee_name: "Ishan", age: 21, email_id: "ishanjain@gmail.com"}, {employee_id: 102, employee_name: "Bhavesh", age: 22, email_id: "bhaveshg@gmail.com"}, {employee_id: 103, employee_name: "Madan", age: 23, email_id: "madan@gmail.com"}])As we have seen earlier that to select all the documents in the database we pass an empty document as the query filter parameter to the find method.db.employee.find().pretty()Find the first document in a collection:db.employee.findOne()Find a document by ID:db.employee.findOne({_id : ObjectId("61d1ae0b56b92c20b423a5a7")})Find Documents that Match Query Criteriadb.employee.find({“age”: “22”})db.employee.find({"employee_name": "Madan"}).pretty()Sort Results by a Field:db.employee.find().sort({age: 1}).pretty()order by age, in ascending orderdb.employee.find().sort({age: -1}).pretty()order by age, in descending orderAND Conditions:A compound query can specify conditions for multiple fields in the documents in a collection. A logical AND conjunction connects the clauses of a compound query indirectly, allowing the query to select all documents in the collection that meet the specified conditions.In the following example, we will consider all the documents in the employee collection where employee_id equals 101 and age equals 21.db.employee.find({"employee_id": 101, "age": "21" }).pretty()Querying nested fieldsThe embedded or nested document feature in MongoDB is a useful feature. Embedded documents, also known as nested documents, are documents that contain other documents.You can simply embed a document inside another document in MongoDB. Documents are defined in the mongo shell using curly braces (), and field-value pairs are contained within these curly braces.Using curly braces, we can now embed or set another document inside these fields, which can include field-value pairs or another sub-document.Syntax:{ field: { field1: value1, field2: value2 } }Example:We have a database “nested” and in this database we have collection “nesteddoc”.The following documents will insert into the nesteddoc collection.db.nesteddoc.insertMany([ { "_id" : 1, "dept" : "A", "item" : { "sku" : "101", "color" : "red" }, "sizes" : [ "S", "M" ] }, { "_id" : 2, "dept" : "A", "item" : { "sku" : "102", "color" : "blue" }, "sizes" : [ "M", "L" ] }, { "_id" : 3, "dept" : "B", "item" : { "sku" : "103", "color" : "blue" }, "sizes" : "S" }, { "_id" : 4, "dept" : "A", "item" : { "sku" : "104", "color" : "black" }, "sizes" : [ "S" ] } ])Place the documents in the collection now. Also, take a look at the results:As a result, the nesteddoc collection contains four documents, each of which contains nested documents. The find() method can be used to access the collection's documents.db.nesteddoc.find()Specify Equality Condition:In this example, we will select the document from the nesteddoc query where dept equals “A”.db.nesteddoc.find({dept: "A"})Querying ArraysUse the query document {: } to specify an equality condition on an array, where is the exact array to match, including the order of the elements.The following query looks for all documents where the field tags value is an array with exactly two elements, "S" and "M," in the order specified:db.nesteddoc.find( { sizes: ["S", "M"] } )Use the $all operator to find an array that contains both the elements "S" and "M," regardless of order or other elements in the array:db.nested.find( { sizes: { $all: ["S", "M"] } } )Query an Array for an Element:The following example queries for all documents where size is an array that contains the string “S” as one of its elements:db.nesteddoc.find( { sizes: "S" } )Filter conditionsTo discuss the filter conditions, we will consider a situation that elaborates this. We will start by creating a collection with the name “products” and then add the documents to it.db.products.insertMany([ { _id: 1, item: { name: "ab", code: "123" }, qty: 15, tags: [ "A", "B", "C" ] }, { _id: 2, item: { name: "cd", code: "123" }, qty: 20, tags: [ "B" ] }, { _id: 3, item: { name: "ij", code: "456" }, qty: 25, tags: [ "A", "B" ] }, { _id: 4, item: { name: "xy", code: "456" }, qty: 30, tags: [ "B", "A" ] }, { _id: 5, item: { name: "mn", code: "000" }, qty: 20, tags: [ [ "A", "B" ], "C" ] }])To check the documents, use db.products.find():$gt$gt selects documents with a field value greater than (or equal to) the specified value.db.products.find( { qty: { $gt: “20” } } )$gte:$gte finds documents in which a field's value is greater than or equal to (i.e. >=) a specified value (e.g. value.)db.products.find( { qty: { $gte: 20 } } )$lt:$lt selects documents whose field value is less than (or equal to) the specified value.db.products.find( { qty: { $lt: 25 } } )$lte:$lte selects documents in which the field's value is less than or equal to (i.e. =) the specified value.db.products.find( { qty: { $lte: 20 } } )Query an Array by Array Length:To find arrays with a specific number of elements, use the $size operator. For example, the following selects documents with two elements in the array.db.products.find( { "tags": {$size: 2} } )ProjectionIn MongoDB, projection refers to selecting only the data that is required rather than the entire document's data. If a document has five fields and you only want to show three of them, select only three of them.The find() method in MongoDB accepts a second optional parameter, which is a list of fields to retrieve, as explained in MongoDB Query Document. When you use the find() method in MongoDB, it displays all of a document's fields. To prevent this, create a list of fields with the values 1 or 0. The value 1 indicates that the field should be visible, while 0 indicates that it should be hidden.Syntax:db.COLLECTION_NAME.find({},{KEY:1})Example:We will consider the previous example of products collection. Run the below command on mongoshell to learn how projection works:db.products.find({},{"tags":1, _id:0})Keep in mind that the _id field is always displayed while executing the find() method; if you do not want this field to be displayed, set it to 0.Optimized FindingsTo retrieve a document from a MongoDB collection, use the Find method.Using the Find method, we can retrieve specific documents as well as the fields that we require. Other find methods can also be used to retrieve specific documents based on our needs.By inserting array elements into the query, we can retrieve specific elements or documents. To retrieve data for array elements from the collection in MongoDB, we can use multiple query operators.
6498
MongoDB Query Document Using Find() With Example

MongoDB's find() method selects documents from a c... Read More

Implementing MongoDb Map Reduce using Aggregation

Algorithms and applications in today's data-driven market collect data about people, processes, systems, and organisations 24 hours a day, seven days a week, resulting in massive amounts of data. The problem is figuring out how to process this massive amount of data efficiently without sacrificing valuable insights.What is Map Reduce? The MapReduce programming model comes to the rescue here. MapReduce, which was first used by Google to analyse its search results, has grown in popularity due to its ability to split and process terabytes of data in parallel, generating results faster. A (Key,value) pair is the basic unit of information in MapReduce. Before feeding the data to the MapReduce model, all types of structured and unstructured data must be translated to this basic unit. The MapReduce model, as the name implies, consists of two distinct routines: the Map-function and the Reduce-function.  MapReduce is a framework for handling parallelizable problems across huge files using a huge number of devices (nodes), which are collectively referred to as a cluster (if all nodes are on the same local network and use similar hardware) or a grid (if the nodes are shared across geographically and administratively distributed systems, and use more heterogeneous hardware).  When data stored in a filesystem (unstructured) or a database(structured) is processed, MapReduce can take advantage of data's locality, processing it close to where it's stored to reduce communication costs. Typically, a MapReduce framework (or system) consists of three operations: Map: Each worker node applies the map function to local data and saves the result to a temporary storage. Only one copy of the redundant input data is processed by a master node. Shuffle: worker nodes redistribute data based on output keys (produced by the map function), ensuring that all data associated with a single key is stored on the same worker node. Reduce: each group of output data is now processed in parallel by worker nodes, per key. This article will walk you through the Map-Reduce model's functionality step by step. Map Reduce in MongoDB The map-reduce operation has been deprecated since MongoDB 5.0. An aggregation pipeline outperforms a map-reduce operation in terms of performance and usability. Aggregation pipeline operators like $group, $merge, and others can be used to rewrite map-reduce operations. Starting with version 4.4, MongoDB provides the $accumulator and $function aggregation operators for map-reduce operations that require custom functionality. In JavaScript, use these operators to create custom aggregation expressions. The map and reduce functions are the two main functions here. As a result, the data is independently mapped and reduced in different spaces before being combined in the function and saved to the specified new collection. This mapReduce() function was designed to work with large data sets only. You can perform aggregation operations like max and avg on data using Map Reduce, which is similar to groupBy in SQL. It works independently and in parallel on data. Implementing Map Reduce with Mongosh (MongoDB Shell)  The db.collection.mapReduce() method in mongosh is a wrapper for the mapReduce command. The examples that follow make use of the db.collection.mapReduce(). Example: Create a collection ‘orders’ with these documents: db.orders.insertMany([     { _id: 1, cust_id: "Ishan Jain", ord_date: new Date("2021-11-01"), price: 25, items: [ { sku: "oranges", qty: 5, price: 2.5 }, { sku: "apples", qty: 5, price: 2.5 } ], status: "A" },     { _id: 2, cust_id: "Ishan Jain", ord_date: new Date("2021-11-08"), price: 70, items: [ { sku: "oranges", qty: 8, price: 2.5 }, { sku: "chocolates", qty: 5, price: 10 } ], status: "A" },     { _id: 3, cust_id: "Bhavesh Galav", ord_date: new Date("2021-11-08"), price: 50, items: [ { sku: "oranges", qty: 10, price: 2.5 }, { sku: "pears", qty: 10, price: 2.5 } ], status: "A" },     { _id: 4, cust_id: "Bhavesh Galav", ord_date: new Date("2021-11-18"), price: 25, items: [ { sku: "oranges", qty: 10, price: 2.5 } ], status: "A" },     { _id: 5, cust_id: "Bhavesh Galav", ord_date: new Date("2021-11-19"), price: 50, items: [ { sku: "chocolates", qty: 5, price: 10 } ], status: "A"},     { _id: 6, cust_id: "Madan Parmar", ord_date: new Date("2021-11-19"), price: 35, items: [ { sku: "carrots", qty: 10, price: 1.0 }, { sku: "apples", qty: 10, price: 2.5 } ], status: "A" },     { _id: 7, cust_id: "Madan Parmar", ord_date: new Date("2021-11-20"), price: 25, items: [ { sku: "oranges", qty: 10, price: 2.5 } ], status: "A" },     { _id: 8, cust_id: "Abhresh", ord_date: new Date("2021-11-20"), price: 75, items: [ { sku: "chocolates", qty: 5, price: 10 }, { sku: "apples", qty: 10, price: 2.5 } ], status: "A" },     { _id: 9, cust_id: "Abhresh", ord_date: new Date("2021-11-20"), price: 55, items: [ { sku: "carrots", qty: 5, price: 1.0 }, { sku: "apples", qty: 10, price: 2.5 }, { sku: "oranges", qty: 10, price: 2.5 } ], status: "A" },     { _id: 10, cust_id: "Abhresh", ord_date: new Date("2021-11-23"), price: 25, items: [ { sku: "oranges", qty: 10, price: 2.5 } ], status: "A" }  ]) Apply a map-reduce operation to the orders collection to group them by cust_id, then add the prices for each cust_id: To process each input document, define the map function: this refers the document that the map-reduce operation is processing in the function. For each document, the function maps the price to the cust_id and outputs the cust_id and price. var mapFunction1 = function() {emit(this.cust_id, this.price);}; With the two arguments keyCustId and valuesPrices, define the corresponding reduce function: The elements of the valuesPrices array are the price values emitted by the map function, grouped by keyCustId. The valuesPrice array is reduced to the sum of its elements by this function. var reduceFunction1 = function(keyCustId, valuesPrices) {return Array.sum(valuesPrices);};Apply the mapFunction1 map function and the reduceFunction1 reduce function to all documents in the orders collection: db.orders.mapReduce(mapFunction1,reduceFunction1,{ out: "map_reduce_example" }) The results of this operation are saved in the map_reduce_example collection. If the map_reduce_example collection already exists, the operation will overwrite its contents with the map-reduce operation's results. Check the map_reduce_example collection to verify: db.map_reduce_example.find().sort( { _id: 1 } ) Aggregation Alternative:You can rewrite the map-reduce operation without defining custom functions by using the available aggregation pipeline operators: db.orders.aggregate([{$group: { _id:"$cust_id",value:{$sum: "$price" } } },{ $out: "agg_alternative_1" }]) Check the agg_alternative_1 collection to verify: db.agg_alternative_1.find().sort( { _id: 1 } )Implementing Map Reduce with Java Consider the collection car and insert the following documents in it. db.car.insert( [ {car_id:"c1",name:"Audi",color:"Black",cno:"H110",mfdcountry:"Germany",speed:72,price:11.25}, {car_id:"c2",name:"Polo",color:"White",cno:"H111",mfdcountry:"Japan",speed:65,price:8.5}, {car_id:"c3",name:"Alto",color:"Silver",cno:"H112",mfdcountry:"India",speed:53,price:4.5}, {car_id:"c4",name:"Santro",color:"Grey",cno:"H113",mfdcountry:"Sweden",speed:89,price:3.5} , {car_id:"c5",name:"Zen",color:"Blue",cno:"H114",mfdcountry:"Denmark",speed:94,price:6.5} ] ) You will get an output like this:  Let's now write the map reduce function on a collection of cars, grouping them by speed and classifying them as overspeed cars.  var speedmap = function (){  var criteria;  if ( this.speed > 70 ) {criteria = 'overspeed';emit(criteria,this.speed);}}; Based on the speed, this function classifies the vehicle as an overspeed vehicle. The term "this" refers to the current document that requires map reduction. var avgspeed_reducemap = function(key, speed) {       var total =0;       for (var i = 0; i 
7346
Implementing MongoDb Map Reduce using Aggregation

Algorithms and applications in today's data-driven... Read More