React と JSX_html/css_WEB-ITnose を使ってみる
React は、ユーザー インターフェイスを作成するためのオープンソース ライブラリです。これにより、基礎となるデータ モジュールと一貫性のある UI を簡単に作成できます。この記事は主に初心者を対象としており、React と JSX 構文の基本的な知識をカバーしています。
React の使用を開始する
おそらく、React の使用を開始する最も簡単な方法は、CDN からライブラリをインポートすることです (記事内の例ではこれを行っています)。または、npm を使用して、React の実行に必要なファイルを公式 Web サイトからインストールまたはダウンロードすることもできます。
まず、プロジェクトは、index.html ファイルを含むディレクトリを作成します。
mkdir react-test && cd react-testtouch index.html
好みのエディターを使用して、index.html ファイルを開き、次のサンプル コードを追加します。
<!DOCTYPE html><html lang="en"> <head> <title>My First React Example</title> </head> <body> <div id="greeting-div"></div> <script src="https://fb.me/react-15.0.0.js"></script> <script src="https://fb.me/react-dom-15.0.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> <script type="text/babel"> var Greeting = React.createClass({ render: function() { return ( <p>Hello, Universe</p> ) } }); ReactDOM.render( <Greeting/>, document.getElementById('greeting-div') ); </script> </body></html>上記のコードが何をするのか見てみましょう:
- React はコンポーネント指向の開発に従います。一般的な考え方は、UI 全体をコンポーネントとして扱うことです。この例では、コンポーネントに Greeting という名前を付けます。 React では、このコンポーネントは React.createClass() によって作成されます。各コンポーネントには、構造をレンダリングするために使用される render() メソッドがあります。上の例では、
Hello Universe
のみが返され、ビューに表示されます。 - コンポーネントはレンダリングされるまで何も行いません。 ReactDOM.render() を通じてコンポーネントをレンダリングします。この関数には 2 つのパラメーターがあります。最初のパラメーターはコンポーネント名 (例では Greeting など) で、2 番目のパラメーターはコンポーネントを配置する HTML 内の要素です。この例では、コンポーネントは ID 名greeting-div を持つ div 要素内に配置されます)。
- <挨拶> とは一体何なのか疑問に思っているかもしれません。この構文は JSX (JavaScript XML) と呼ばれ、HTML のような構文で DOM ノードを構築できます。 JSX は完全にオプションであり、React を使用するために必ず使用する必要はありませんが、JSX には多くの優れた機能があるため、活用しない理由はありません。
- ブラウザ自体は JSX を理解できないため、最初に JavaScript を使用して JSX をコンパイルします。ファイルの先頭にbrowser.jsファイルを含めます。 Babel は、 を介してブラウザ内の JSX を認識し、JavaScript に変換します。開発全体を通して、JSX はブラウザーでうまく機能しました。ただし、JS を運用環境にデプロイする前に、アプリケーションのレンダリングを高速化するために JSX をプリコンパイルする必要があります。これを行う方法については後で詳しく説明します。
ブラウザでindex.htmlを開くと、画面に「Hello Univers」というテキストが表示されます。 （ちょっと興奮してる？）
属性の紹介
React は一方向のデータ フローに依存します。これは、データ フローが、次の属性を介して親要素から子要素に渡されるなど、一方向でのみ発生することを意味します。 JSX では、これらのプロパティはプロパティを介して子コンポーネントに渡されます。コンポーネントのプロパティには、コンポーネントの props 属性を介してコンポーネント内からアクセスできます。プロパティが変更された場合は、表示される UI が最新のデータ モデルであることを確認してください。テキストが 2 秒ごとにランダムに表示されるように、前のコードを変更します。
var Greeting = React.createClass({ render: function() { return ( <p>{this.props.message}</p> ); }});setInterval(function() { var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe']; var randomMessage = messages[Math.floor((Math.random() * 3))]; ReactDOM.render( <Greeting message={randomMessage}/>, document.getElementById('greeting-div') );}, 2000);上記のコードは、配列からランダムなメッセージを選択し、2 秒ごとにコンポーネント Greeting にレンダリングします。配信するメッセージを選択するプロパティは message と呼ばれます。変数を呼び出すには、中かっこ {} のペアが必要です。 Greeting コンポーネントにアクセスするときに、渡された値に this.props.message 経由でアクセスできるようになりました。
上記のコードを実行すると、2 秒ごとにランダムなメッセージが表示されます。
渡された props は不変であることに注意してください。コンポーネントのプロパティには、props を介してのみアクセスします。コンポーネント内には this.props が書き込まれることはありません。これにより、データの一方向の流れが保証され、アプリケーション全体がデータの変更とそれがアプリケーション全体に与える影響を理解しやすくなります。
状態とイベントの紹介
React のすべてのコンポーネントは、状態がある場合、それ自体の状態をカプセル化して維持できます。ステートフル コンポーネントは値を保存し、それを props 経由でその子コンポーネントに渡すことができます。これにより、コンポーネントの状態が変化すると、それに応じて props も確実に変化します。したがって、子コンポーネントはこれらの props に依存して、それ自体を自動的に再レンダリングします。
この概念をさらに強化するために、上記のコード例を変更してみましょう。ボタンをクリックするとランダムなメッセージが表示されます。ここには 2 つのコンポーネントがあります:
- RandomMessage : これは、ランダムなメッセージを選択し続ける状態を持つ親コンポーネントです
- MessageView : これは、ランダムに選択されたメッセージの表示を処理するサブコンポーネントです。
各コンポーネントの詳細を見てみましょう:
RandomMessage
var RandomMessage = React.createClass({ getInitialState: function() { return { message: 'Hello, Universe' }; }, onClick: function() { var messages = ['Hello, World', 'Hello, Planet', 'Hello, Universe']; var randomMessage = messages[Math.floor((Math.random() * 3))]; this.setState({ message: randomMessage }); }, render: function() { return ( <div> <MessageView message={ this.state.message }/> <p><input type="button" onClick={ this.onClick } value="Change Message"/></p> </div> ); }});状態RandomMessage コンポーネントの は、メッセージ プロパティを維持します。すべての React コンポーネントには、コンポーネントの初期状態を設定する getInitialState 関数があります。上の例では、message 属性の初期値は「Hello, Universe」に設定されています。
次に、ボタンがクリックされると、コンポーネントによって返される HTML タグが新しい値を取得する必要があります。
<div> <MessageView message={ this.state.message }/> <p><input type="button" onClick={ this.onClick } value="Change Message"/></p></div>正如你看到的，该组件渲染的是 MessageView 和一个 input 按钮。要注意的是，在JSX语法中，组件 message 属性的状态是通过子组件的 attribute 来传递。组件还给按钮添加了一个单击事件的监听器 this.onClick 。注要，要写成驼峰形式。在HTML中事件名称是用小写，即 onclick ，但是在JSX中事件名称需要使用驼峰形式。
click 事件处理选择一个随机的消息和更新组件状态：
this.setState({ message:randomMessage });setState 函数在React中主要是用来通知一个数据的变化。这种方法用来更新组件的当前状态，然后重新渲染。结果也需要通过 props 重新计算以及子组件也需要依赖 props 重新渲染自己。
MessageView
var MessageView = React.createClass({ render: function() { return ( <p>{ this.props.message }</p> ); }});这个组件通过 message 属性传递给UI。你应该注意，这是一个无状态的组件和一个 RandomMessage 组件有状态的渲染。
现在我们已经创建好了所需的组件，是时候将 RandomMessage 组件渲染出来：
ReactDOM.render ( <RandomMessage />, document.getElementById('greeting-div'));就是这样！每次点击按钮，你会看到一个不同的消息。
保持独立的JSX
直到现在我们一直在HTML中写JSX脚本。为了保持你的APP结构清晰，应该让每个组件有一个自己的 .jsx 文件。这意味着我们可以把上面的代码放在一个 random-message.jsx 文件中，并且按下面的方式将其引入到HTML中：
<script type="text/babel" src="src/random-message.jsx"></script>
新的HTML结构如下：
My First React Example <script type="text/babel" src="src/random-message.jsx"></script>
这样做意味着你现在需要一个服务器来查看页面。好在可以通过 npm 来安装一个 http-server ：
npm install -g http-server
然后在你项目的根目录下运行下面的命令：
http-server
你的页面可以在 http://127.0.0.1:8080/ 访问。
预编译JSX
正如我们前面提到的，运用到生产之前最好先预编译JSX。可以使用 npm 来安装 babel-cli 。Babel(版本6)默认情况下不包含任何转换器(transforms)，额外的包必须得通过安装。
npm init -ynpm install --save-dev babel-clinpm install --save-dev babel-preset-es2015 babel-preset-react
然后在根目录下创建一个 dist 目录：
mkdir dist
并且运行：
babel --presets es2015,react --watch src/ --out-dir dist
JSX文件将被编译，并且编译出来的同名JavaScript文件将放到 dist 目录中。编译后的JavaScript文件可以直接放到你的页面，这也意味着，页面不再需要加载 browser.js 。同时要是你的JSX做了任何修改,Babel会监控 src 目录下所有的JSX文件，然后编译后放到 dist 目录中。
注意：在我们的示例中实际上并没有使用ES2015的语法，但我们已经包括了ES2015 Preset。
Virtual DOM
React非常的快，那是因为使用了一个Virtual DOM的技术。在内存中表示一个DOM，但从来不会直接访问真正的DOM。组件的渲染函数会在任何给定的时间内很快的告诉DOM应该是一个什么样子。你已经看到组件渲染函数返回HTML元素，但并不产生真正的DOM。相反，它只是一个DOM的描述。
扩展阅读
本文简单的介绍了React和JSX。除了丰富的视图(View)技术，React还有许多其他的好处， 你可以在这里阅读到很多 。
如果你想了解React更多的信息，你可以 阅读这里的文章 ，这是一些很优秀的教程。如果你不想在React中使用JSX，你可以像这篇文章中介绍的内容一样，使用 Raw React 。如果你想继续学习一些先进的技术，你可以阅读前面我写的教程： 使用React和Flux创建一个Note Taking APP 。
感谢你的阅读，如果你有任何问题或建议，欢迎在下面的评论中留言。
本文根据 @Sandeep Panda 的《 Getting Started with React and JSX 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://www.sitepoint.com/getting-started-react-jsx/ 。
大漠
常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7526
15
1378
52
81
11
21
74
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
