❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

【書籍紹介】挫折しない!?基本から学べるReact実践の教科書とは

テクニック

【書籍紹介】挫折しない!?基本から学べるReact実践の教科書とは

はじめに

別記事にてありましたがpugやsassが時代遅れとなってきた今、これから伸びて行くライブラリである「React」を実践に取り込んでいくために学ばないといけないと感じ、いくつかある書籍の中でこちらを選びました。

「React」の習得に苦戦する理由は「JavaScript」への理解不足

これは著者の方が前書きにて述べているのですがReactを学ぶ上でまずはJavascriptへの理解、学習順序を知っていないと挫折しやすいということでした。
私もJavascriptがとても苦手で果たして挫折せず続けて学んでいけるのか最初は不安でした。
結論、挫折せず続けていられています。

Reactの本ということですが、1章〜3章まではモダンJavascriptの歴史や記述方法などの基本的なことを段階的に知ることによってそれぞれがどのような働きをもっているのかということを理解しながら進めていくことが出来ます。
この時点でwebサイトや他の本とは違い、ゴールに至るまでの過程を1つずつ手を動かしながら頭で理解しやすいと感じました。

Reactの基礎を学ぶ

ここまできてようやく4章からReactに入り始めます。
Reactの基本であるJSX記述のルールから入り、コンポーネント、スタイルの扱い方、props、stateを順序立てて進めていけるように工程まで細かく記述されています。
その為、全く触ったことがなかったにも関わらず実際に本の順序通り進めていくことで苦手意識もなく内容を学ぶことが出来ます。

CSSを絡めたReact

CSSの適用方法はたくさんあり、一般的な「Inline Styles」から「CSS Modules」「Styled JSX」「styled components」「Emotion」最近よく他の方の記事でもみる「Tailwind CSS」等の各記述方法が詳しく記述されていました。

再レンダリングの仕組みと最適化

再レンダリングが起きる条件
・Stateが更新されたコンポーネント
・Propsが更新されたコンポーネント
・再レンダリングされたコンポーネント配下のコンポーネント
階層としてイメージすると上の階層にあるコンポーネントが再レンダリングされた時はそれ以下のコンポーネントも同じように際レンダリングされます。
しかし、これらが大きいものになると毎回無駄な際レンダリングによってパフォーマンスの低下に繋がってしまいます。

そこでコンポーネントのメモ化(カッコで囲む)をすることで親のコンポーネントが再レンダリングしても子のコンポーネントの再レンダリングを防ぐことが可能です。

まとめ

まだもう少し本の内容的には続きがありますがここまでこの本を使ってきて、1つ1つの工程やそれらの意味をしっかりと理解することで苦手と感じていたものもそうではなく感じるようになってくることから、何事も基礎の部分を丁寧に理解していくことの重要性を感じました。JavascriptやReactに限らず、苦手と思っていた分野に向き合うためには初心に戻ってみるということも必要だと思いました。

 

【書籍紹介】

モダンJavaScriptの基本から始める React実践の教科書 (最新ReactHooks対応) (Informatics&IDEA)

この記事を書いた人
yonekuraのアイコン

yonekura

気になったモノを自身の勉強の為、記録として書いています。