ReactJs Components

Components are the building blocks of a ReactJS application. A ReactJS component is a functional unit with a user interface. In ReactJS, when you create a user interface, it is either a component or a group of components used together. A component can be a simple user interface element like a button, or a complete element like a card UI, etc.

In ReactJS, a component is a JavaScript function, that returns code for the user interface. Traditionally, in a webpage, there was HTML code and CSS code for creating the user interface, and JavaScript code to make the UI functional. Now, with ReactJS, all this is grouped inside ReactJS components.

ReactJS has two types of components - The function component and the Class component (almost deprecated).

Class components are sort of deprecated, and if you are learning ReactJS now, or creating a new ReactJS project, we would recommend that you only create function components in your React app.

What is a Component in ReactJS?

• A component is a function user interface element. It can be a button, a text field, an image, or a card element with a button, a text field, and an image.

• A component can use other ReactJS components inside it.

• Components act independently - handling its functionality and user interface.

• Components are reusable.

Let's see a simple example, in ReactJS, if you want to create a card with an Image, Title, and Like button, then you can create 3 components,

• Image component

• Title component

• LikeButton component

• All these 3 components are combined to create a Card component. So every individual component is a reusable unit.

As you can see in the example above, using ReactJS you can build reusable UI components. The Image, Title, and Like components were used together inside the Card component, similarly, these can be used in some other components too.

Creating React Function Components

Watch Video

ReactJS Function Component

A Function component is nothing but a JavaScript function. A function that returns some UI code written using JSX.

Let's create a simple React component.

function WelcomeMsg() {  
    return <h1>Welcome to the Studytonight</h1>;  
}  

In the code above, we have a JS function with the name WelcomeMsg, it expects no parameters and returns some JSX code, which will be rendered as a heading by ReactJS.

The name of the Function component should start with a capital letter or an uppercase alphabet. This style of naming is called Pascal Case.

Use ReactJS Component

A ReactJS component is a JS function, but in JSX, the syntax for calling a React component is a little different.

If you want to use the WelcomeMsg component, this is how you do it,

<WelcomeMsg />

In a ReactJS project, if you want to use the WelcomeMsg component and render the React app, then use <WelcomeMsg /> component in the index.js, or you can also call it in the App.js file.

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

Internally, when ReactJS is compiled, the JSX syntax is converted to JS function call syntax.

Function Component with Props

JavaScript functions can expect parameters. Similarly, ReactJS components take props. You can pass on data as an object to a ReactJS component while calling it. Inside the ReactJS component, you can use the prop values in the JSX code to use them in the user interface.

function WelcomeMsg(props) {  
    return <h1>Hi, {props.name}! Welcometo the Studytonight</h1>;  
}  

The syntax for calling the above component with props is slightly different. Just like HTML tags have attributes to pass on additional values for the tag, similarly in JSX, when we have to call a function component with props, we do it like this,

<WelcomeMsg name="Abhishek"/>

You can pass any number of arguments while calling a function component.

Create a ReactJS Component in a JS file

You can create a ReactJS component in a separate JavaScript file (.js).

Let's see an example,

function WelcomeUser(props) {  
    return <h2>Hi, {props.name}</h2>;
}

To make the above component available in other JS files, you will have to export it too.

function WelcomeUser(props) {  
    return <h2>Hi, {props.name}</h2>;
}

export default WelcomeUser;

Now the above component can be used in any other JS file.

Multiple ReactJS Component in a JS file

You can create multiple ReactJS components in a single JavaScript file.

Let's see an example,

function WelcomeUser(props) {  
    return <h2>Hi, {props.name}</h2>;
}  

function MyApp() {
    return <h1>Welcome to Studytonight</h1>;
}

If you want to use a function component in some other JS file, you must export the function so that it can be used in other files (modules) using the import statement.

Hence the code will look like this,

export function WelcomeUser(props) {  
    return <h2>Hi, {props.name}</h2>;
}  

export function MyApp() {
    return <h1>Welcome to Studytonight</h1>;
}

Now these components can be used in other JS files too.

Components inside Components

You can call one component inside another component too. Let's see an example,

WelcomeUser.js

function WelcomeUser(props) {  
    return <h2>Hi, {props.name}</h2>;
}

export default WelcomeUser;

MyApp.js

import WelcomeUser from './WelcomeUser.js'

function MyApp() {
    return (
        <h1>Welcome to Studytonight</h1>
        <WelcomeUser />
    );
}

export default MyApp;

In the above example, WelcomeUser component is used inside the MyApp component.