ReactJS - Components

In ReactJS, components are the building blocks of a user interface. They are reusable and encapsulate the logic and view of a particular part of the UI.

In ReactJS, there are two types of components:

Class components
Functional components

Class components

A class component is a JavaScript class that extends the React.Component class. It has its own state and can handle lifecycle methods. It is also known as a stateful component. It is generally used when you need to manage state or handle complex UI logic.

Here’s an example of a class component:

import React from 'react';

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

export default Greeting;

In this example, we define a class component named “Greeting” that extends the “React.Component” class. It takes a “name” prop and renders a greeting using that prop.

Functional components

A functional component is a simple JavaScript function that accepts props as an argument and returns a React element. It is also known as a stateless component because it does not have its own state. It is easier to write and test than a class component and is generally preferred when you only need to render a UI element based on some props.

Here’s an example of a functional component:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

In this example, we define a functional component named “Greeting” that takes a “name” prop and returns a greeting using that prop.

Both class and functional components can receive props, which are a way to pass data down to the component from its parent. Components can also have a state, which is an object that represents the internal data of the component. When the state changes, the component will re-render.

Components can be composed together to build complex UIs. In a ReactJS application, the top-level component is typically called the “App” component and is responsible for rendering all other components.

Rendering a Component

In ReactJS, rendering a component means displaying it on the webpage. Here are the steps to render a component:

Create a component: You can create a component using either a functional or class component, as described in my previous answer.
Import the component: To use the component in your app, you need to import it into the file where you want to use it. Here’s an example of how to import a functional component:
```
import MyComponent from './MyComponent';
```
And here’s an example of how to import a class component:
```
import React from 'react';
import MyComponent from './MyComponent';

class App extends React.Component {
  // ...
}
```

Render the component: To render a component, you simply need to use it as a JSX element in the render() method of another component. Here’s an example of rendering a functional component:

import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      <MyComponent />
    </div>
  );
}

And here’s an example of rendering a class component:

import React from 'react';
import MyComponent from './MyComponent';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <MyComponent />
      </div>
    );
  }
}

In both examples, the MyComponent component is rendered inside the App component. The resulting HTML will include both the h1 tag and the contents of the MyComponent component.

Component Constructor

In ReactJS, the constructor is a special method that gets called when a component is created. It is used to initialize the component’s state, bind event handlers to this, and perform other setup tasks.

Here is an example of a component with a constructor:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

In this example, the MyComponent class has a constructor that sets the initial state to { count: 0 }. It also binds the handleClick method to this, so that it can be used as an event handler for the onClick event of the button.

The handleClick method updates the state by calling this.setState() with an object that has a new value for the count property.

Finally, the render method displays the current value of count and a button that triggers the handleClick method when clicked.

Note that in class components, you must call super(props) in the constructor to initialize the base class (i.e., React.Component). This is necessary to ensure that the component’s props are properly initialized.

Components in Components

In ReactJS, you can compose components by using them inside other components. This is known as “components in components” or “nested components”.

Here is an example of a component that renders another component inside of it:

import React from 'react';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <h2>Child Component</h2>;
  }
}

In this example, the ParentComponent class renders a ChildComponent inside of it by including it in the JSX markup. When the ParentComponent is rendered, it will also render the ChildComponent.

Nested components allow you to break down complex UI into smaller, reusable parts. You can create as many nested components as you need to represent your UI, and each component can have its own state, props, and event handlers. By composing these components together, you can build up your UI in a modular and reusable way.

Components in Files

In ReactJS, you can define components in separate files and then import them into other components as needed. This makes it easy to organize your code and reuse components across different parts of your application.

Here’s an example of how to define a component in a separate file and then use it in another component:

Create a file called ChildComponent.js:
```
import React from 'react';

class ChildComponent extends React.Component {
  render() {
    return <h2>Child Component</h2>;
  }
}

export default ChildComponent;
```
In this file, we define a ChildComponent class and export it as the default export. This allows us to import it into other files using the import statement.
Create a file called ParentComponent.js:
```
import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent />
      </div>
    );
  }
}

export default ParentComponent;
```
In this file, we import the ChildComponent class from the ChildComponent.js file using the relative path ./ChildComponent. We can then use the ChildComponent inside the ParentComponent class as if it were defined in the same file.

Note that we use the export default syntax to export the ParentComponent class as the default export for this file.

Finally, in our main index.js file, we can import and use the ParentComponent:

import React from 'react';
import ReactDOM from 'react-dom';
import ParentComponent from './ParentComponent';

ReactDOM.render(<ParentComponent />, document.getElementById('root'));

In this file, we import the ParentComponent class from the ParentComponent.js file using the relative path ./ParentComponent. We can then use the ParentComponent class in our ReactDOM.render() call to render the component in the DOM.

Share on Facebook

Save

ReactJS – Components