Introduction

React is a JavaScript library that has gained immense popularity among developers due to its simplicity and efficiency in building user interfaces. If you're new to programming or learning React, this blog post will guide you towards invoking a component when a button is clicked in ReactJS.

Before we start, let's clarify what we mean by invoking a component. In React, a component is a self-contained piece of code that outputs a piece of the user interface. So, invoking a component means we're asking the program to run that piece of code and show the output on the screen.

Think of it like a magic show. The magician (you, the programmer) invokes a trick (the component) by saying a magic word (clicking a button). The audience (the user) then sees the trick (the component's output) appear on the stage (the screen).

Preliminary Steps

Before we dive into the main topic, make sure you have NodeJS and npm (Node Package Manager) installed in your system. These are the tools that we need to set up a React environment. If you haven't installed these yet, you can download them from the official NodeJS website.

Once you've installed NodeJS and npm, you can create a new React application by running the following command in your terminal:

npx create-react-app button-click-app

Navigate into your new project:

cd button-click-app

And start the app by running:

npm start

You should now see a basic React application running in your browser.

Creating the Button Component

Let's begin by creating a simple button component. In your src folder, create a new file named ButtonComponent.js.

Add the following code to ButtonComponent.js:

import React from 'react';

const ButtonComponent = ({ handleClick }) => {
    return (
        <button onClick={handleClick}>
            Click me!
        </button>
    );
}

export default ButtonComponent;

In this code, we create a functional component named ButtonComponent. This component receives a prop called handleClick, which is a function that will be executed when the button is clicked. The button's label is "Click me!".

Creating the Main Component

Next, let's create a component that will be invoked when the button is clicked. For this example, we'll create a simple component that displays a message on the screen.

In your src folder, create a new file named MainComponent.js and add the following code:

import React from 'react';

const MainComponent = () => {
    return <h1>Hello, World!</h1>;
}

export default MainComponent;

This component simply returns a heading that says "Hello, World!".

Invoking the Main Component

Now, let's go to the heart of this tutorial: invoking the MainComponent when the button in ButtonComponent is clicked.

In your src folder, open the App.js file and import the two components we created:

import React, { useState } from 'react';
import ButtonComponent from './ButtonComponent';
import MainComponent from './MainComponent';

In the App component, we'll use a state variable to determine whether MainComponent should be shown. If the state variable is true, we'll show MainComponent; otherwise, we won't show anything.

We'll also pass a function to ButtonComponent that changes the state variable to true when the button is clicked. This is how we'll invoke MainComponent.

Here's the code:

function App() {
    const [showMain, setShowMain] = useState(false);

    const handleClick = () => {
        setShowMain(true);
    };

    return (
        <div className="App">
            <ButtonComponent handleClick={handleClick} />
            {showMain && <MainComponent />}
        </div>
    );
}

export default App;

In this code, useState(false) initializes showMain as false. handleClick is the function that we pass to ButtonComponent. When the button is clicked, handleClick is executed, setting showMain to true.

The line {showMain && <MainComponent />} is where we conditionally render MainComponent. If showMain is true, <MainComponent /> is returned; otherwise, nothing is returned (because false && anything is always false).

Conclusion

ReactJS provides us with a simple and elegant way to manage the display of components based on user interactions such as button clicks. By using state and conditional rendering, we can easily control when to invoke a component.

Remember, our magician analogy? It's just like that. You, as the magician, have set up a trick (MainComponent) to appear when a magic word (button click event) is said. The audience (users) are none the wiser and enjoy the magic (changes on the UI).

The key takeaway here is understanding the relationship between the state, user events, and the rendering of components. Once you grasp this concept, you'll find it much easier to build dynamic and interactive interfaces with React.

Keep practicing and happy coding!