ゆるふわ技術日誌

ゆるくふわっと広く浅く。

StatelessなComponentは関数を使おうね…という話 #10

今日やったこと

…最初に言っておくと、酒を飲んだら思った以上に酔ってしまいそんなに進捗がありません…。全休だったのに…。

StatelessなComponentを作るときは関数を使おうね

今日も今日とてReactのお話です。

進捗は相変わらず亀よりも遅いですが、少しずつ例のポートフォリオの作業を進めています。

まずは1ファイルにコンポーネントを書きまくるのはあまりに行儀がよろしくないのでファイルを分けました。

ついでなのでクラスを使った方法ではなく関数を使った方法でコンポーネントをかきかえました。

こんな感じ。

import React from 'react'

import HeadSection from './HeadSection'
import AboutSection from './AboutSection'

//class App extends React.Component {
//  render() {
//    return (
//      <div>
//        <HeadSection title="uutarou's profile"/>
//        <AboutSection/>
//      </div>
//    );
//  }
//}

const App = () => {
  return (
    <div>
      <HeadSection title="uutarou's profile"/>
      <AboutSection/>
    </div>
  );
}

export default App;

ES6のArraw関数を使って書き換えてみました。イケてる。

できることなら関数を使ってコンポーネントを作ることが推奨されているようなので積極的に使っていきたいですね。

ちなみに今回の参考記事はこちら。

qiita.com

雑談

疲れてるのか、ほろよい1缶でふらふらしています。

今日は寝ます…。

明日から本気出す。