Hello Readers,

This is Part-2 of our ReactJs tutorial series. In this tutorial, you will learn how to create ReactJS Components. In case if you do not have any idea about the basics of ReactJs and how to start with it, you can refer to our Part-1 tutorial.

Quick links for our ReactJs Series:

Tutorial #1 — Introduction and Installation of ReactJS

Tutorial #2 — ReactJS Components (This Tutorial)

Tutorial #3 — ReactJS Components Communication

Tutorial #4 — Build ToDo Application Using ReactJS

Tutorial #5 — Deploy ToDo Application to Github pages

What is a Component?

A component is a small reusable chunk of code. Components are the core building block of React apps.

A React app can be seen as a component tree — having one root component (“App”) and then many nested child components.

These are like javascript functions. They accept arbitrary inputs (called “props”) and need to return/ render some JSX code (React elements) which describes what should appear on the screen.

We can also use multiple JSX in a component. Variables and conditions should be inside render method.

When creating a React component, the component’s name must start with an upper case letter.

Types of Components

Basically, Components have two types:

  • Class Components
  • Functional Components

1) Class Components

Let us create a class-based component. (Note that in previous tutorial we have already set up a ToDo App). So now to properly organize the structure of our application, create a directory named as components inside the src directory. And we will create all components inside this directory.

Now right-click on your component directory and create a new file and call it as Demo.js.

Inside this Demo.js, we will create a class component. For this we need to follow below steps:

i) First, you need to import the React Package from the React Library

ii) Now, Create a Class and give it any name. This class should extend a Component interface. And now create a render() method in this class.

render() method will be automatically called by ReactJs when required.

Whatever you want to display on your component, you need to write them inside this render() method.

iii) The last step is to export this Demo Component.

So this is how you can create a simple component using a Class syntax.

Now we need to display this Demo Component on our browser also.

For that, we have to import/call this Demo Component on an App.js, because App.js is the only component that will get rendered when we run our application.

So open the App.js file and write a below statement:

Note that it is not necessary to have a name “Demo” in this import statement, you can provide any name to this.

And call a <Demo> </Demo> component inside the return method.

And you can see “Hello World” on your browser.

There is also another way to export this Demo component. We can write export as an inline statement too.

In Demo.js, remove that entire line ‘export default app;’ and write ‘export default’ before the ‘class’ keyword.

And this will work the same as before.

Alright now, let me tell you why this ‘default’ is required.

Remember I told you that we can provide any name to import this component in App.js?

This default keyword is responsible for that. If we use this default with our class declaration then we can import this component with any name in App.js.

For example, try to import this with any other name except ‘Demo’, like this,

And inside return() method,

Now save this and run the application and you can see the same ‘Hello World’ as before.!

Now if you remove this ‘default’ keyword and re-run this application then you can see it is giving us an error.

So to import a component who does not have this default keyword, we need to use curly braces { } in the import statement. Inside this curly braces, we have to write what we are exporting from Demo.js.

And you can see the same “Hello World” as before.

2) Functional Components

Now let’s create another component which would be our functional component.

Create a new file as Demo1.js inside the component directory.

Now inside this Demo1.js, we first need to import the React Package from the React Library.

Now make a Demo1 method using function keyword as below and return some HTML text to display on browser.

And now export this Demo1 Component.

(Note: the working of ‘default’ keyword is the same for both the types of components)

Now on App.js, we need to import this newly created Demo1 component.

So open the App.js file and write a below statement:

And also call this with <Demo1></Demo1> in return() method.

Now run the application. You can see this “Hello from function component” is there.

Now let’s see how we can create this functional component with 2 other different ways.

So in total, we are having 3 ways to create a functional component and we have just done it in one way.

Now the second way is to use ES6 (ECMAScript 6) syntax for creating a functional component.

For this we have to use the arrow function as below:

Now save this and check the browser and you can see it is working the same as before.

Now let’s see the third way of creating a functional component.

Here also we will use ES6 but we will modify our arrow function.

You can check your browser now and it is showing the same text as before.

So we are done with how to create different types of components.

Now somewhere we would also require passing the data/value from one component to another. For this refer to our Part-3 article.

Jinal Shah is corporate trainer on different technology like node.Js, Angular,Ionic 2, BOT Framework etc.