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.

Key Concepts

• 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.

Types of Components

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.

Example (Function Component)

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.

// 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:

// 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;

Notes:

• 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 is an good resource.