react-tabsでタブを作成する【React】

■はじめに

ここでは、「react-tabs」というライブラリを使用してタブを作成します。

こちらの公式サイトに書かれているような物が作成できます。

■手順

以下のコマンドで「react-tabs」をインストールしてください。

npm install react-tabs

ソースコードの全量は以下（App.jsに上書きすれば動きます。）

import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

class App extends React.Component{
  render()
  {
    var textData = ""
    function changeText(e) {
      textData = e.target.value
    }
    function btnClick() {
      alert(textData);
    }
    return (
      <div>
        <Tabs>
            <TabList>
                <Tab>Tab1</Tab>
                <Tab>Tab2</Tab>
            </TabList>
            <TabPanel>
                <h2>タブ1</h2>
            </TabPanel>
            <TabPanel>
                <h2>タブ2</h2>
            </TabPanel>
        </Tabs>
      </div>
    );
  }
}

export default App;