React components and props with example

React components– React.js library is very useful for developing UI (User  Interface) of modern applications. In the” React.JS” development technique every element of UI rendered by different components. Therefore we can develop complex UI for application In this tutorial We will discuss everything about react component with simple React component example

Table of Content

• What is React Component
• Class component
• Functional Component
• Difference between class and functional component
• Functional component example with props
• Class component example with props

First of all you need to divide into different small parts and build the React component in react project for each part of UI and render those components together when need.

Read More

How to install React.js to develop React Application

React.js in Visual Studio Code

Create Native App in React Native

React component example and more about it

The main advantage of the React component is reuse of code so no need to write code every time and easy to maintain complex UI of ReactJS applications.

If you need to change some part of your application’s UI then just you need to update the particulars React component only and the update reflects everywhere the particular components used.

What is React Components?

React Component is JavaScript code which returns HTML(JSX) dynamically. React.js library generates UI with the HTML(JSX).  React.js library only updates the particular component which is needed to change with the help of virtual DOM.  As a result the react application faster than other traditional web applications.

In this paragraph, I’m going to discuss about types of React Components. React Components are two types first one is Class Components and the Second one is Functional Components. Now we will know more details about Class Components and Functional Components.

Class Component

The class component is a JavaScript file that contains code for the component. and always remember to keep the file name the same as the class name of the react component. This javascript file which contains component code is responsible to render HTML(JSX) for UI of your applications.

Structure of class component– the component starts with class keyword and it extends 

React. Component then a render() method needs to implement which returns the HTML(JSX). At the end of the component class you need to export the component using export default and flowed by component name like “export default Component” and also you can write class component with “export default class”, then no need to export the component separately, and always component name should start with a capital letter.

Class component has its state therefore you can maintain state in-class component and it can manage parameter using “props”. In class component “props” can be accessed using “this” keyword and it’s like “this.props”. Now try to understand the concept of class components with a simple example.

Functional Component

Functional components are just simple javascript functions which also return HTML(JSX) elements like class components. Just different between class component and functional component is below.

Different between Functional and Class Components

Functional component just a simple javascript function. Use functional component as much as possible and State not maintain in the functional component. This type of component only responsible for UI (User Interface of application). Generally in function component no complex logic exists. Also functional components called “Stateless” or “Dump”.

The class component also a code block of javascript and its state-full. This type of component has more features and it also maintains its own private data. You can maintain complex UI logic in the class components.

React Functional component example

A simple example of functional components – We will create a separate folder for your reusable components. Hare for component we create folder name as “components”. Under component folder create a “User.js” javascript file just for example of a functional component and write the following code. This is a basic of React Functional Component.

Now you can use the component in your project as a <TAG>. Please see the following example, hare we will use the above component in the “App.js” file.

Output : User Details

Hare we just simply use the User component. To use the component you need to import the javascript file which contains the component.

Functional component example with props

Basically “props” is a short form of property that contains multiple values. A component can be customized with dynamic data and props use to passing those data into the component. For example in our “User” component we pass two data one is user name and another is Email Id. So we need to use props as a parameter in our functional component.

Modified code for “User.js”

For example hare, we use some CSS code just for decoration the “User” component. The CSS file name is “User.css” under the component folder. the CSS code in the following.

When you need to return multiple elements of a particular component then you embalmed those elements with <Div> tag or <Fragment> tag. Otherwise you will get an error. One more important things <Div> element always generate an extra <Div> block in your application, if you no need the element you can use <Fragment> tag.

“User.css” file

Finally we use the “User” component in the “App.js” file for generating output.

Modifies “App.js” file

In this “App.js” file we use the “User” component just like HTML Tag. It’s a JSX code. The value which is inside of <User> tag can be access as “props. children” and the attribute like “EmailId” access as “props.EmailId”.

Output of above React component example is following

Another way to write the component, you can use an arrow function to create your component. The code like following.

The output is same as above.

Class component example

The class component is almost similar to a functional component only a few syntax is different. A class component should extend React. Component and it should contain the “render()” method which returns React elements. You can manage state in this component also overtire constructor. Mainly class component use to develop complex UI (User Interface). Please see the simple example below.

Hare you can see the Component class of React is extended by the costume component, If you want you can override the constructor also maintain state. Now see the following example.

You can see here I have called a method name “super()”, as we override the constructor, therefore, you need to call the base class constructor. Super () method is nothing but the superclass constructor.

In the above example you can see one more additional line inside of the constructor. Actually the line initializes a state variable with the value “Hello World” this way you can manage multiple state variables and use it inside of the component. The state variable can accessible by “this.state” keyword. In this case we access the name property under state variable by “this.state.name” statement.

The output of above is below

Element 1

Element 2

Hello World

One more React Class Component example with props

In class component “props” is similar to function which already discus above. But this type of component no need to declare props as a parameter, just you need to use “this” keyword to access the “props” object. See the following example.

MyClassComponent .js file

App.js file

Output of above example