# What is a component in React.js?

In React.js, **components are independent, reusable building blocks of the user interface (UI)**. They serve the same purpose as JavaScript functions but work in isolation and return **JSX** (JavaScript XML) code that describes what should appear on the screen.

**<mark>Key Concepts</mark>**

* **Reusability:** The primary benefit of components is code reuse. You can define a component once (e.g., a `Button`) and use it multiple times across your application.
    
* **Nesting:** Components can contain other components. A large application is essentially a tree of nested components, starting from a single root component (often named `App`).
    
* **Props (Properties):** Components communicate with each other using **"props"**. A parent component passes data down to its child components through props, similar to how HTML attributes work.
    
* **State:** Components can manage their own data that changes over time (e.g., user input in a form, whether a menu is open). This data is called "state" and makes components interactive.
    
* **Purity:** React components should be pure functions with respect to their props and state during the rendering phase; given the same inputs, they should always return the same output without modifying external objects or variables.
    

**<mark>Types of Components</mark>**

React primarily uses two types of components:

* **Function Components:** These are simple JavaScript functions that accept `props` as an argument and return JSX. They are the recommended approach in modern React, especially when used with Hooks for managing state and side effects.
    
* **Class Components:** Found in older React codebases, these are ES6 classes that extend `React.Component` and require a `render()` method to return JSX. While still supported, function components are now generally preferred.
    

**<mark>Example (Function Component)</mark>**

A component is typically defined in a file starting with an uppercase letter (e.g., `Profile.jsx`) and exported. In this example we are using functional component which is easy to read and understand. Also this is latest and widely used component type.

```javascript
// Profile.jsx file
function Profile(props) {
  //JSX (HTML which can access the variables)
  return (
    <div>
      <img src={props.imageUrl} alt={'Photo of ' + props.name} />
      <h2>{props.name}</h2>
    </div>
  );
}

export default Profile;
```

To use this component in another file, you import it and render it as a custom tag within your JSX:

```javascript
// App.jsx file
import Profile from './Profile.jsx'; // Import the component

function App() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      {/* Use the component and pass props */}
      <Profile name="Sara" imageUrl="https://i.imgur.com/MK3eW3As.jpg" /> 
    </div>
  );
}

export default App;
```

**<mark>Notes:</mark>**

* Any number of props can be passed but it is common practice to use object with spread operator for larger data.
    
* Function and Components can be passed props as well.
    
* React components are regular JavaScript functions, but **their names must start with a capital letter** or they won’t work!
    
* Without parentheses, any code on the lines after `return` will be ignored!
    
* Component can be defined inside other component but that is very slow and creates bugs. Instead create outside and use it.
    

For more detailed documentation and tutorials, the official [React Documentation](https://react.dev/learn/your-first-component) is an good resource.