Javascript library React creates reusable Components. React components are reusable pieces of code that return HTML elements. To break code down into smaller pieces that can be reused repeatedly, we use React Components. React Components are basically Javascript Function

React components have two types:

1. Class components
2. Function components

Table of Content:

React component class:

In javascript, we use the class which uses the extend which means it is inherited from the other class. In the old code of React, we used the class in our project which is inherited from React. Components. Class components require the render() method which returns the HTML.

Here is an example OF Class components:

class Header extends React.Component {
  render() {
    return 
Header code here
;
  }
}

React component Function:

Function components are javascript functions that return react element (JSX). Function components use the return() method. Function components are better than class components because they use less code and it is easy to understand.

Here is the same example of function components:

function Header() {
  return 
Header code here
;
}

React component naming convention

• The name of the component always starts in Upper case 
• Pascal case is also used for naming the components

Component Rendering:

How to use the components? the answer is that components can be rendered in the application and use the same syntax name as the name of the React Components.

Mostly components are rendered into the app.js and app.js is rendered into the index.js which is the main file of the code.

Here is an example of the rendering of components

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

const App = () => {
  return (
    )
}

export default App;

Components in File:

We make a file in the src folder name components where all of our components are present. We use these components many times in our many projects because these are in the form of pieces. We use export and import functions to use them.

JSX:

Many attributes are different from HTML as class in html is used as a className in jsx and for is used in HTML and htmlfor is used in the jsx and many single tag is closed in the jsx

The extension of these components is .js or .jsx

File names always start with uppercase.

React Fragment:

When many html tags are present in the components then we use a react fragment. Div gave an error when many HTML tags are placed in the div tag. Soo due to the error we use react fragment

import React from 'react';
import Header from './Header';
import Content from './Content';
import Footer  from './Footer';

const App = () => {
  return (

    >
  )
}

export default App;

Props:

Props are basically a property that passed data from one function component to another function components as parameters. We use the curly brackets to use the props in the following way.

function Header(props) {
  return 
I am a { props.color }!
;
}

const myElement = ;

React component CSS:

In the src folder, we make a css folder or make the place the .css file into the component file. But We make a separate folder for the CSS and import it into the Component in the following way

suppose that wehave file name app.css and now we are adding css into the app.js into the following way

import React from 'react';
import".css/App.css"
import Header from './Header';

const App = () => {
  return (
    )
}

export default App;

Components into Components:  

We also use components inside the other react components the following way

function Header() {
  return 
Welcome to techpedia
;
}

function Navbar() {
  return (
    
       
Home
      
About Us
      
Contact 
      
Services
      
    >
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

The post What Is a React Component in React first appeared on techpedia.