TechpitのReact教材(YouTubeビューワー)

はじめに

Techpitの教材を久しぶりに買ったので学びのメモです。

教材は以下です。

【React + Atomic Design】YouTubeビューワーを作りながらコンポーネント指向を学ぼう!

✅その他参考

Babelドキュメント
Webpackドキュメント
Storybookドキュメント
Atomic Designドキュメント
PropTypes

概要

・create-react-appを使わないでプロジェクト生成する方法を学べる
※そもそもcreate-react-appはbabelWebpackを隠蔽しているだけ。
※「りあクト!」ではむしろcreate-react-appを推奨しているので、初学者はcraコマンド使った方が良いかも??cra使わないとStyled-componentなどのライブラリもbabel.config.jsに追記したりする必要がある。

🤔いろんな教材でここ辺りの説明をしているので、すべてを集約している公式を一通り読んでおくのが効率的かもしれません。

・Webpack-dev-serverを用いずにExpressサーバーを使う。

・Storybookでコンポーネント管理

🤔.storybook/main.jsといった設定ファイルを作ったりとこれまた学習コストあり。バージョンによって書き方かなり変わるらしいので注意。
→コンポーネントの数が増えてくると重宝するのかもしれない
→現場でどの程度使われているのかは気になる。

学び

・react-router-domのuseHistory関数

参考:React RouterがHooks対応したので使い方を整理する

・style-componentsをグローバルに適用する手法

src/style/GlobalStyle.jsを作成、createGlobalStyle関数を用いる。

※スタイルをJSファイルに記述してもいいので便利。
※style-componentsはコンポーネントにCSSクラス名を自動で設定し、そのクラスに対するスタイル定義をstyleタグとして埋め込むことができる。

・Atomic Designについてざっくりだが学べた。

Atoms(原子)を最小単位
Molecules(分子)はAtoms層のコンポーネントfを複数組み合わせて作った機能単位
Orgamisms(有機体)はコンポーネントで完結するコンポーネント
Templateはページのレイアウトに対する責務、ページの雛形となるコンポーネント。
PagesはTemplates層コンポーネントに実際のコンテンツを流し込んだもの

・PropTypesでTypeScriptを使わずに型チェック

その他参考:PropTypes を用いた型チェックTypeScriptでReact開発をするとPropTypesを書かなくてもよくなりそう

・PresentationとContainerコンポーネントをわけて同一ファイル内に作成している
※コンポーネント名でディレクトリを作成して、ファイル名はindex.jsx。これに加えて同一ディレクトリないにStorybook用のファイル(index.stories.jsx)を格納している。

・YoutubeAPIの利用 jsonファイルによるAPIエンドポイントの作成

おわりに

Reactの機能を一通り網羅した教材な気がしました◎
※現場で使うミニマムマスト的な。

繰り返し読み込んで内容を理解し、しっかり個人開発で使えるようにしていきたいと思いました。

コメントを残す