React.js 勉強 #2

React.jsを学んでいく学習記録になります。
今までの記録はこちらから。

React.js 勉強 #1

手を動かしてみた

調べてみると、Reactはコンポーネントベースで構築していく必要があるっぽいので、とりあえず慣れるためにも触っていきます。
Vue.jsでもコンポーネント化をしてきたので、僕の中ではコンポーネント = パーツ化レベルの認識ですが、一旦コンポーネント化を進めていこうと思いました。

僕の中で作りたいアプリケーションがあったので、とりあえずHeaderとFooterを作成していきます。

前回作成したアプリケーションの中身を見てみると、src/index.jsにAppコンポーネントを読み込んでいる記載があったので、index.jsにHeaderとFooterのコンポーネント読み込めばいいんじゃね？ということで・・・

Headerコンポーネント作成＆読み込み

まずは、srcディレクトリ内にcomponentsというフォルダを作成し、Header.jsを作成。
どうやらReactのコンポーネント化は

• クラスコンポーネント
• 関数コンポーネント

があるみたい。

クラスコンポーネントの作り方

src/components/Header.js

import React from 'react'

class Header extends React.Component {
  render() {
    return (
      <header>
        ここはヘッダーになります。
      </header>
    )
  }
}

export default Header

クラスコンポーネントにはrender()が必ず必要で、return内で書いた記述が呼び出し先で描画されてるのかな。
ちなみにreturnでは1つの要素で囲む必要あり。つまり、

src/components/Header.js

import React from 'react'

class Header extends React.Component {
  render() {
    return (
      <header>
        ここはヘッダーになります。
      </header>
      <div>
        ほげ
      </div>
    )
  }
}

export default Header

上記だとエラーになるので、注意。

関数コンポーネントの作り方

src/components/Header.js

import React from 'react'

const Header = () => {
  return (
    <header>
      ここはヘッダーになります。
    </header>
  )
}

export default Header

クラスコンポーネントと比べると、かなりスッキリしたプログラムコードになる印象。
どっちがいいかとかはまだ分からないのですが、コードの見やすさ的にも関数コンポーネントのほうが推奨されてる気がします。

Headerのコンポーネントファイルを作成したら、あとは読み込みだけ！

Appコンポーネントを読み込んでいたsrc/index.jsに

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Header />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

importでHeaderファイルを指定して、Headerを読み込む用記述すると・・・

無事、Headerを表示することに成功しました！

同じようにFooterコンポーネントの作成＆読み込み

同じようにFooterも作っていきます。（今回はクラスコンポーネントで作ってますが、後々関数コンポーネントに切り替える予定です）

src/components/Footer.js

import React from 'react'

class Footer extends React.Component {
  render() {
    return (
      <div>
        &copy;
      </div>
    )
  }
}

export default Footer

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';
import App from './App';
import Footer from './components/Footer';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Header />
    <App />
    <Footer />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

index.jsにFooterコンポーネントを読み出してみると・・・

無事、Footerにコピーライトを表示することができました！

まだまだ表示を行っただけなので、レイアウトは酷いものですが、これからCSSフレームワークを使って整えて行きたいと思っています。
考えているのはmaterialuiっていうのを考えています！

CSSフレームワーク自体、ほとんど使ったことがなく（bootstrapぐらい）、これもなかなか苦戦しそうですが・・・
頑張っていきます！