{"componentChunkName":"component---src-templates-blog-js","path":"/blog/udemy-react-course","result":{"data":{"markdownRemark":{"frontmatter":{"title":"Udemy React Developer Courseを終えて","date":"2021-01-04","tags":["React"],"emoji":"👨‍🏫️","hero":{"publicURL":"/static/c3fbd71b12b726e00eec2b59f3c76786/react.svg"}},"html":"<p>Udemy の初心者用の React 学習コース「The Complete React Developer Course 」を終えたので、感想を書き残しておきたい。</p>\n<p>このコースの講師は Andrew Mead という方で、僕は YouTube の Gatsby のチュートリアル動画をきっかけで知った。エンジニアっぽくない説明が好きで、この React のコースの他にも 2 つ別のコースを購入してしまった。</p>\n<h3 id=\"jsx-シンタックスについて\">JSX シンタックスについて</h3>\n<p>この JavaScript と HTML のハーフみたいな書き方に始めは結構戸惑ったが、慣れるとかなり合理的な書き方に思える。条件的に HTML 要素を表示したりするのを素の HTML と JS で行おうとすれば結構面倒くさいが、JSX ならかなりスマートに書ける。\n　ちなみに、2 ヶ月ほど前 Gatsby でこのブログを制作した時に JSX に出会い「めっちゃええやん」と思い React を学ぼうと決意した経緯がある。</p>\n<h3 id=\"props-vs-state\">Props VS State</h3>\n<p>最初は戸惑ったが、\nState :　そのコンポーネントが有する「状態」\nProps : 親コンポーネントからもらった「プロパティー」</p>\n<p>という風に割とシンプルに理解。</p>\n<h3 id=\"redux\">Redux</h3>\n<p>コンポーネント間でのデータのやりとりが複雑化してくれば必須のライブラリらしい。色々 dispatch してデータを動かす。これが結構ややこしくて途中から「逆に Redux が複雑化させてね？」と思っていた。</p>\n<h3 id=\"test\">Test</h3>\n<p>Jest, Enzyme を使ったテスト環境の構築。めっちゃ時間かかる。けど、規模が大きく慣ればなるほどそのありがたみが増すのはわかる。</p>\n<h3 id=\"webpack\">Webpack</h3>\n<p>このコースのなかで一番「なんでこれをしなくてはいけないのか」がわからない要素だった。特に css-loader とか、entrypoint とか。</p>\n<h3 id=\"firebase\">Firebase</h3>\n<p>すごい便利。データベースとユーザー認証をしてくれる。かなり使い道がありそう。</p>\n<h3 id=\"hooks\">Hooks</h3>\n<p>Redux よりこっちの方が印象が良い。</p>\n<h2 id=\"総評\">総評</h2>\n<p>Andrew の説明は本当にわかりやすい。そしてやっぱり React は最高だと思う。\nそれと、React を書いていて思ったのが、結局は React も JS のライブラリだということ。JS のメソッドや考え方をきちんと理解していないと、「React がわからないのか JS がわからないのか問題」が発生してさらにごちゃごちゃな状況になりそう。\n先になると思うが Node.js を学びたいと思っているので、これからも JS の基礎力みたいなものは伸ばしていきたい。</p>","fields":{"slug":"udemy-react-course"},"headings":[{"id":"jsx-シンタックスについて","value":"JSX シンタックスについて"},{"id":"props-vs-state","value":"Props VS State"},{"id":"redux","value":"Redux"},{"id":"test","value":"Test"},{"id":"webpack","value":"Webpack"},{"id":"firebase","value":"Firebase"},{"id":"hooks","value":"Hooks"},{"id":"総評","value":"総評"}]}},"pageContext":{"slug":"udemy-react-course","next":{"fields":{"slug":"2020-lookback"},"frontmatter":{"title":"2020年プログラミング学習の振り返り"}},"prev":{"fields":{"slug":"prev-next-link-to-gatsby20210109"},"frontmatter":{"title":"Gatsby製ブログ記事で前後の記事を表示させる"}}}},"staticQueryHashes":["1869809034","1942088059","3159585216","440568431"]}