React でのアダプティブ レイアウトの実装は、CSS のフレキシブル レイアウト (Flexbox) またはグリッド システムを使用して実現できます。以下は、Flexbox を使用して単純なアダプティブ レイアウトを実装する例です。
```jsx
import React from 'react';
'./App.css' をインポートします。
const App = () => { return ( <div className="container"> <div className="sidebar">サイドバー</div> <div className="main-content">メインコンテンツ</div> </div > ); }
デフォルトのアプリをエクスポートします。
「」
```css
/* App.css */
.container { 表示: フレックス; }
.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 グリッドや、Bootstrap、Ant Design、マテリアル UI などの一般的な UI ライブラリの使用を検討できます。これらはすべて、レイアウトを簡素化するための強力なレイアウト システムとコンポーネントを提供します。
Ant Design を使用した例を次に示します。
```jsx
import React from 'react';
import { レイアウト、メニュー、パンくずリスト } from 'antd';
'./App.css' をインポートします。
const { ヘッダー、コンテンツ、フッター } = レイアウト;
const App = () => { return ( <Layout className="layout"> <Header> <div className="logo" /> <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2'] }> <Menu.Item key="1">ナビゲーション 1</Menu.Item> <Menu.Item key="2">ナビゲーション 2</Menu.Item> <Menu.Item key="3">ナビゲーション 3 </Menu.Item> </Menu> </Header> <Content style={ { padding: '0 50px' }}> <Breadcrumb style={ { margin: '16px 0' }}> <Breadcrumb.Item>ホーム</Breadcrumb.Item> <Breadcrumb.Item>リスト</Breadcrumb.Item> <Breadcrumb.Item>アプリ</Breadcrumb.Item> </Breadcrumb> <div className="site-layout-content">メインコンテンツ</ div> </Content> <Footer style={ { textAlign: 'center' }}>フッター</Footer> </Layout> ); }
デフォルトのアプリをエクスポートします。
「」
この例では、Ant Design の `Layout` コンポーネントが使用されます。ここで、`Header`、`Content`、および `Footer` は、それぞれページの先頭、メイン コンテンツ領域、および下部を表します。このレイアウトは応答性が高く、さまざまな画面サイズに適応します。