Understanding Components in ReactJS

One of the core concepts in ReactJS is the concept of components. You can think of components as reusable pieces of your application's user interface (UI). They are like Lego blocks from which you can build complex structures (i.e., your application).

Communication Between Components

In a typical ReactJS application, you will find multiple components interacting with each other. This interaction is often in the form of data being passed from one component to another. But how do you call one component from another? That's what we'll be exploring in this blog.

Parent and Child Components

In ReactJS, components often have a parent-child relationship. The parent component 'calls' the child component and can pass data to it. This is similar to how in a family, a parent can call a child and give them instructions.

Here's a simple example showing a parent component (App) and a child component (Greeting):

// App.js (Parent Component)
import React from 'react';
import Greeting from './Greeting';

function App() {
  return <Greeting />;
}

export default App;

// Greeting.js (Child Component)
import React from 'react';

function Greeting() {
  return <h1>Hello, World!</h1>;
}

export default Greeting;

In this code, the App component is calling the Greeting component.

Passing Data with Props

The parent component can pass data to the child component using something called props (short for properties). Think of props like arguments you pass to a function. They allow you to customize how a component behaves or what it displays.

Here's an example of passing data via props:

// App.js
import React from 'react';
import Greeting from './Greeting';

function App() {
  return <Greeting name="John" />;
}

export default App;

// Greeting.js
import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

In this example, the App component is passing a name prop to the Greeting component. The Greeting component then uses this prop to display a personalized greeting.

Calling a Component Function from Another Component

What if you want to call a function in a child component from a parent component? This can be achieved using refs (short for references).

A ref is like a "bookmark" that you can use to access a specific element or functionality within a component.

Here's an example of how to use refs:

// App.js
import React, { Component } from 'react';
import MyComponent from './MyComponent';

class App extends Component {
  myComponentRef = React.createRef();

  handleClick = () => {
    this.myComponentRef.current.myFunction();
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Call Function</button>
        <MyComponent ref={this.myComponentRef} />
      </div>
    );
  }
}

export default App;

// MyComponent.js
import React, { Component } from 'react';

class MyComponent extends Component {
  myFunction = () => {
    alert('Function called!');
  };

  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default MyComponent;

In this example, the App component is able to call the myFunction method of the MyComponent component using a ref.

Conclusion

In this blog post, we learned how to call one component from another in ReactJS, explored the parent-child relationship between components, and saw how to pass data using props or call a function using refs.

Remember that components are like Lego blocks: individually, they might not seem like much, but together, they can create something truly impressive. So don't be afraid to experiment with creating different components and seeing how they interact with each other. Happy coding!