序章
Webアプリを作成したことがある場合は、タブ付きのドキュメントインターフェイスを作成した可能性があります。 タブを使用すると、複雑なインターフェイスを管理可能なサブセクションに分割して、ユーザーがすばやく切り替えることができます。 タブは一般的なUIコンポーネントであり、実装方法を理解するために重要です。
この記事では、単独で、または既存のコンポーネントと一緒に使用できる、再利用可能なタブコンテナコンポーネントを作成する方法を学習します。
前提条件
このガイドを開始する前に、次のものが必要です。
- Node.jsを実行する開発環境が必要になります。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04にNode.jsをインストールする方法。
- このチュートリアルでは、 Create ReactAppを使用してアプリを作成します。 Create React Appを使用してアプリケーションをインストールする手順については、 CreateReactAppを使用してReactプロジェクトを設定する方法を参照してください。
- また、 JavaScriptでコーディングする方法にあるJavaScriptの基本的な知識と、HTMLおよびCSSの基本的な知識も必要です。 HTMLとCSSの優れたリソースは、 Mozilla DeveloperNetworkです。
このチュートリアルは、Node.jsバージョン10.20.1およびnpmバージョン6.14.4でテストされました。
ステップ1—空のプロジェクトを作成する
このステップでは、 Create ReactAppを使用して新しいプロジェクトを作成します。 次に、プロジェクトのブートストラップ時にインストールされたサンプルプロジェクトと関連ファイルを削除します。
まず、新しいプロジェクトを作成します。 ターミナルで次のスクリプトを実行し、create-react-appを使用して新しいプロジェクトをインストールします。
npx create-react-app react-tabs-component
プロジェクトが終了したら、次のディレクトリに移動します。
cd react-tabs-component
新しいターミナルタブまたはウィンドウで、 CreateReactApp開始スクリプトを使用してプロジェクトを開始します。 ブラウザは変更時に自動更新されるため、作業中はこのスクリプトを実行したままにします。
npm start
これにより、ローカルで実行されているサーバーが起動します。 プロジェクトがブラウザウィンドウで開かなかった場合は、http://localhost:3000/にアクセスしてプロジェクトを開くことができます。 これをリモートサーバーから実行している場合、アドレスはhttp://your_domain:3000になります。
ブラウザには、CreateReactAppの一部として含まれているテンプレートReactアプリケーションが読み込まれます。
完全に新しいカスタムコンポーネントのセットを構築するので、空のプロジェクトを作成できるように、ボイラープレートコードをクリアすることから始める必要があります。
まず、テキストエディタでsrc/App.jsを開きます。 これは、ページに挿入されるルートコンポーネントです。 すべてのコンポーネントはここから始まります。 App.jsの詳細については、 Create ReactAppを使用してReactプロジェクトをセットアップする方法を参照してください。
次のようなファイルが表示されます。
react-tabs-component / src / App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
import logo from './logo.svg';の行を削除します。 次に、returnステートメントのすべてを置き換えて、divタグのセットとh1を返します。 これにより、タブデモを表示するh1を返す有効なページが表示されます。 最終的なコードは次のようになります。
react-tabs-component / src / App.js
import React from 'react';
import './App.css';
function App() {
return (
<div>
<h1>Tabs Demo</h1>
</div>
);
}
export default App;
テキストエディタを保存して終了します。
最後に、ロゴを削除します。 アプリケーションで使用することはありません。作業中に未使用のファイルを削除する必要があります。 長期的には混乱からあなたを救うでしょう。
ターミナルウィンドウで、次のコマンドを入力してロゴを削除します。
rm src/logo.svg
プロジェクトが設定されたので、最初のコンポーネントを作成できます。
ステップ2—Tabsコンポーネントを作成する
このステップでは、新しいフォルダーと、各TabをレンダリングするTabsコンポーネントを作成します。
まず、srcディレクトリにcomponentsというフォルダを作成します。
mkdir src/components
componentsフォルダー内に、Tabs.jsという名前の新しいファイルを作成します。
nano src/components/Tabs.js
次のコードを新しいTabs.jsファイルに追加します。
react-tabs-component / src / components / Tabs.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Tab from './Tab';
これらは、このコンポーネントを作成するために必要なインポートです。 このコンポーネントは、アクティブなタブを追跡し、タブのリストとアクティブなタブのコンテンツを表示します。
次に、状態を追跡し、Tabs.jsのimportsの下にアクティブなタブを表示するために使用される次のコードを追加します。
react-tabs-component / src / components / Tabs.js
...
class Tabs extends Component {
static propTypes = {
children: PropTypes.instanceOf(Array).isRequired,
}
constructor(props) {
super(props);
this.state = {
activeTab: this.props.children[0].props.label,
};
}
onClickTabItem = (tab) => {
this.setState({ activeTab: tab });
}
...
初期状態はアクティブなタブに追加され、作成するタブの配列の0から始まります。
onClickTabItemは、ユーザーがクリックした現在のタブにアプリの状態を更新します。
これで、レンダリング関数を同じファイルに追加できます。
react-tabs-component / src / components / Tabs.js
...
render() {
const {
onClickTabItem,
props: {
children,
},
state: {
activeTab,
}
} = this;
return (
<div className="tabs">
<ol className="tab-list">
{children.map((child) => {
const { label } = child.props;
return (
<Tab
activeTab={activeTab}
key={label}
label={label}
onClick={onClickTabItem}
/>
);
})}
</ol>
<div className="tab-content">
{children.map((child) => {
if (child.props.label !== activeTab) return undefined;
return child.props.children;
})}
</div>
</div>
);
}
}
export default Tabs;
このコンポーネントは、アクティブなタブを追跡し、タブのリストとアクティブなタブのコンテンツを表示します。
Tabsコンポーネントは、作成する次のコンポーネントTabを使用します。
ステップ3—Tabコンポーネントを作成する
このステップでは、個々のタブを作成するために使用するTabコンポーネントを作成します。
componentsフォルダー内にTab.jsという名前の新しいファイルを作成します。
nano src/components/Tab.js
Tab.jsファイルに次のコードを追加します。
react-tabs-component / src / components / Tab.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
もう一度、reactからReactをインポートし、PropTypesをインポートします。 PropTypesは、コンポーネントの小道具の型チェックを実行するために使用される特別なpropTypesプロパティです。
次に、importステートメントの下に次のコードを追加します。
react-tabs-component / src / components / Tab.js
...
class Tab extends Component {
static propTypes = {
activeTab: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
};
onClick = () => {
const { label, onClick } = this.props;
onClick(label);
}
render() {
const {
onClick,
props: {
activeTab,
label,
},
} = this;
let className = 'tab-list-item';
if (activeTab === label) {
className += ' tab-list-active';
}
return (
<li
className={className}
onClick={onClick}
>
{label}
</li>
);
}
}
export default Tab;
このコンポーネントのPropTypesは、activeTabおよびlabelが文字列であり、必須であることを確認するために使用されます。 onClickも必要な機能に設定されています。
Tabコンポーネントはタブの名前を表示し、タブがアクティブな場合はクラスを追加します。 クリックすると、コンポーネントはハンドラーonClickを起動し、Tabsコンポーネントにどのタブをアクティブにするかを知らせます。
ステップ4—アプリをスタイルするためのCSSの追加
コンポーネントの作成に加えて、CSSを追加して、コンポーネントにタブの外観を与えます。
App.cssファイル内で、デフォルトのCSSをすべて削除し、次のコードを追加します。
[label react-tabs-component/src/App.css] .tab-list {
border-bottom: 1px solid #ccc;
padding-left: 0;
}
.tab-list-item {
display: inline-block;
list-style: none;
margin-bottom: -1px;
padding: 0.5rem 0.75rem;
}
.tab-list-active {
background-color: white;
border: solid #ccc;
border-width: 1px 1px 0 1px;
}
これにより、タブがインラインになり、activeタブに境界線が表示され、クリックしたときに目立つようになります。
ステップ5—App.jsを更新する
コンポーネントと関連するスタイルが配置されたので、それらを使用するようにAppコンポーネントを更新します。
まず、インポートを更新して、Tabsコンポーネントを含めます。
react-tabs-component / src / App.js
import React from 'react'; import Tabs from "./components/Tabs"; import "./App.css";
次に、returnステートメントのコードを更新して、インポートされたTabsコンポーネントを含めます。
...
function App() {
return (
<div>
<h1>Tabs Demo</h1>
<Tabs>
<div label="Gator">
See ya later, <em>Alligator</em>!
</div>
<div label="Croc">
After 'while, <em>Crocodile</em>!
</div>
<div label="Sarcosuchus">
Nothing to see here, this tab is <em>extinct</em>!
</div>
</Tabs>
</div>
);
}
export default App;
ラベルが関連付けられたdivは、タブにコンテンツを提供します。
TabsがAppコンポーネントに追加されると、セクションを切り替えることができるタブ付きインターフェイスが機能するようになります。
このGithubリポジトリを表示して、完成したコードを確認できます。
結論
このチュートリアルでは、Reactを使用してタブコンポーネントを構築し、アプリケーションの状態を管理および更新しました。
ここから、スタイルのReactコンポーネントを使用して、さらに魅力的なUIを作成する他の方法を学ぶことができます。
また、DigitalOceanの How To Code in React.js シリーズ全体をフォローして、Reactを使用した開発の詳細を学ぶこともできます。
