Vue.全盛の中、社内メンバー向けのReactの簡単なチュートリアル。

シリーズ

その２の概要

Reactでトップナビゲーションのある普通のページを作る方法の習得
HeaderやFooter等の共通部分をパーツ化する方法の習得

最低限のレイアウトをしてみる

App.jsをいじってそれっぽいレイアウトにしてみます。

なお、デフォルトで生成されるコードは関数コンポーネントですが、Redux等を利用することを想定しclassコンポーネントに変更しています。

App.js

App.js

import React from 'react';

class App extends React.Component {
     render() {
          return (
               <div>
                    <nav style={{ background: "#666" }}>
                         <ul style={{ display: 'flex', listStyle: 'none' }}>
                              <li style={{ margin: 10 }}><a href="/" style={{ color: "#fff", textDecoration: 'none' }}>Home</a></li>
                              <li style={{ margin: 10 }}><a href="/about" style={{ color: "#fff", textDecoration: 'none' }}>About</a></li>
                         </ul>
                    </nav>

                    <header style={{ height: 200, background: "#ddd" }}>
                         header
               </header>

                    <div id="main" style={{ height: 300, background: "#eee" }}>
                         main
               </div>

                    <footer style={{ height: 100, background: "#666", color: "#fff" }}>
                         footer
               </footer>
               </div>
          );
     }
}

export default App;

動作確認してみます。

yarn start

下記のような画面が表示されればOKです。

ルーティング（ページ移動）の設定

ナビゲーションをクリックしても何も起こりません。それぞれHomeやAbout画面が表示されるようにしていきます。
ただ、create-react-appで作成できるアプリ？は基本SPA（Single Page Application）であるため、ページは1ページしかありません。なので通常のHTMLによるWeb作成と異なり、ルーティングという手法でページ移動を行います（ページはあくまで１ページで、移動しているように見せる）。

まず、ルーティングのためのライブラリをインストールします。react-routerというものが事実上の標準となっています。

yarn add react-router-dom

では、Home、Aboutそれぞれのページを作成してみます。
ここではApp.jsと同階層にscreensフォルダを作成し、その中にページ毎にHome.js, About.jsを作成していくようにしてみます。

ページの内容は上記で作成したApp.jsをベースに、クラス名や表示内容の一部を変更してみます。

screens/Home.js

まずはHome.js。

Home.js

import React from 'react';

+class Home extends React.Component {
     render() {
          return (
               <div>
                    <nav style={{ background: "#666" }}>
                         <ul style={{ display: 'flex', listStyle: 'none' }}>
                              <li style={{ margin: 10 }}><a href="/" style={{ color: "#fff", textDecoration: 'none' }}>Home</a></li>
                              <li style={{ margin: 10 }}><a href="/about" style={{ color: "#fff", textDecoration: 'none' }}>About</a></li>
                         </ul>
                    </nav>

                    <header style={{ height: 200, background: "#ddd" }}>
                         header
               </header>

                    <div id="main" style={{ height: 300, background: "#eee" }}>
+                         main（Home）
               </div>

                    <footer style={{ height: 100, background: "#666", color: "#fff" }}>
                         footer
               </footer>
               </div>
          );
     }
}

+export default Home;

screens/About.js

そして、About.js。

About.js

import React from 'react';

+class About extends React.Component {
     render() {
          return (
               <div>
                    <nav style={{ background: "#666" }}>
                         <ul style={{ display: 'flex', listStyle: 'none' }}>
                              <li style={{ margin: 10 }}><a href="/" style={{ color: "#fff", textDecoration: 'none' }}>Home</a></li>
                              <li style={{ margin: 10 }}><a href="/about" style={{ color: "#fff", textDecoration: 'none' }}>About</a></li>
                         </ul>
                    </nav>

                    <header style={{ height: 200, background: "#ddd" }}>
                         header
               </header>

                    <div id="main" style={{ height: 300, background: "#eee" }}>
+                         main（About）
               </div>

                    <footer style={{ height: 100, background: "#666", color: "#fff" }}>
                         footer
               </footer>
               </div>
          );
     }
}

+export default About;

App.js

Home.js, About.jsが準備できたら、App.jsの内容を変更しルーティングできるよう設定を行います。
各ページを読込、pathとページ（コンポーネント）をマッピングさせます。まあ、意味はわかると思います。

App.js

import React from 'react';
import { BrowserRouter, Route, Switch, NavLink } from 'react-router-dom';

//import screens
import Home from './screens/Home';
import About from './screens/About';

class App extends React.Component {
     render() {
          return (
               <BrowserRouter>
                    <Switch>
                         <Route exact path="/" component={Home} />
                         <Route exact path="/about" component={About} />
                         <Route render={() => (<p>Page not found.</p>)} />
                    </Switch>
               </BrowserRouter>
          );
     }
}

export default App;

動作確認する

yarn startさせ、動作を確認してください。

yarn start

Home, AboutをクリックするとURLおよびコンテンツ内容が変化しているはずです。
下記画面ではAboutボタンを押したら、コンテンツもAboutになっている。

共通部品化する

上記の例ではHome.js, About.jsに重複したコードが書かれており非常に冗長です。Nav, Header, Footer等は共通化したいので、それを行います。
共通化のためには各部を切り出して個別のコンポーネントに（部品化）します。
screensの中に、各部を担うjsを作成していきます。

Nav.js（ナビゲーション部）

Nav.js

import React from 'react';

class Nav extends React.Component {
    render() {
        return (
            <nav style={{ background: "#666" }}>
                <ul style={{ display: 'flex', listStyle: 'none' }}>
                    <li style={{ margin: 10 }}><a href="/" style={{ color: "#fff", textDecoration: 'none' }}>Home</a></li>
                    <li style={{ margin: 10 }}><a href="/about" style={{ color: "#fff", textDecoration: 'none' }}>About</a></li>
                </ul>
            </nav>
        );
    }
}

export default Nav;

Header.js（ヘッダー部）

Header.js

import React from 'react';

class Header extends React.Component {
    render() {
        return (
            <header style={{ height: 200, background: "#ddd" }}>
                header
            </header>
        );
    }
}

export default Header;

HomeContent.js（Homeのコンテンツ部）

HomeContent.js

import React from 'react';

class HomeContent extends React.Component {
    render() {
        return (
            <div id="main" style={{ height: 300, background: "#eee" }}>
                HomeContent
            </div>

        );
    }
}

export default HomeContent;

AboutContent.js（Aboutのコンテンツ部）

AboutContent.js

import React from 'react';

class AboutContent extends React.Component {
    render() {
        return (
            <div id="main" style={{ height: 300, background: "#eee" }}>
                AboutContent
            </div>

        );
    }
}

export default AboutContent;

Footer.js（フッター部）

Footer.js

import React from 'react';

class Footer extends React.Component {
    render() {
        return (
            <footer style={{ height: 100, background: "#666", color: "#fff" }}>
                footer
            </footer>
        );
    }
}

export default Footer;

ここまでで各部のコンポーネント化が完了しました。ここからはHome.jsとAbout.jsを各パーツを利用するように変更します。

Home

まずはHome.jsの変更。

Home.js

import React from 'react';

//screens
import Nav from './Nav';
import Header from './Header';
import HomeContent from './HomeContent';
import Footer from './Footer';

class Home extends React.Component {
    render() {
        return (
            <React.Fragment>
                <Nav />
                <Header />
                <HomeContent />
                <Footer />
            </React.Fragment>
        );
    }
}

export default Home;

About

ほぼ同じですが、About.jsの変更。違いはコンテンツ部だけです。

About.js

import React from 'react';

//screens
import Nav from './Nav';
import Header from './Header';
import AboutContent from './AboutContent';
import Footer from './Footer';

class About extends React.Component {
    render() {
        return (
            <React.Fragment>
                <Nav />
                <Header />
                <AboutContent />
                <Footer />
            </React.Fragment>
        );
    }
}

export default About;

動作確認

yarn startさせ、動作を確認します。変更はレウアウトだけなので動作に変化は無いはずです。

Navを少し改良する

動作に問題はありませんんが、HomeにいるのかAboutにいるのかわかりにくいので、Navの文字色を変更してみます。
NavLinkを利用すれば、active時のクラスやスタイルを指定、変更することができるので利用してみます。

Nav.js

import React from 'react';
import { NavLink } from 'react-router-dom';

class Nav extends React.Component {
    render() {
        return (
            <nav style={{ background: "#666" }}>
                <ul style={{ display: 'flex', listStyle: 'none' }}>
                    <li style={{ margin: 10 }}><NavLink exact to="/" style={{ color: "#fff", textDecoration: 'none' }} activeStyle={{ color: '#aaf' }}>Home</NavLink></li>
                    <li style={{ margin: 10 }}><NavLink exact to="/about" style={{ color: "#fff", textDecoration: 'none' }} activeStyle={{ color: '#aaf' }}>About</NavLink></li>
                </ul>
            </nav>
        );
    }
}

export default Nav;

これにより、各ページにいるときのスタイルを変更できます。

その２のおさらい

Reactで作成したSPAにてルーティングさせる方法がわかりました。
共通部をパーツ化する方法がわかりました。

以上です。その３につづく。