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

はじめに

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

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

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

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

Reactの基礎を学ぶ

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

CSSを絡めたReact

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

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

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

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

まとめ

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