【モダンJavaScript 最終回】webpackとBabelを組み合わせてReactの環境構築をしよう

🏰 IT KINGDOM ( https://it-kingdom.com ) ・React, TypeScript, ESLint, Prettierなど150本の講座（毎月6本を新しく追加） ・月に最低2回以上のライブコーディング講座 ・月に最低2回以上のオンラインイベント ・毎日開催されるもくもく会（朝・昼・夜） ・毎日開催のIT系のニュースをシェアするイベント ・質問できる環境、チーム開発など他にもたくさんのコンテンツ ・私といつでもお話できます。転職相談も承ります。 エンジニアを目指す方や一緒に勉強する仲間を作りたい方にオススメです。 入国された方はまずは説明会にお越しください！ 月に15回ほど開催しており、そこでサロンの使い方を説明します。 皆さんと交流できるのを楽しみにしています！😊✨ 📝 動画の概要 今日の講座は今までの集大成のような動画で、webpackとBabelを組み合わせてReactの環境構築を行っております。今までのモジュール・npm・Babel・webpackの知識を総動員しています。Create React AppやNext.jsなどのフレームワークの裏側は（多少実装方法に違いはあれど）このような仕組みになっているわけですね。この根本を理解していると技術の変化にもついていきやすくなります。ぜひ抑えてください👍✨ 前回の講座 → https://youtu.be/eFGfLyg0uLo 　　 📙 もくじ 0:00 前回のおさらい 1:21 今日やることはReactの環境構築 1:56 パッケージのインストール 2:58 dependenciesとdevDependenciesの違い 3:49 webpackにbabelの設定を書いていく 6:53 Reactの構文を書いていく 8:42 ブラウザでReactが動くか確認 10:21 今回のまとめ 🔥この動画だけは見よ！ Babelの概念理解はモダンなWebフロントエンド開発への第一歩だ！ https://youtu.be/FQBU4_uONjI 　 モジュールバンドラー「webpack」はReactやVueでも使われている https://youtu.be/KRIe_9ZD8as 　 ReactのclassName管理に便利なclasscatを紹介！ https://youtu.be/hin7PqFJUdk 　 開発体験を向上させるwebpack-dev-serverの動きを見てみよう https://youtu.be/eFGfLyg0uLo 　 👨‍💻 自己紹介 ヤフー株式会社でプログラマーとして働いていました！ 現在は起業家として新規サービスを開発中です！ 下記に興味がある方はチャンネル登録をおねがいします！ ・IT業界、Web系、プログラミング講座 ・リモートワーク、在宅勤務、副業 ・スタートアップ、ベンチャー、経営者、社長 🌏 SNS Twitter: https://twitter.com/shimabu_it Instagram: https://www.instagram.com/shimabu_it 🏷️ タグ #webpack #Babel #React