Building your first ReactJS component

In this blog, we will create a ReactJs component from scratch. During the create this component we will also see how to set up a react application too. We will use vite builder for our React application because it is lightweight and faster.

Setting up environment
```
 npm create vite@latest test-app -- --template react
```
Now go to this folder and install the packages.
```
 cd test-app
```
Then you need to install the packages. for this command is given below.
```
 npm install
```

Create a new File name Button.tsx

The component is a reusable code in React which can be a function or a class. so will create a Button component in the function-based component and class-based component both.

Function-based components are pure javascript functions.

 import { ButtonHTMLAttributes, FC , ReactNode } from 'react';

 type P = {
     children: ReactNode,
 } & ButtonHTMLAttributes<HTMLButtonElement>

 const Button: FC<P> = ({ children, ...rest }) => {
     return <>
         <button {...rest}>{children}</button>
     </>
 }

 export default Button;

The same Button component is in the class-based approach.

 import { Component, ReactNode } from "react";

 type S = {}

 type P = {
     children: ReactNode
 }

 class Button extends Component<P, S>{
     constructor(props: P) {
         super(props);
     }

     render(): ReactNode {
         return <div>
             <button {...this.props}>{this.props.children}</button>
         </div>
     }
 }
 export default Button;

These components are reusable so a component can be used in another component. We just have to import it.

In React, Import and Export statements are used to manage the way we create and use components. By using the export keyword on a function or class, we can make that component available to other modules using named exports or default exports.

Here is a code example of named exports:

export function Component1() {
  return <h1>This is component 1</h1>;
}

export function Component2() {
  return <h1>This is component 2</h1>;
}

Here, we are using the export keyword to explicitly specify which components we want to make available outside this module. We can then import these components like this:

import { Component1, Component2 } from './components';

Here is a code example of a default export:

export default function MyComponent() {
  return <h1>This is my component</h1>;
}

Here, we are using the export default syntax to export the component without giving it a specific name. We can then import this component like this:

import MyComponent from './components';

Notice that we didn't need to use the curly braces when importing a default export. This is because there can be only one default export per module.

Thank you for the reading. make sure to leave a comment.