What are Components In ReactJS | ReactJS Tutorial #63 min read

Hey Programmers, In this Post We Will be Learning About Components In ReactJS, In the Previous ReactJS Article Series We Learned About JSX In React, React Render Function, ES6 In React, And More You can Check Out The Complete ReactJS Tutorial Series Here:

Read Also: JSX In ReactJS | ReactJS Tutorial #5

What Components In ReactJS?

Components are free and reusable pieces of code. They fill a similar need as JavaScript capabilities, however, they work in disconnection and bring HTML back. There are two types of components: class components and function components. This tutorial will focus on functional components.

Promoted Products ➡ Junkyard Vinyl Stickers for laptops 

Creating a Component In React

When creating React components, component names must start with an uppercase letter.

Read Also: React Render HTML | ReactJS Tutorial #4

Class Component

Classcomponentsshouldextend the React.Component statement. This statement creates an inheritance to React.Component and gives the component access to React.Component’sfunctionality.

A component also needs a render() method. This method returns HTML.

class Fruits extends React.Component {
  render() {
    return <h2>This is Fruits</h2>;
  }
}

Function Component

Below is the same example as above, but instead made with a function component.

Function components also return HTML and behave similarly to class components, but function components require much less code, are easier to understand, and are preferred for this tutorial.

function Fruit() {
  return <h2>This is Fruit</h2>;
}

Rendering a Component In React

A React application contains a component called Fruit that returns an element. To use this component in your application, use a syntax similar to regular HTML: fruit/>

const root = ReactDOM.createRoot(document.getElementById('ReactDiv'));
root.render(<Fruit/>);

Props In ReactJS

Components can be passed as props representing properties.

Props are like function arguments that you send to your component as attributes.In the next tutorial, we will learn more about props.

Read Also: ES6 In ReactJS | ReactJS Tutorial #3

function Fruit(props) {
  return <h2>I Love {props.color} Fruits</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('ReactDiv'));
root.render(<Fruit color="green"/>);

Adding Components In Components

Promoted Products ➡ Laptop Stickers

function Fruit() {
  return <h2>This is Fruit</h2>;
}

function Apple() {
  return (
    <>
      <h1>Apple is Sweet</h1>
      <Fruit/>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('ReactDiv'));
root.render(<Apple/>);

Adding Components In Files

React is all about code reuse, so it’s a good idea to split your components into separate files.To do this, create a new file with a .js extension and paste the code inside it.

This is a New File Called Fruit.js

function Fruit() {
  return <h2>This is a Fruit</h2>;
}

export default Fruit;

To be able to use the Car component, we need to import the file into our application.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Fruit from './Fruit.js';

const ReactDiv = ReactDOM.createRoot(document.getElementById('ReactDiv'));
root.render(<Fruit/>);

So this Was it For this Blog See You In The Next One Till Then Keep Coding Keep Exploring!

Read Also: Introduction to ReactJS | ReactJS Tutorial #2