カタログ
序文
前回は3つの用語を紹介した：バベルとは何か？Webpackとは？Npmとは？
この投稿では、Reactプロジェクトを構築するための実践的なアプローチを紹介する：建築環境、Reactプロジェクトを作成します、プロジェクトの立ち上げ、React Extension Kitの使い方。
建築環境
Reactアプリを構築する際には、まずインターネットからダウンロードする必要があるすべてのツールがあり、それは以前の記事で説明したとおりだ。
Node.js
Node.jsにはnpmサービスが組み込まれており、Reactパッケージやその他のパッケージを素早くダウンロードすることができる。
Reactツールのインストール Reactアプリの作成は、JavaScriptのインストラクションをコンピュータにインストールするプロセスです。
こっちに来てくれ。公式ウェブサイト画面の右上隅で言語を選択でき、インターフェイスは繁体字中国語をサポートしている。
- LTS: 安定版で、公式には長期間メンテナンスされ、通常は30ヶ月以上続く。
- Current：最新の機能を備えているが、安定していない。
Window、MacOS、Linuxを問わず、インストールが成功したかどうかを確認したい場合は、ターミナルを開いて以下のコマンドを入力すれば、インストールが完了したかどうかを知ることができる。
node -v
Reactプロジェクトの作成
方法1：CRA公式指導の設定
Node環境がセットアップされたら、いよいよ最初のReactプロジェクトをビルドしよう。リアクト・ウェブサイトプロジェクトを素早く構築する方法は他にもあるが。
Node.jsが正常にインストールされたら、ターミナルで以下のコマンドを入力し、対応する場所に対応するファイルとフォルダを持つmy-appフォルダを作成する。
npx create-react-app my-app
これがフォルダ構造で、my-appフォルダには3つのフォルダと3つのファイルがある。
node_modulesフォルダにはすべてのパッケージが置かれ、npm installでインストールされたパッケージもこのフォルダに置かれる。package.jsonはこのプロジェクトの設定を行う。
/my-app
-/public
-/node_modules
-/src
-package.json
-README.md
-package-lock.json
プロジェクトの立ち上げ
プロジェクトを構築した後、どのようにスタートさせるのか？
1行目のコマンドはmy-appフォルダに入るためのもので、2行目のコマンドはプロジェクトを開始するためのものである。
cd my-app
npm start
実施に成功すればこのイメージを実行することは、最初のReactプロジェクトの構築に成功したことを意味する。
アプローチII：自己構築的環境
前回の記事で紹介したWebpack｜Npm｜Babelを含め、自作環境を利用することも可能で、コマンド方式で必要な機能を追加し、ビルドするのが一連の流れだ。
Webpackとは？
Webpackは、JavaScript、CSS、LESS、SCSS、JSXなど、プロジェクト内のさまざまなファイルを1つまたは複数の最終ファイルに統合することを主な機能とするモジュラーパッケージングツールです。このようなモジュラーパッケージングは開発効率を向上させるのに役立ち、特に大規模なプロジェクトでは、コードの再利用とテストの利便性を実現するために機能をモジュールごとに分割することができます。
Webpackは単なるパッケージングツールにとどまらず、コードを複数のブロックに分割し、必要なときだけ読み込むことでページの読み込みを高速化するコード分割など、多くの強力な機能を提供しています。一方、モジュール化はWebpackのコアコンセプトであり、大きな機能を小さなファイルや関数に分割することで、保守やテストを容易にする方法でコードを構造化することができます。
Npmとは？
Npmは世界最大のソフトウェアレジストリである。 あらゆる大陸のオープンソース開発者がソフトウェアパッケージの共有や借用にnpmを使用し、多くの企業が個人開発の管理にnpmを使用しています。
NpmはNode Package Managerと呼ばれ、Nodeの中でnpm cliツールを使ってパッケージをインストールしたり管理したりできる。
例えば、Reactスイートを使いたい場合、ターミナルでコマンドを入力するだけで、npmがレジストリ内のreactフロントエンド・フレームワークを自動的に見つけ、node_modulesフォルダにダウンロードしてくれる。
バベルとは何か？
Babelはなくてはならないツールだ。その主な機能は、JavaScript構文の最新バージョン、特にECMAScript 6（ES6）構文を、ブラウザが理解し実行できる古いバージョンのJavaScriptに変換することだ。
ES6は、アロー関数、テンプレート文字列、分解された値など、多くの強力な機能を導入しているが、ブラウザのサポートに違いがあるため、クロスブラウザの互換性を確保するためには、コンパイルにBabelを使用する必要がある。
Babelは、Reactコンポーネントの構造を記述するJavaScript構文拡張であるJSXを使用するReactアプリケーションを開発する際のコンパイルにも必要だ。これはJavaScriptでHTMLのようなマークアップを書くことを可能にするが、ブラウザはJSXを直接実行できないため、純粋なJavaScriptに変換するためにBabelが必要になる。
リアクト・ビルド・サプリメント
Reactデベロッパーツール（ブラウザ拡張機能）のインストール
React Developer Toolsは、Google Chrome用の拡張機能で、ブラウザと接続することで以下のことができる。 React開発者ツールそしてインストールし（右上の「CHROMEに追加」をクリック）、最後にブラウザで有効になっていることを確認する。
これは、エラーメッセージを見つけたり、ウェブ上でのReactアプリケーションのJavaScript実行のログの一部を観察したりするために使用できる。
React開発者ツールのインストールと設定
ここで使用する開発ツールはVS Codeで、無料のエディターである。 Visual Studio Code お使いのコンピュータのオペレーティング・システムに適したバージョンをダウンロードし、インストールしてください。
VS Codeは、一度インストールすればフル機能のツールというわけではなく、React開発のために多くの追加拡張機能をインストールする必要がある。
結語
Reactの方言運動は10年近く前に始まったが、Reactプロジェクトを構築し、立ち上げるようになったのは今になってからだ。
プロジェクトの立ち上げに関するこのチュートリアルをこんなに遅くまでやっているのは、Reactを学ぶ前に理解しておくべき重要な概念がたくさんあるからだ。npm、node.js、webpack、babelなど、将来使う可能性の高いツールばかりだ。
今後の投稿では、React関連の知識や技術を取り上げていく予定だ。
ご意見、ご質問がございましたら、お気軽にコメントをお寄せください！
リアクト・ヴァナキュラー・スポーツ・シリーズ
Babel & Webpack & NPM - Reactホワイトペーパーキャンペーン 07
React JSX - Reactホワイトペーパーキャンペーン06
JavaScriptの高度な関数 - React Vernacular キャンペーン 04
JavaScript非同期待ち - React Whitepaper キャンペーン03
日本語 
繁體中文 
English 
简体中文 
한국어 
Español