简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

反応とは何ですか？ React の基本的な使い方の紹介 (例付き)

寻∝梦
リリース： 2018-09-11 10:47:14
オリジナル
1725 人が閲覧しました

この記事では主に react についての基本的な知識について説明し、誰もが React の基本について詳しく学べるようにします。今すぐこの記事を一緒に読みましょう

Reactシリーズ1（初めてのReact入門）

1. Reactの概要

Reactはユーザーインターフェイスを構築するために使用されるJavaScriptライブラリです。 React は主に UI を構築するために使用されます。React は MVC の V (ビュー) であると考えている人が多いです。 React は Facebook の内部プロジェクトとして誕生しました。 React はパフォーマンスが高く、コード ロジックは非常にシンプルです。

2. Reactの特徴

  • 宣言型設計 −Reactは、アプリケーションを簡単に記述できる宣言型パラダイムを採用しています。

  • 効率的 -React は DOM をシミュレートすることで DOM との対話を最小限に抑えます。

  • 柔軟性 - React は既知のライブラリやフレームワークとうまく連携します。

  • JSX -JSXはJavaScript構文の拡張です。 React 開発では必ずしも JSX を使用する必要はありませんが、JSX を使用することをお勧めします。

  • コンポーネント - React を通じてコン​​ポーネントを構築すると、コードの再利用が容易になり、大規模プロジェクトの開発にうまく適用できます。

  • 一方向の応答データ フロー - React は一方向の応答データ フローを実装し、それによって重複コードを削減します。そのため、従来のデータ バインディングよりもシンプルになります。

3. 基本的な使い方の紹介

基本模板<!DOCTYPE html>
   <html>
     <head>
       <script src="../build/react.js"></script>
       <script src="../build/react-dom.js"></script>
       <script src="../build/browser.min.js"></script>
     </head>
     <body>
       <p id="example"></p>
       <script type="text/babel">

       </script>
     </body>
   </html>
   模板中代码一共用了三个库： react.js 、react-dom.js 和 Browser.js
   需要注意的是，它们必须首先加载。
   1）react.js是React的核心库。
   2）react-dom.js是提供与DOM相关的功能。
   3）Browser.js的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，实际上线时，应将它放到服务器完成。
   $ babel src --out-dir build
   这个命令可以将src子目录的js文件进行语法转换，转码后的文件全部放在build子目录。
ログイン後にコピー

注: 最後の script タグの type 属性は text/babel です。これは、React の独自の JSX 構文が JavaScript と互換性がないためです。 JSX が使用される場合は常に、type="text/babel" を追加する必要があります。 JSX を使用する必要がある場合は、script タグの type 属性を text/babel に設定する必要があります。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact リファレンス マニュアル の列にアクセスして学習してください)

补充一点：
   使用JSX，可以极大的简化React元素的创建，JSX抽象化了React.createElement()函数的使用，其语法风
格类似于HTML语法风格.不过，使用React并非必须使用JSX，JSX只是一种直观的创建React nodes的方法，它是对
React.createElement（）方法的抽象，通过Babel，JSX语句也可以直接在浏览器中运行，Babel内嵌了对JSX的支持。
   在运行时引用babel.js虽然容易使用而且还很方便，不过并不是一种好的方案，因为需要转换，所以更加耗时，
这一缺点在产品阶段显得更加明显。Babel是React团队选择的在使用React过程中转换ES*和JSX为ES5语句的工具。实际
   Babel主要用途是一个JavaScript转换器，它可以转换各种ES*代码为浏览器可识别的ES代码。就目前来说，Babel主
要会转换ES6和ES7语句为ES5语句，转换JSX看起来倒像是其的一个附加功能。babel.js与browser.js的关系 babel的
浏览器版本为browser.js（未精简）和browser.min.js（已精简）。所以最后一个文件也可以引入babel.min.js。
ログイン後にコピー

4. npm 経由で React を使用する (create-react-app を使用して React 開発環境をすばやく構築します)

create-react-app Facebook から来たこのコマンドは、設定なしで React 開発環境を迅速に構築できます。 create-react-appで自動作成されるプロジェクトはWebpack + ES6をベースとしています。 

执行以下命令创建项目(支持node.js和npm)：
$ npm install -g create-react-app$ create-react-app my-app$ cd my-app/$ npm start
ログイン後にコピー

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトreact ユーザー マニュアル の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上が反応とは何ですか？ React の基本的な使い方の紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
react
ソース：php.cn
前の記事：JavaScript ループとスコープの関係を分析します (コードが添付されています) 次の記事：React の開発環境を構成するにはどうすればよいですか? React+webpack 開発環境の構成手順 (構成例付き)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
0ms スリープを省略すると CSS トランジションが中断されるのはなぜですか? FLIP アニメーションを実装して、正しく理解できているかどうかを確認しようとしています。このコードペン (間違ったコードですみません。ただいじっているだけです) で、sleep ...
から 2024-04-06 16:29:50
0
2
490
無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...
から 2024-04-06 16:25:39
0
1
346
React Three Fiber: スクロール イベントが遅れるのはなぜですか? ReactThreeFiber には、カメラのズーム全体にわたって保持したいスプライトを生成する React コンポーネントがあります。アルゴリズムは機能しているようですが (サイ...
から 2024-04-06 13:39:24
0
1
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！