このガイドでは、Reactをすばやく開始し、そのコアの概念を説明します。 Create Reactアプリツールを使用して、プロジェクトをすばやく構築し、徐々に単純なReactアプリケーションを構築します。研究の後、あなたは反応の基本を習得し、さらなる研究に備えます。
予防策
このチュートリアルでは、マシンにノードとNPMをインストールする必要があります。 node.jsダウンロードページにアクセスして、必要なバージョンをダウンロードできます（npmはノードにバンドルされています）。または、チュートリアルを参照して、バージョンマネージャーを使用してノードをインストールすることもできます。
キーポイント
Reactアプリケーションは、相互に対話できる再利用可能なUIコンポーネントを使用して構築されます。 Reactコンポーネントは、クラスベースのコンポーネントまたはいわゆる機能コンポーネントです。クラスベースのコンポーネントはES6クラスを使用して定義され、関数コンポーネントは基本的なJavaScript関数です。これらの関数は通常、矢印関数を使用して定義されますが、関数キーワードも使用できます。クラスベースのコンポーネントは、JSXを返すレンダリング関数（通常のJavaScriptへのReactの拡張を反応要素に作成する）を実装し、関数コンポーネントはJSXを直接返します。 JSXのことを聞いたことがない場合は、心配しないでください。後で詳しく説明します。
反応コンポーネントは、ステートフルコンポーネントとステートレスコンポーネントに分けることもできます。ステートレスコンポーネントの仕事は、親の反応コンポーネントから受信するデータを単に表示することです。イベントや入力を受信した場合、それらのイベントまたは入力を親コンポーネントに渡すだけで処理できます。
一方、ステートフルコンポーネントは、特定のアプリケーション状態を維持する責任があります。これには、外部ソースからデータを取得するか、ユーザーがログインしているかどうかを追跡することが含まれます。ステートフルコンポーネントは、イベントや入力に応じてステータスを更新できます。経験によれば、ステートレスコンポーネントを可能な限り記述する必要があります。これらのコンポーネントは、アプリケーションやその他のプロジェクトで簡単に再利用できます。
仮想dom
この問題を解決するために、現在多くの最新のUIフレームワーク（Reactを含む）で使用されている仮想DOM（実際のDOMのメモリ表現）が発明されました。 HTML DOMとは異なり、仮想DOMは操作が簡単で、ページのパフォーマンスに影響を与えることなく、多数の操作をミリ秒で処理できます。 Virtual DomとHTML Domを定期的に比較します。次に、差が計算され、HTML Domに適用されて、仮想DOMと一致します。このようにして、Reactはアプリケーションが毎秒60フレームで安定した60フレームでレンダリングすることを保証します。つまり、ユーザーはほとんど遅延がありません。
空白のReactプロジェクトを開始
前提条件に基づいて、ノード環境をセットアップし、最新バージョンのNPM（またはオプションヤーン）がインストールされていると思います。今すぐインストールしましょう：
次に、それを使用して新しいReactアプリを作成します。
<code>npm i -g create-react-app</code>
インターネット接続速度に応じて、Create-React-Appコマンドを実行するのが初めてである場合、完了するまでに時間がかかる場合があります。 Webサーバー、コンパイラ、テストツールなど、便利な開発環境をセットアップするために必要な多くのパッケージがプロセスにインストールされています。
<code>create-react-app message-app</code>
これらの2つのコマンドのいずれかを実行すると、次のようなものが出力されます。
プロジェクトのセットアッププロセスが完了したら、次のコマンドを実行してReactアプリケーションを開始します。
<code>npx i -g create-react-app</code>
次の出力が表示されます：
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>デフォルトのブラウザは自動的に起動する必要があります。次のような画面が表示されます。
<code>cd message-app npm start</code>
紹介反応プロジェクトがエラーなしで実行されていることを確認したので、舞台裏で何が起こっているのか見てみましょう。お気に入りのコードエディターを使用して、フォルダーメッセージアプリを開くことができます。 Package.JSONファイルから始めましょう：
<code>.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.</code>
<code>npm i -g create-react-app</code>
ご覧のとおり、Create Reactアプリは私たちのためのいくつかの依存関係をインストールしました。最初の3つはReactテストライブラリに関連しており、（ご想像のとおり）Reactコードをテストすることができます。次に、ReactとReact-Domがあります。これは、Reactアプリケーションのコアパッケージであり、最終的にReactScriptsは開発環境をセットアップしてサーバーを起動します（見たばかりです）。
その後、繰り返しタスクを自動化するための4つのnpmスクリプトがあります：
最後のコマンドは詳細に説明する価値があります。 Create Reactアプリツールは、実際のコードと開発環境を明確に区別します。 npm run ejectを実行すると、Create Reactアプリは舞台裏で行うことを隠す停止を停止し、すべてをプロジェクトのpackage.jsonファイルにダンプします。これにより、アプリケーションの依存関係をより詳細に制御できますが、ビルドプロジェクトとテストプロジェクトで使用されるすべての複雑なコードを管理する必要があるため、これを行わないことをお勧めします。必要に応じて、カスタマイズ-CRAを使用して、ポップアップせずにビルドプロセスを構成できます。
Create Reactアプリは、ESLINT（ESLINTCONFIGプロパティから見られるように）もサポートし、React-AppESLINTルールを使用して構成されています。
package.jsonファイルのbrowserSlistプロパティを使用すると、アプリケーションがサポートするブラウザのリストを指定できます。この構成は、PostCSSツールやBabelなどのコンバーターで使用されます。
Create Reactアプリの最もクールな機能の1つは、箱からのホットリロードを提供することです。これは、コードに変更すると、ブラウザが自動的に更新されることを意味します。 JavaScriptコードの変更はページをリロードし、CSSの変更はリロードせずにDOMを更新します。
さあ、ctrl cを押して、最初に開発サーバーを停止しましょう。サーバーが停止した後、ServiceWorker.jsおよびsetUptests.jsファイルを除くすべてをSRCフォルダーのファイルを削除します。サービスワーカーの役割を理解することに興味がある場合は、こちらをご覧ください。
その他、すべてのコードをゼロから作成して、SRCフォルダー内のすべてを理解できるようにします。JSX Syntaxの紹介
これは簡単な例です：
<code>create-react-app message-app</code>
。これはJSXです。 Webブラウザで実行しようとすると、エラーが発生します。ただし、Reactアプリケーションでは、JSXはコンバーター（Babelなど）によって解釈され、Reactが理解できるJavaScriptコードとしてレンダリングされます。 const message = <h1>I'm a heading</h1>;
注：JSXの詳細については、チュートリアル「JSXの初心者」をご覧ください。
過去には、.JSXファイル拡張子を使用するために使用されるJSXファイルのReact。これで、Create React Appツールは、.jsファイル拡張子を使用してReactファイルを生成します。 .jsxファイル拡張子は引き続きサポートされていますが、Reactメンテナーは.jsを使用して推奨しています。ただし、次の理由で.JSX拡張機能を使用することを好む反対のReact開発者（私自身も含めて）のグループもあります。
「こんにちは、ワールド！」
コードを書き始めましょう。新しく作成されたメッセージアプリのSRCフォルダーで、index.jsファイルを作成し、次のコードを追加します。または
を再度使用します。ブラウザは次のものを表示する必要があります<code>npm i -g create-react-app</code>
npm start
yarn startこれは最も基本的な「Hello World」Reactの例です。 index.jsファイルはプロジェクトのルートディレクトリであり、反応コンポーネントがレンダリングされます。コードがどのように機能するかを説明させてください：
行1：JSX処理を処理するためにReactパッケージをインポートします。
行2：Reactdomパッケージをインポートして、Root Reactコンポーネントをレンダリングします。
<h1>Hello World</h1>
document.getElementById('root')HTMLコンテナは、public/index.htmlファイルにあります。 31行目には、JSXはHTMLによく似ていますが、いくつかの重要な違いがあります。たとえば、JavaScriptキーワードであるため、クラス属性を使用することはできません。代わりに、代わりにclassNameを使用します。さらに、OnClickのようなイベントは、JSXでOnClickと綴られています。それでは、Hello Worldコードを変更しましょう：
<code>npm i -g create-react-app</code>
JSXコードを要素と呼ばれる一定の変数に移動しました。また、H1タグをDivタグに置き換えました。 JSXが機能するためには、要素を親タグに包む必要があります。
次の例を見てください：
<code>create-react-app message-app</code>
上記のコードは機能しません。囲まれたタグに隣接するJSX要素を含める必要があることを示す構文エラーが届きます。このように：
<code>npx i -g create-react-app</code>
JSXでJavaScript式を計算する方法は？とてもシンプルです。次のように、巻き毛のブレースを使用するだけです
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>
<code>cd message-app npm start</code>
{5 2}<p>などの他の例をお試しください。 JSXの基本ができたので、先に進んでReactコンポーネントを作成しましょう。 <code>{5 2}
Reactコンポーネントを宣言します
ここでは、React.comPonentのサブクラスであるJavaScriptクラスを定義することにより、Reactコンポーネントを作成します。また、JSX要素を返すレンダリング関数も定義します。他のJSXコードを
このようにスタイルを実装することもできます： 2番目の方法は、外部StyleSheetを使用することです。デフォルトでは、外部CSSスタイルシートはすでにサポートされています。 SASSなどのプリプロセッサを使用する場合は、ドキュメントを参照して、構成方法を学びます。 保存した後、ブラウザのテキストコンテンツサイズに大きな変化が見られるはずです。次のようにCSSクラスを使用することもできます
Dumbコンポーネントとも呼ばれるStatelessコンポーネントは、情報を表示するコンポーネントにすぎません。操作データのロジックは含まれていません。ユーザーからイベントを受信し、処理のために親コンテナに渡すことができます。
先ほど、Reactはクラスベースと関数ベースのコンポーネントの両方を提供することを前に述べました。次のように、関数構文を使用してメッセージビューを書き換えることができます： 関数の構文では必要ないため、コンポーネントのインポートを削除したことに注意してください。このスタイルは最初は混乱しているかもしれませんが、すぐに執筆の反応コンポーネントがより速くなることを学ぶでしょう。
ステートレスの反応コンポーネントを正常に作成しました。ただし、ステートフルなコンポーネントやコンテナと適切に統合するために追加の作業が必要であるため、完全ではありません。現在、MessageViewは静的データを表示します。入力パラメーターを受け入れることができるように変更する必要があります。いわゆる小道具を使用してこれを達成します - 親コンポーネントから渡すデータ。 ここで注意すべき主なことは、メッセージ変数をどのように定義するかです。それを メッセージビューの親コンポーネントを作成しましょう。 message-list.jsという名前の新しいファイルを作成し、次のコードを追加します。
huh！
messageViewインスタンスを使用して複数のメッセージを表示する方法を見てみましょう。これは、コードの再利用を非常に簡単にするため、Reactがフラッシュに始まる場所です（表示されます）。 次のようにメッセージャリストコードを更新します：
ご覧のとおり、反応でビルディングブロックを定義して、強力で複雑なUIインターフェイスを作成するのは簡単です。 フックはReactの最新バージョンですが、Reactの世界を一掃しています。簡単に言えば、それらは、関数コンポーネントを反応するために状態（およびその他の関数）を追加することを可能にします。 このチュートリアルは、MessageViewコンポーネントを関数コンポーネントにリファクタリングし、Reactフックを使用して状態を管理します。 React V16.8以降を使用する場合にのみ可能であることに注意してください。 上記の例では、状態オブジェクトをUseState Reactフックに置き換えました。名前が示すように、これにより、コンポーネントの状態を管理できます。 フックを使用すると、大規模なプロジェクトに取り組んでいるときに、いわゆるプロップ掘削を避けることができます。プロップ掘削では、深くネストされたコンポーネントに到達するために、プロップを複数のコンポーネント（最終的にはそのデータは必要ありません）に渡すことができます。 messageViewコンポーネントを関数コンポーネントに変換することもできます。
この投稿では、Reactフックをさらに導入するつもりはありません。それらが存在し、Reactコミュニティでますます人気が高まっていることをお知らせください。フックについて詳しく知りたい場合は、Getting Guide Guide to React Hooksをお読みください。 demo 良いニュースは、SitePoint Premiumに多くの素晴らしいReactコンテンツと、ブログに多くの素晴らしい記事があることです。私はあなたがそれらをチェックして、素晴らしいものを作ることをお勧めします。 反応を始めることについてのFAQ Reactの開発環境を設定するには、最初にnode.jsとnpmをインストールする必要があります。インストールが完了したら、Create React Appコマンドラインツールを使用して新しいReactアプリケーションを作成できます。開発環境をセットアップして、最新のJavaScript機能を使用し、優れた開発エクスペリエンスを提供し、生産のアプリケーションを最適化できるようにします。また、Visual StudioコードやアプリケーションをテストするためのWebブラウザーなどのテキストエディターも必要です。 JSXはJavaScript XMLの略です。これは、Facebookが開発したJavaScriptの構文拡張機能であり、HTMLをReactで書くことができます。 JSXは、ReactでHTMLを書き込み、追加しやすくします。それがなければ、JavaScriptコードを読み書きが難しくなります。また、コードをモジュール式で理解し、維持しやすくするのに役立ちます。 コンポーネントは、任意のReactアプリケーションのビルディングブロックです。 Reactのコンポーネントは、UIの一部を制御する再利用可能なコードです。各コンポーネントは独立しており、複雑なUIを作成するために組み合わせることができます。反応コンポーネントは通常JSXで記述されており、独自の状態と小道具を維持できます。 反応では、状態と小道具はjavaScriptオブジェクトです。どちらもレンダリング出力に影響を与える情報を保持していますが、コンポーネントに関しては異なって行います。小道具（プロパティの略語）は、親コンポーネントから子供のコンポーネントにデータを渡す方法です。一方、状態はコンポーネント内で管理され、コンポーネント内で変更できます。 反応イベントは、小文字ではなくキャメルケースを使用して命名されています。 JSXを使用する場合、文字列ではなくイベントハンドラーとして関数を渡します。たとえば、HTMLクリックイベントは、JSXのオンクリックとして記述されています。 Reactには合成イベントシステムもあります。つまり、独自のイベントシステムがあり、W3Cイベントシステムと完全に互換性があります。 反応のキーは、対応するドライバーレンダリングデータの一意の仮想DOM要素を識別するために使用されます。それらは、既存のDOM要素をループすることにより、レンダリングを最適化するのに役立ちます。キーは一意の数字または文字列である必要があり、重複キーを使用するとアプリケーションを破ることができます。 コンテキストAPIは、アプリケーションのすべてのレベルで特定の形式のデータを共有できるようにするReactによって提供されるコンポーネント構造です。その目標は、小道具掘削の問題を解決することです。 Reduxは、クライアント、サーバー、ネイティブ環境で一貫して実行され、テストが簡単なJavaScriptアプリケーションを作成するのに役立つように設計された予測可能な状態コンテナです。主にReactの州管理ツールとして使用されていますが、他のJavaScriptフレームワークまたはライブラリで使用できます。 Hooksは、React 16.8の新機能であり、クラスを書くことなく状態やその他の反応機能を使用できます。フックは、関数コンポーネントからの反応状態とライフサイクル機能を「フック」できる機能です。クラスでは機能しません - クラスなしでReactを使用することができます。 上記のコンテンツは元のテキストを書き直して洗練し、元の意味を変えずに読みやすさと流encyさを改善するよう努めていることに注意してください。 画像形式は同じままです。 ネットワークの写真に直接アクセスできないため、画像リンクは同じままです。 <div>タグに配置できます。次に、ブラウザの反映された変更を確認するために、次のコードでsrc/index.jsを更新してください：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>....
Compiled successfully!
You can now view react-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.56.1:3000
Note that the development build is not optimized.
To create a production build, use yarn build.</code></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>
<p>
<code><div>最初に、アプリコンポーネントをインポートします。次に、次のようにjsx形式でアプリをレンダリングします：<code> <app></app>。これは、JSXがそれを反応DOMに押し込むことができる要素にコンパイルできるように必要です。変更を保存した後、ブラウザを確認して、正しいメッセージをレンダリングすることを確認します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>{
"name": "message-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>
<p>次に、スタイルを適用する方法を学びます。 <code><App/>
jsxインラインスタイル
<code>npm i -g create-react-app</code>
<code>create-react-app message-app</code>
<code>npx i -g create-react-app</code>
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code><code>cd message-app
npm start</code>
ステートレスおよびステートフルなコンポーネントファイルメッセージview.jsを作成し、次のサンプルコードをコピーします。ここに愚かなコンポーネントの完璧な例があります（技術的には静的コンポーネントのようなものですが）：
<code>....
Compiled successfully!
You can now view react-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.56.1:3000
Note that the development build is not optimized.
To create a production build, use yarn build.</code>
{
"name": "message-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}import React from 'react';
export default function App() {
const message = <h1>I'm a heading</h1>; //JSX FTW!
return ( message );
}
小道具を介してデータを転送しますimport React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));<code>npm i -g create-react-app</code>
this.props.messageに割り当て、ステートフルな親コンポーネントから渡します。次に、JSXでは、メッセージ変数を参照してページに出力できます。 <code>create-react-app message-app</code>
<code>npx i -g create-react-app</code>
少し時間をかけて、何が起こっているのかを確実に理解してください。 （ステートフルな）メッセージリストコンポーネントの状態オブジェクトを宣言します。このオブジェクトのメッセージプロパティには、メッセージが含まれています。レンダリング関数では、いわゆる小道具を使用して、そのメッセージを（ステートレス）子供コンポーネントに渡すことができます。 this.props.message
幸いなことに、PropTypesパッケージを使用してこれを実現できます。実際の例をすばやく確認するには、messageViewコンポーネントを次のように変更します。
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code><code>cd message-app
npm start</code>
<code>....
Compiled successfully!
You can now view react-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.56.1:3000
Note that the development build is not optimized.
To create a production build, use yarn build.</code>
また、IDなどのキーと呼ばれる特別な属性で一意の値を入力する必要があります。 Reactは、リスト内のどのアイテムが変更、追加、または削除されたかを追跡するためにこれを必要とします。
反応フックを使用するようにリファクタリング
<code>npm i -g create-react-app</code>
<code>create-react-app message-app</code>
<code>npx i -g create-react-app</code>
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>これは、使用できるライブデモンストレーションです：
Codepenデモリンク
この入門ガイドを完成させました。データ収集、エラー処理、ルーティング、使用フォーム、デバッグなど、私がカバーしていない多くのReact Conceptsがカバーしていません。リストは続きます...
学習反応の前提条件は何ですか？
反応を学び始める前に、ReactはJavaScriptライブラリであるため、堅実なJavaScriptの知識を習得することが非常に重要です。 ES6機能、閉鎖、非同期プログラミング、このキーワードなどの概念に精通している必要があります。 HTMLとCSSの知識も不可欠です。HTMLと同様のJavaScriptの構文拡張機能であるJSXを使用します。また、Node.jsおよびNPM（Node Package Manager）に精通していることも有益です。これは、React開発のパッケージ管理と実行スクリプトに一般的に使用されているためです。
Reactのために開発環境をセットアップする方法は？
JSXとは何ですか、そしてなぜそれが反応に重要なのですか？
反応のコンポーネントは何ですか？
反応の状態と小道具の違いは何ですか？
Reactはイベントをどのように処理しますか？
React Middle Keyの意味は何ですか？
反応のコンテキストAPIとは何ですか？
reduxとは何ですか、そしてそれは反応と何の関係がありますか？
反応のフックは何ですか？
以上がReactの始めましょう：初心者のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
