ReactJS | Components

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS Components.

React Component is the building block of a React application. Let's learn how to create a new React component and the features of React components in this tutorial.

React component represents a small chunk of user interface in a webpage. The primary job of React component is to render its user interface and update it whenever its internal state changes. In addition to rendering the UI, it manages the events that belongs to its user interface.

In summary, React component provides the following below functionalities -

• Initial rendering of user interface.

• Management and handling of events.

• Updating the user interface whenever the internal state is changed.

React component accomplish these feature using the three concepts -

• Properties - Enables the components to receive input.

• Events - Enables the component to manage DOM events and end-user interaction.

• State - Enables the component to stay useful. Stateful component update its UI with respect to its state.

We will be learning about all concepts one-by-one in upcoming tutorials.

READ: ReactJS | JSX

Creating a React Component

React library has two component types. The types are categorized based on the way it is being created.

• Function component - Makes use of plain JavaScript function.

• ES6 class component - Makes use of ES6 class.

The major difference between function and class component are -

• Function components are minimal in their nature. Its only requirement is to return a React element.

function Hello() { 
   return '<div>Hello</div>' 
}

The same functionality can be done making use of ES6 class component with little extra coding.

class ExpenseEntryItem extends React.Component {         
   render() { 
      return ( 
         <div>Hello</div> 
      ); 
   }
}

• Class components supports state management, whereas function components doesn't support state management. But, React provides a hook, useState() for the function components to maintain its state.

• Class components have a life cycle and access to each life cycle events via dedicated callback APIs. Whereas function components doesn't have life cycle. React gives a hook, useEffect() for the function component to access the various stages of the component.

READ: ReactJS | Complex Application Using Customized Method

Creating a Class Component

Let's create a new React component (in our expense-manager app), ExpenseEntryItem to show an expense entry item. Expense entry item is made up of name, amount, date and category. The object representations of the expense entry item is -

{ 
   'name': 'Mango juice', 
   'amount': 30.00, 
   'spend_date': '2020-10-10' 
   'category': 'Food', 
}

Open expense-manager application in your favorite editor.

Create a file, ExpenseEntryItem.css beneath src/components folder to style our ReactJS component.

Create a file, ExpenseEntryItem.js under the src/components folder by simply extending React.Components.

import React from 'react'; 
import './ExpenseEntryItem.css'; 
class ExpenseEntryItem extends React.Component { 
}

Next, create a method render inside of the ExpenseEntryItem class.

class ExpenseEntryItem extends React.Component { 
   render() { 
   } 
}

Next, create a user interface using JSX and return it from render method.

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div>
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}

Next, you have to specify the component as default export class.

import React from 'react';
import './ExpenseEntryItem.css';

class ExpenseEntryItem extends React.Component {
   render() {
      return (
         <div>
            <div><b>Item:</b> <em>Mango Juice</em></div>
            <div><b>Amount:</b> <em>30.00</em></div>
            <div><b>Spend Date:</b> <em>2020-10-10</em></div>
            <div><b>Category:</b> <em>Food</em></div>
         </div>
      );
   }
}
export default ExpenseEntryItem;

Now, we have successfully created our first React component. Let us use this our newly created component in index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItem from './components/ExpenseEntryItem'

ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItem />
   </React.StrictMode>,
   document.getElementById('root')
);

Example

The same functionality can be implemented in a webpage using CDN as shown below -

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>React application :: ExpenseEntryItem component</title>
   </head>
   <body>
      <div id="react-app"></div>
       
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
         class ExpenseEntryItem extends React.Component {
            render() {
               return (
                  <div>
                     <div><b>Item:</b> <em>Mango Juice</em></div>
                     <div><b>Amount:</b> <em>30.00</em></div>
                     <div><b>Spend Date:</b> <em>2022-01-01</em></div>
                     <div><b>Category:</b> <em>Food</em></div>
                  </div>
               );
            }
         }
         ReactDOM.render(
            <ExpenseEntryItem />,
            document.getElementById('react-app') );
      </script>
   </body>
</html>

Next, serve the application making use of the npm command.

npm start

Output

Now, open your web browser and then enter http://localhost:3000 in the address bar and press enter.

Item: Mango Juice
Amount: 30.00
Spend Date: 2022-01-01
Category: Food

READ: ReactJS | Using Create App tool

Creating a function component

React component can also be created using a plain JavaScript function but with limited features. Function based React component doesn't have support for state management and other advanced features. It can be used to quickly create a simple component.

You can rewrite the above ExpressEntryItem in function as specified below -

function ExpenseEntryItem() {
   return (
      <div>
         <div><b>Item:</b> <em>Mango Juice</em></div>
         <div><b>Amount:</b> <em>30.00</em></div>
         <div><b>Spend Date:</b> <em>2020-10-10</em></div>
         <div><b>Category:</b> <em>Food</em></div>
      </div>
   );
}

Here, we just added the render functionality and it is enough for creating a simple React component.

READ: ReactJS | Creating a React Application

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial post, we are going to be discussing about ReactJS Styling.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.