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
import React {Component} from "react";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.
class Demo extends Component {
render() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
}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.
export default Demo;
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:
import Demo from './components/Demo';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.
export default class Demo extends Component {
.........
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,
import Demo2 from './components/Demo';And inside return() method,
function App() {
return (
<div className=”App”>
<h1>App component</h1>
<Demo2></Demo2>
</div>
);
}
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.
import React {Component} from 'react';Now make a Demo1 method using function keyword as below and return some HTML text to display on browser.
function Demo1() {
return (
<div>
<h1>Hello From function Component</h1>
</div>
);
}And now export this Demo1 Component.
export default Demo1;(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:
import Demo1 from './components/Demo1';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:
const Demo1 = () => {
return (
<div>
<h1>Hello From function Component</h1>
</div>
);
}
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.
const Demo1 = () => (
<div>
<h1>Hello From function Component</h1>
</div>
}
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.
