Components in React js

In this React js tutorial, we will learn all about components in React like types of Components, and how to create, import, and export components with examples. So here is the topic we will discuss :

• What is Component in React js
• Different types of Component available in React js
• How to create, export and import components in React js with examples

Here we will discuss the above topic, so if your React environment is not set up then follow this article ‘how to setup react environment‘ to set up react environment. Also, you can learn how to start and terminate the React app.

What is a Component in React js?

As we all know the react is based on the Component architecture, so a component is nothing but an:

• It’s a part of UI
• It’s the core building block of React
• An application comprises multiple small components
• Small components combined together form the entire UI
• Components can be nested inside one another

Let’s take an example of a Google homes page to understand the components in Reacts.

However, on the Google Search page, you can see multiple elements on the specific webpage. Now on this page, you can see the top nav bar, which has options like Gmail and images, it is considered one component in React.

Now the nav bar itself has small multiple components like the particular image component, and button components present over in the page nav bar. That means in the Nav bar component(Child component), we have other components nested.

On that Google Search page, there is another component i.e. Search box in the middle of the page. Again this Search component is again comprised of other components like the search image component, and the mic image component.

Now all these components in the Google Search page, are merged together to make a parent component(i.e Whole page). And the best part of the component is that component can be reused. So every component you create is reusable and can be used multiple times with different properties.

How component would look in terms of code

Now we need to understand how components would look in terms of code.

So, whenever we create a component, we usually create that component or we code that component in the Javascript file. For example, the App component is placed inside the App.js file.

And the next thing about the component is we can create a component in either of two ways i.e. Functional component or Class component.

Read What is react js and react native

Different types of Component available in React js

Here we will discuss two different types of components available in React js.

The two different types of components available in React js is

1. Functional Component
2. Class Component

Functional Component

In React js, the Functional component is a javascript function that accepts input called properties( short form: props) and returns Html which describes the User Interface.

Functional Component Syntax:

function Welcome(props){
return <h1> Hello! {prop.name}</h1>
}

In the above syntax ‘function’ is a valid React component because it accepts a parameter called props, and then this function returns Html, which defines the User Interface. This part of code ‘<h1> Hello! {prop.name}</h1>’ look like Html, but it is technically JSX.

And these components are known as Functional component because that is literally javascript functions and it works like normal functions in javascript.

Class component

A class component is nothing but regular ES6 classes, that extends from a react component class. They contain a render method that returns Html.

Class component syntax

Class Welcome extends React.component{
render(){
return<h1> hellow, {this.props.name}</h1>
}
}

• The above code simply has a class and we named the Class as Welcome. And as with any class in JS, a class can extend to another class. In this case, as we are creating a react component, we are extending a class which is called React. component. This component class is present in the react library.
• So, what ‘ Class Welcome extends React. component’ this code does is that it actually makes this regular class or turns this regular class into a react component.
• When we create the class-based component in react, we always need to have a render() and inside this render(), always contains some sort of Html element, which define the UI.

These are the different types of components available in React js.

Read React js form tutorial

How to create, export and import components in React js with examples

Here we will see how to create a functional component and class component in React js.

When you set up the React environment using the command ‘npx create-react-app myfirst-app’, this will create an app directory. This app directory (myfirst-app) contains a set of modules, packages, and files, which is required to create, and run the react app.

Create the first Functional component in React js

• So in the My-app directory, expand the src folder and create a new folder known as Component.
• To create a component we need to create a file with a js extension. In this case, we will create a component called Hello, so the file name would be Hello.js.

• Next, we will write the code to create the component with a function called Hello and returns HTML. So here it will return a simple header ‘Hellow World’. Then save it, and the component gets created.
• But if you hit refresh in the local browser, you cannot see the output because whenever we create a component, we make sure that we have to add that component to the main interface. So here the main interface is defined by this App.js (which already contains the App component).
• We will nested the Hello component inside the App.js component, in order to do that we need to export the Hello component using the export method, and then we will import the component into the App.js component.
• So the code for exporting the component id define below the function ‘ export default Hello’. Here default means, that once we export the component, we can import it to any file and give it any sort of name.
• Below is the code for the Hello component

function Hello(){
return <h1>Hello World!</h1>
}
export default Hello

• Next, go to App.js and import the Hello component by providing the component name and path where it present.
• Then we will use the Hello component inside the App component, following the below code

import './App.css';
import Hello from './Components/Hello';

function App() {
  return (
    <div className="App">
      <Hello></Hello>
    </div>
  );
}

export default App;

This App component is exported and imported into the Index.js file. Then app component gets rendered using the DOM element i.e. root. DOM element ‘root’ is available in index.html.

So here if you will change the Hello world to Hello Nick, then that result will reflect in the browser. In simple terms, if any changes we will do in App.js. it gets rendered by the Rendered () with the help of the DOM element it will reflect in Browser.

Once you create the component, you can run the app using ‘npm start’ or if your app is already running in the browser, then refresh the browser. You can see the output as “Hello World”

So here we create a component using regular function syntax, if you want to create the Hello component using ES6 syntax, then use the below code, it will return the same result:

const Hello =()=> <h1>Hello World!</h1>
 export default Hello

Read Props in React js

Create the first Class component in React js

Now we will see how to create a Class component, so here in the Component folder create a Class component file known as ‘Message.js’.

Once you create the Message.js file, we can create a Message component. To create a message component we need to make this Message class extend component from a react. That means it needs to inherit from the component class (to add the Component class we will import the class) from react. This converts the Simple Message class into React Component.

The next thing we need to do is that all we know, whenever we have a component in react, we always make that component accept some props and return Html. But as this is a class so we cannot directly return HTML. So therefore every class component which you will create must have a method called the render method.

In the Message class, we will create a render (), which will return some HTML. Then export the component, so it can be used in the main interface i.e. App.js.

import {Component} from "react";
class Message extends Component{
    render(){
        return <h1> This is a class component</h1>;
    }

}
export default Message

Once you create the class component, we can import the component into App.js and use the component inside the Main component(App component).

import './App.css';
import Hello from './Components/Hello';
import Message from './Components/Message';

function App() {
  return (
    <div className="App">
      <Hello></Hello>
      <Message></Message>
    </div>
  );
}

export default App;

This App component is exported and imported into the Index.js file. Then app component gets rendered using the DOM element i.e. root. DOM element ‘root’ is available in index.html.

So here if you will change the Hello world to Hello Nick, then that result will reflect in the browser. In simple terms, if any changes we will do them in App.js. it gets rendered by the Rendered () with the help of the DOM element it will reflect in Browser.

Now run the React app to see the result using the ‘npm start’ command or else if it is running refresh the browser.

This is how we can create a functional and class component in React js.

Read State in React js

Conclusion

In this React js tutorial, we learned about Components in React js. As we discussed the two types of components i.e Functional component and Class component. Also, we saw how to create these two components like how to create a functional component in react js and how to create a class component in react js.

You may also like the following react js tutorials:

• State in React js Hooks
• How to reset form in react js