ReactJS - Components

A Component is the core building block of a React application. In other words, we can verbalize that every application we will develop in React will be composed of pieces called components. Components make the task of building UIs much more facile. We can visually perceive a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be our final UI.

You can visually perceive in the below image we have broken down the UI of a webpage into individual components.


The navigation bar at the top is an individual component, the content is an individual component, the footer is an individual component, and conclusively, we can merge all of these individual components to make a parent component which will be the final UI for the webpage.

In ReactJS, we have mainly two types of components. They are
  • Functional Components
  • Class Components

Functional Components

In React, function components are a way to indite components that only contain a render method and don't have their own state. They are simply JavaScript functions that may or may not receive data as parameters. We can engender a function that takes props(properties) as input and returns what should be rendered. A valid functional component can be shown in the below example.

Example
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header />
<Content />
<Footer />

</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<div>
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<div class="container">
<h3>Content from knowledgefactory!!</h3>
<p>This is the content </p>
</div>
</div>
);
}
}
class Footer extends React.Component {
render() {
return (
<div>
<footer>
<p>Author: knowledgefactory</p>
<p><a href="mailto:sibinmuhammed@gmail.com">sibinmuhammed@gmail.com
                          </a></p>
</footer>
</div>
);
}
}
export default App;
Output:

Class Components

Class components require us to extend from React. Component and engender a render function that returns a React element. We can pass data from one class to other class components. We can engender a class by defining a class that extends the Component and has a render function. The valid class component is shown in the below example.

Example
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"langauge": "java"
},
{
"langauge": "python"
},
{
"langauge": "c++"
},
{
"langauge": "c"
},
{
"langauge": "Go"
}
]
}
}
render() {
return (
<div>
<ProgrammingLanguages />
<ul>
{this.state.data.map((item) => <List data={item} />)}
</ul>
</div>
);
}
}
class ProgrammingLanguages extends React.Component {
render() {
return (
<div>
<h1>Programming Languages </h1>
</div>
);
}
}
class List extends React.Component {
render() {
return (
<ul>
<li>{this.props.data.langauge}</li>
</ul>
);
}
}
export default App;
Output:


More...


Comments