How to create components in React (create custom components) | React Recipes
Tags: webdev, javascript, beginners, react
Published: 2023-01-08 08:45:00

Previously I discussed about creating your first react app, in this post, we'll learn more about, props, states, creating your first react component and many things. 

So, 

### What exactly are Components in React? 

Components are important in React because they allow you to create **reusable**, modular UI elements that are easy to *manage* and *update*. They provide a powerful way to *structure* and *organize* your UI code, making it easier to build and maintain complex applications.

#### HTML elements and React components

Usually in HTML, you might use different types of elements like `div`, `p`, or `span` to organize and design your webpage. However, these elements can be limited in how you can reuse or customize them, which can lead to a lot of redundant or repetitive code. 

On the other side React components are a powerful way to build and design your user interface.  You can create your own components and use them as pieces to develop more advanced and reusable elements in your UI.

### Creating a basic React component

Creating a basic component in React is quite simple, and there are a few different ways you can do it. One way is to use the `React.createElement` function, which allows you to create a virtual DOM element that shows your component.

Example of how you might use `React.createElement` :

```JS
import React from 'react';

const MyComponent = () => {
  return React.createElement('div', {className: 'my-component'}, 'Hello, World!');
};
```

This example, we have used the `React.createElement` function to create a `div` element with a class name of `my-component`. The final argument to the function is the content of the element,  you  can see`'Hello, World!'` above.

Let's look at another way to create components in React, that is by using a functional components. 

So, 

**what is a functional component?** 

A functional component is a simpler way to define a component that doesn't have any internal state or lifecycle methods(I have covered them below). Example: 

```js
import React from 'react';

const MyComponent = () => {
  return (
    <div className="my-component">Hello, World!</div>
  );
}
```

Above we have used [JSX](https://rahul.biz/first-react-app) to create a `div` element with a class name of `my-component`. The content inside the element is`'Hello, World!'`. 

---

In addition to functional components, in React you can also create class-based components using the class syntax.

So, 

**What is class-based component?** 

A class-based component is a type of React component that is defined using a class😉. Class-based components have more features(internal state and lifecycle method) and capabilities than functional components.

```js
import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div className="my-component">Hello, World!</div>
    );
  }
}
```

Above we have used the class syntax to create a component called `MyComponent` that extends the `React.Component` base class. The `render` method is a required method in a class-based component that returns the JSX that should be rendered for the component.

---

### props and states

props and state are two important stuff that are used to manage data within a component.

Props means properties, they are a way to pass data from a *parent* component to a *child* component. They are read only, it means that the child component cannot modify the props it receives instead of that child component can only use the props to render its UI.

Props Example: 

```js
import React from 'react';

const MyComponent = (props) => {
  return (
    <div className="my-component">{props.message}</div>
  );
}
```

Above we have used the `props` argument to access the `message` prop that is passed to the component. Then we have rendered the value of the `message` prop within the component's UI.


States means states, they are used to manage data within a component that can change over time. Unlike props, state is private to the component, and can only be modified using special methods provided by the `React.Component` base class.

Example of using state in class-based component: 

```js
import React from 'react';

class MyComponent extends React.Component {
  state = {
    message: 'Hello, World!'
  }

  render() {
    return (
      <div className="my-component">{this.state.message}</div>
    );
  }
}
```

---

### What is lifecycle method?

Lifecycle methods are special methods that are called at specific points(read next para) in the lifecycle of a component. They can be useful for performing tasks such as **fetching data**, **setting up subscriptions**, or **updating** the component's state. However, they should be used only when necessary.

There are a few different lifecycle methods that you can use in a class-based component, and they are called at **different points** in the component's lifecycle.

Most common ones are: 
-   `componentDidMount`: You can use this method to perform tasks such as fetching data or setting up subscriptions.
-   `componentDidUpdate`: You can use this method to perform tasks such as updating the component's UI or making API calls.
-   `componentWillUnmount`: You can use this method to perform tasks such as cleaning up subscriptions or cancelling network requests.

Example:

```js

import React from 'react';

class MyComponent extends React.Component {
  state = {
    data: null
  }

  componentDidMount() {
    fetch('https://my-api.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.data !== this.state.data) {
      console.log('Data has changed!');
    }
  }

  componentWillUnmount() {
    console.log('Component is about to be unmounted!');
  }

  render() {
    return (
      <div className="my-component">
        {this.state.data ? this.state.data.message : 'Loading...'}
      </div>
    );
  }
}
```

Above we have used the `componentDidMount` method to fetch data from an API when the component is first mounted to the DOM. We have used the `componentDidUpdate` method to log a message when the data changes. And we are using the `componentWillUnmount` method to log a message when the component is about to be unmounted.

Mostly you can achieve the same results using other techniques such as state or by using `useEffect` hook. (You'll learn them later)

---

Till now, this much only. We'll learn more things soon. Thank you for reading. 

---

#### Read more

-  https://www.rahul.biz/blog/learn-react-first-react-app
- https://www.rahul.biz/blog/create-react-elements-with-jsx