React Components

Previous Page
Next Page

Components in React

Components in React is one of the major strong suits of React. It assists in the re-usability of code. They are functions that return HTML code via a render method. They work in isolation and are used for one purpose such as Navbar.js, Home.js. They are named with the first letter in capital letters and are passed to other components in a similar HTML syntax e.g. <Navbar/> and <Home/>.

Components in React can be grouped into two:

Functional component

They are components in the form of functions:

App.js:

function App()  //or
const App = () => {}

They are simple JavaScript expressions and do not contain a render method. An example can be:

Hello.js:

function Hello() {
  return <h3>Hello, I am a functional component</h3>;
}
// OR ES6
const Hello = () => {
  return <h3>Hello, I am a functional component</h3>;
};

Create a new javascript file in the src folder called Hello.js and write the above code in it.

Result:

Notice that the name of the function begins with a capital letter. This is compulsory else the component will be treated as a normal HTML tag.

Class Component

The class component extends the function Component in react and has a render method. The render method returns HTML.

App.js:

import React, { Component } from "react";
class App extends Component {
  render() {
    return <p> How do you do? </p>;
  }
}
export default App;

Pass the component to the root element:

Index.js

ReactDOM.render(<App />, document.getElementById("root"));

Result:

Notice that the component is passed to the render() method with the first letter in capital.

Another classification of components is:

  1. Stateless component
  2. State component

As the name suggests, the distinct difference is the presence of a state. The state would be explained later in this tutorial. All components defined earlier in this tutorial are stateless components.

Think in React

Before we move any further, let’s go over a programming concept that defines React and React programmers from the rest, the concept of Separation of Concerns.

Separation of concerns is a programming principle that states that each concern should be separated into individual pieces (components).

For example, imagine we want to make an e-commerce website which would have a navigation bar, a body which will contain a cart page, listed products, and a footer, to mention a few, the website can now be separated into concerns(components) such as the top component which can be called <App/> or <Website/>, containing a <Navbar/> component, <Body/> which would also in itself render <Products/> and the <HeroSection/> and then the <Cart/> and <Footer/> component.

The <HeroSection/> and <Products/> components are child components of the <Body/> and can receive props(properties) from the parent (<Body/>).

import React, { Component } from "react";
class App extends Component {
  render() {
    return (
      <div>
        <Navbar />
        <Cart />
        <Body />
        <Footer />
      </div>
    );
  }
}
export default App
Previous Page
Next Page