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

• Author
• Recent Posts

Tanmay Sinha

Founder & CEO at Mr Programmer

Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users!

We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners.

We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace.

If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.

Latest posts by Tanmay Sinha (see all)

• The JS Developer’s Podcast [EP: 2] Variables and Data Manipulation - October 15, 2024
• YouTube Channels to Learn Coding: Top 9 Picks That Will Make a You Master - October 10, 2024
• The JS Developer’s Podcast [EP: 1] Introduction to JavaScript - September 27, 2024