在 React 中实现自适应布局可以通过使用 CSS 的弹性布局（Flexbox）或者栅格系统来实现。下面是使用 Flexbox 实现简单的自适应布局的示例：
```jsx
import React from 'react';
import './App.css';
const App = () => {
return (
<div className="container">
<div className="sidebar">Sidebar</div>
<div className="main-content">Main Content</div>
</div>
);
}
export default App;
```
```css
/* App.css */
.container {
display: flex;
}
.sidebar {
flex: 1; /* 占据剩余空间的1部分 */
background-color: #eee;
}
.main-content {
flex: 2; /* 占据剩余空间的2部分 */
background-color: #fff;
}
```
在这个例子中，`.container` 使用了 Flexbox 布局，`.sidebar` 和 `.main-content` 分别占据了 `.container` 中的 1/3 和 2/3 的宽度。
如果你想要更高级的自适应布局，可以考虑使用 CSS Grid 或者一些流行的 UI 库，比如 Bootstrap、Ant Design、Material-UI 等，它们都提供了强大的布局系统和组件，可以简化你的布局工作。
下面是一个使用 Ant Design 的例子：
```jsx
import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import './App.css';
const { Header, Content, Footer } = Layout;
const App = () => {
return (
<Layout className="layout">
<Header>
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">Nav 1</Menu.Item>
<Menu.Item key="2">Nav 2</Menu.Item>
<Menu.Item key="3">Nav 3</Menu.Item>
</Menu>
</Header>
<Content style={
{ padding: '0 50px' }}>
<Breadcrumb style={
{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-content">Main Content</div>
</Content>
<Footer style={
{ textAlign: 'center' }}>Footer</Footer>
</Layout>
);
}
export default App;
```
在这个例子中，使用了 Ant Design 的 `Layout` 组件，其中 `Header`、`Content`、`Footer` 分别代表页面的头部、主要内容区域和底部。这个布局是响应式的，并且能够自适应不同的屏幕大小。