In this tutorial, we will know about components in react js. A component is the building block of React application. Every application we develop using react js is made up of small pieces called components.
Components are helpful in making complex UI. for an illustration purpose, In the below screenshot you can see that the UI can be broken into smaller pieces these are known as components
- The search bar can be seen as individual components
- The navigation bar can be seen as another component
- Menu links can be another component and so on.
There are many different types of components in react Js
- Functional components
- Class components
- Functional components – Any javascript functions can be simply known as functional components. We can create a functional component by just creating a javascript function. They may or may not be received parameters for example.
const helloworld = () =>{
Return “<h1>Hello world</h1>”;
}
- Class components – class components are complex than functional components
Functional components do not know about other functional components but class components may work with each other. We can use javascript ES6 classes to create class components. For example
Class menu extends React.Component{
render() {
Return “<h1>hello world</h1>”;
}
}
Rendering components –
We need to render a component to use. We can render a component by initializing an element with a user-defined component as the first parameter ReactDOM.render(). For example:
Const element = <ComponentName />;
In the above example component name is the name of the user-defined component
Open index.js and make the below changes
import React from 'react';
import ReactDOM from 'react-dom';
// This is a functional component
const Welcome=()=>
{
return <h1>Hello World!</h1>
}
ReactDOM.render(
<Welcome />,
document.getElementById("root")
);
Knowledge of .NET is quite rewarding in the IT industry. If you have got some skills in the .NET framework then a .NET certification from StudySection can prove to be a good attachment with your resume. You can go for a foundation level certificate as well as an advanced level certificate in the .NET framework.
