Compose

React JS encourages developers to compose complex user interfaces (UI) from smaller, reusable components, each responsible for rendering a small, self-contained part of the whole UI. This principle of "composition" leads to more modular code that's easier to maintain and reason about.

In React, composition involves using components as part of other components. For instance, you might have a Header component and a Footer component, each rendering different parts of a page layout. You could then create an App component that renders both the Header and Footer together.

To illustrate, here is a basic example of composing components in React:

```jsx
function Header() {
return (
<header>
<h1>My App</h1>
</header>
);
}

function Footer() {
return (
<footer>
<p>Copyright 2022</p>
</footer>
);
}

// Here you compose the Header and Footer components together inside the App component
function App() {
return (
<div>
<Header />
<p>Hello, world!</p>
<Footer />
</div>
);
}

ReactDOM.render(<App />, document.getElementById('root'));
```

Here, the Header and Footer components are being composed together within the App component to create the final UI. The fact that you can assemble complex UI this way – using independent, isolated parts – is one of the strengths of React JS and why it's so popular for building user interfaces.

In React, components can be composed together in various ways to achieve the desired functionality and design, and this architectural design approach is at the heart of the React library. It promotes code reusability, making it easy to maintain and scale applications without sacrificing performance.