Post
Ask Question

Creating And Using React Components - Day Four

Introduction

In the fourth day of my React article series, we are going to learn how to create a component and use it. Before moving to components, please read my previous article,

What is a Component?

The most important concept to understand in React is the component. A React application is a composed set of components. In React, each component is a bundle of HTML, CSS, and JavaScript code which identifies one particular block of your application.

They are both simple and powerful. Each component corresponds to an element in the DOM. The component is responsible for rendering the content of that element and for handling any events that occur within it. Components can be nested inside each other. This is what is meant by composing components and it's a powerful technique for achieving reuse.

Creating and using the Components

Let’s create our first component step by step. For that, first, you need to create a ReactJS application. If you don’t know how to create a ReactJS application, read my previous blog post here. After creating the application, open the src/App.js file.

  1. import React, { Component } from 'react';  
  2. import logo from './logo.svg';  
  3. import './App.css';  
  4.   
  5. class App extends Component {  
  6.   render() {  
  7.     return (  
  8.       <div className="App">  
  9.         <header className="App-header">  
  10.           <img src={logo} className="App-logo" alt="logo" />  
  11.           <h1 className="App-title">Welcome to React</h1>  
  12.         </header>  
  13.         <p className="App-intro">  
  14.           To get started, edit <code>src/App.js</code> and save to reload.  
  15.         </p>  
  16.       </div>  
  17.     );  
  18.   }  
  19. }  
  20.   
  21. export default App;  

This is a default component ‘App’, you can create a new component here and use it or you can create a new file and import it here and use that component. There are two ways of creating a new component.

Function Component

Following is the syntax of creating a new function component.

  1. const TestComponent = (props) => {  
  2.   return(  
  3.     <ElementOrComponent.../>  
  4.   );  
  5. }  

The above code, you can see, is the syntax of creating function component with a props or properties parameter to it. The above syntax is called as JSX.

Class Component

Following is the syntax of creating a new class component.

  1. class TestComponent extends React.Component {  
  2.   render(){  
  3.     return{  
  4.       <ElementOrComponent.../>  
  5.     };  
  6.   }  
  7. }  

In the above code, you can see the syntax of creating class component and it derives from the React.Component.

Let’s create a React Component

We have already created a new project and seen the App.js file code. We are using the same project for creating a new component and use it in the main component ‘App’.

Here, we are using Visual Studio Code for as an IDE or you can use other IDE for this implementation. Open that src/App.js file. We are creating both the components here itself and use it in ‘App’ component.

  1. import React, { Component } from 'react';  
  2. import logo from './logo.svg';  
  3. import './App.css';  
  4.   
  5. class App extends Component {  
  6.   render() {  
  7.     return (  
  8.       <div className="App">  
  9.         <header className="App-header">  
  10.           <img src={logo} className="App-logo" alt="logo" />  
  11.           <h1 className="App-title">Welcome to C# Corner</h1>  
  12.         </header>  
  13.           <Article/>  
  14.           <Author/>  
  15.       </div>  
  16.     );  
  17.   }  
  18. }  
  19.   
  20. const Article = (props) =>{  
  21.   return(  
  22.     <h1 className="App-intro">Creating and Using Component</h1>  
  23.   );  
  24. }  
  25.   
  26. class Author extends React.Component {  
  27.   render(){  
  28.     return(  
  29.       <h1 className="App-intro">By Jeetendra</h1>  
  30.     );  
  31.   }  
  32. }  
  33.   
  34. export default App;  

We have modified the src/App.js file and added two more components in that first one function component i.e. ‘Article’ and the second class component i.e. ‘Author’. You can see these changes in the above code.

How to use the Component?

Following are the ways to use a created component in existing ‘App’ component.

  1. <div className="App">  
  2.         <header className="App-header">  
  3.           <img src={logo} className="App-logo" alt="logo" />  
  4.           <h1 className="App-title">Welcome to C# Corner</h1>  
  5.         </header>  
  6.           <Article/>  
  7.           <Author/>  
  8. </div>  

In the above code, you can see we have used component as an element like other HTML elements.

Also, we have implemented one more thing by using these components in the ‘App’ component; i.e., nesting of components. Next, save these changes and run the application using the npm command ‘npm start’. It will run your application and show the output as below screenshot.

React

Following screenshot shows the parent component and child or nested components.

React

Finally, we have created the component using both ways - function and class - in our default ‘App’ component.

Summary

I hope that beginners, as well as students, now understand how to create and use React Components. If you have any suggestions regarding this article, please contact me. 

Stay tuned for other concepts of React coming soon!

“Learn It, Share it.”

<= Previous Article                              Next Article =>


Similar Articles