Hello there! Today's voyage sails into the realm of React.js components. For clarity, here's an analogy - if React.js were a car, components would be the wheels, seats, and engine that allow it to function. We'll gain more insight into what components are, their types - namely, functional components and class components, and how to pass data between them using props.

Consider React.js as a robot. Each part, such as the head, arms, legs, or body - each is a component. Now, a component in React.js can be a simple button, a complex form, or an entire section of a webpage.

React offers two ways to create components: functional and class components.

Functional components are JavaScript functions that return JSX. Here's an example of a functional component:

This component returns a welcome message to JavaScript.

In React, you can define components using classes. These are referred to as class components. They make use of ES6 classes and extend from the React.Component base class. Here's how we could define the previous Greeting component as a class component: