Understanding React Components



A component can be said to be a piece or an element of a larger object. Think of a car. It is made up of an engine, ignition, tires, doors, etc. These different parts of a car can be regarded as components which makes up the object known as a car.

In getting to build web applications with React, we will often make use of components.

What are Components in React?

 Components in React are primarily separate, reusable, independent pieces of code used in building User Interfaces (UIs). To get a clearer picture of components in React, think of functions in JavaScript. What do functions do? They are block of codes that perform specific tasks. Functions can take in arguments, perform evaluation on these arguments and return an output when the function is called.

React Components likewise take in arguments which can be the JSX attributes. These attributes are objects and are known as props. They are returned as React elements.

 Creating Components

React Components are defined like JavaScript functions like this.

function ComponentName (props){
return <h1>I am a Component {props.name}</h1>;
}
The above code sample thus imply that components are functional.

We can also, define component using the ES6 class format.like this.

class ComponentName extends React.Component{
render(){
return <h1>This is also a component {this.props.name}</h1>;
}
}

 This means that we subclass ComponentName from the React.Component base class.

Rendering React Components

 The render() method is used to display the elements of a component to the DOM. We can render component like this.

<ComponentName name = "Charles" />

A Simple Example

 Let us create a component to bring everything together.

import React from 'react';
import ReactDOM from 'react-dom';

class SampleComponent extends React.Component{
render(){
return (
<div>
<h1>Hello, {this.props.name}</h1>
</div>
);
}
}

ReactDOM.render(<SampleComponent name = "Charles" />,
document.getElementById('app'));
 The above code sample will render "Hello Charles" on our web browser. Here is what happens.

We import the react and react-dom library and assigned the library to React and ReactDOM respectively.

We subclass SampleComponent from the React.Componet base class. That is we created a Component object named SampleComponent from the React.Component class.
The render() method will check the this.props and return the React element.
On the ReactDOM.render() method, we call the created component, that is SampleComponent and assign "Charles" to the attribute name.

Do note that component names should begin with a uppercase character.

Calling a Component with another Component

 A component can render another component in react.

Here is an example.


import React from 'react';
import ReactDOM from 'react-dom';

class Main extends React.Component{
render(){
return(
<div>
   <Header />
   <Body />
   <Footer />
</div>
);
}
}

class Header extends React.Component{
render(){
return(
<div className="headerSection">
<h1>This is a Header</h1>
<ul className="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
);
}
}

class Body extends React.Component{
render(){
return (
<div className="container">
<p>The main body</p>
</div>
);
}
}

class Footer extends React.Component{
render(){
return (
<div className ="footer">
<p>Writern with <3 by Charles Eteure</p>
</div>
);
}
}

ReactDOM.render(<Main />,
document.getElementById('app'));

So Components are at the core of React applications. Making it easy to maintain code and readaz.
Thank you for reading. Kindly share this article.

Comments

Post a Comment

Popular Posts