1. 次の React を簡単に理解します
React はユーザー インターフェイスの構築に使用される JavaScript ライブラリで、JSX (JavaScript 構文拡張機能) を最大限に活用してページを作成し、コードをより鮮明で読みやすくします。
- 1. 宣言型設計− React は宣言型パラダイムを採用しているため、アプリケーションの記述が容易になります。
- 2. 効率的- React は DOM をシミュレートすることで DOM との対話を最小限に抑えます。
- 3. 柔軟性- React は既知のライブラリやフレームワークとうまく連携します。
- 4.JSX - JSX は JavaScript 構文の拡張です。React 開発では必ずしも JSX を使用する必要はありませんが、JSX を使用することをお勧めします。
- 5. コンポーネント- React を通じてコンポーネントを構築すると、コードの再利用が容易になり、大規模プロジェクトの開発にうまく適用できます。
- 6. 一方向の応答データ フロー- React は一方向の応答データ フローを実装しているため、重複するコードが削減されます。そのため、従来のデータ バインディングよりもシンプルになります。
2. React アプリケーションを作成する
次のコマンドを使用して、React スキャフォールディング作成ツールをグローバルにインストールできます。
npm install -g create-react-app
次に、次のコマンドを使用してReact アプリケーションを作成します。ここで、my-app は作成するプロジェクトの名前であり、自分で変更できます。
npm create-react-app my-app
作成が完了するのを待った後、作成されたプロジェクトのルート ディレクトリに移動し、次のコードを実行してプロジェクトを実行します。デフォルトのポート番号は 3000 です。占有されている場合は、自動的に 1 ずつ増加します。
npm start
プロジェクトが開始されるまで待つと、ブラウザが自動的に開き、表示されるページは React の初期インスタンス ページです。
### 添付ファイル:
上記のコマンドで作成したものは、実際には単一ページのアプリケーションです (プロジェクトのパブリック ディレクトリには、index.html が 1 つだけ存在し、すべてのコンポーネントとページが Index.html にレンダリングされることがわかります)。レンダリングは次のコードです
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
これはReactDOM.renderコンポーネントをレンダリングするために使用されます。最初のパラメータはレンダリングされるコンポーネント (これは jsx 形式)、2 番目のパラメータはルート コンポーネント DOM (つまり、コンポーネントは DOM 要素の下にレンダリングされます) です。
最初に作成した反応アプリ プロジェクトには、App.js のエントリ コードがあります。プロジェクトを開始したときに表示されるものは、コンポーネントのレンダリングに使用されるこのコードを通じてレンダリングされます。では、インデックスにあるため、なぜそれでなければならないのですかReactDOM.render。id document.getElementById('root')HTMLのルートDOMの属性はrootです
3. 構造変化
私たちが作成するプロジェクトのプロジェクト構造は、私たちが望むものではないことが多く、通常はプロジェクト構造を自分たちで変更します。
まず、src ディレクトリ内のすべてのファイルを削除し、src プロジェクトの構造を次のように変更します。
§─api
§─アセット
§─コンポーネント
§─ページ
§─ルーター
§─ストア
§─App.js
§─app.less
└─index.js
| アイテム | 説明する |
|---|---|
| API | リクエストメソッドを保存するために使用され、リクエストにはaxiosを使用します。 |
| 資産 | 写真やアイコンなどの静的ファイルを保存する |
| コンポーネント | 共通のテンプレート コンポーネントを格納するために、多くのスタイル コンポーネントが繰り返し存在することがよくありますが、それらを抽出してパブリック コンポーネントにカプセル化して呼び出します。 |
| ページ | ページを保存 |
| ルーター | ルーティング、ルーティング アドレス ジャンプ コンポーネントのカプセル化 |
| 店 | グローバル変数を保存する |
| App.js | ページエントリ |
| アプリレス | ページのグローバル スタイル |
| インデックス.js | エントリーコード |
更新中…