このシリーズの第3の「リアクト楽しい」、タイトルBenpianを参照してください、学生を知るには反応は、私が言いたいおおよそ推測、とに反応するように、新たな学生のため、このブログエントリの内容について話している可能性がありますそれは受け入れることがやや困難かもしれないが、私はあなたがそれを学ぶために固執することを願って、これはフロントエンドの開発画期的な技術革新をした偉大な神にFacebookのフロントエンドです。
第一印象を反応させます
騒ぎ、コードの一部を見て：
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);これは簡単に、オーバー公式サイトのホームページ、コードの実装name属性を受信HelloMessageと呼ばれるコンポーネントを、リアクトから貼り付けたサンプルコードでは、こんにちはを発揮できるページxxxは。ReactDOM.renderDOMノードページにコンポーネントをレンダリングするために使用されます。
次の記事では、我々は、部品を反応し、どのようにプロジェクトを反応させるの完全なを開発するために作成する方法を詳細に説明します。今、私はあなたが第一印象と反応する方法として、上記のコードを読むことを探求したい、心がどのように感じているのですか？
私はこのコードがあるときに最初のこぎり多くの人が感じていることを信じている：「私はこすり、このようなものが何であるか、JavaScriptコードが書かれている方法を行って、ディスプレイとビジネスロジックの分離、知りませんでしたHTMLました？」、正直に言うと、これはその時点で私の本当の気持ちです。私は上に行くために幸運十分だった、と今で使用されてきた、そして今、私は反応するように感じている：「私はこする、興奮、良いNiubi。」
最初にこのアイデアはよく理解されている時に、私のような多くは、それはMVCの開発モデルが出現する前にあるときにあまりにも長い間、実際には、これらの言葉は、本当に価値をプレイ洗脳され、「ビジネスロジックから分離されることが実証されます」、その後、以下のクエリ結果を表示するためのHTMLコードで、その時のWebアプリケーションのロジックで、シンプルで、おそらくページの先頭にデータベースを接続することで、クエリデータ。あなたは少しPHPを知っている場合は、PHPファイルの先頭にある<?php2があるかもしれません最後に?>、これは別のPHPコードとHTMLコードに使用されている時間です。しかし、ますます複雑なWebアプリケーション・ロジック、一緒に混ぜたHTMLコードとビジネス・ロジック・コードと、それはそうそこに、MVCの開発モデルを維持することがますます困難になります。
今の本質「ショーはビジネスロジックから分離する。」と言っているわけではない。この文は、すでに今Web開発には適用されません、私は、我々は、我々が反応文言のこの種を受け入れるべきではない問題に戻るには、問題を見ていると言いたいです、このようなアプローチに基づいた判断が基づくべきであるJavaScriptを分離するために分離されていない、HTML構文のようなものを書いていないのではなく、私たちのフロントエンドのコードは、明確に強く、保守が容易になる聞かせていないリアクト。
JSX - 実際には、単にJavaScriptにいくつかの砂糖を追加しました
これはJSXと呼ばれるJavaScriptシンタックスで上記書き込みHMTLコードに似ています。あなたには、JavaScriptの拡張版として理解することができます。明らかに、ブラウザ環境ではこの構文は、実行することができないので、私たちは今、なぜES6のために同じ構文を使用することができるよう、私たちは、標準のJavaScriptシンタックスを変換するツールを必要とする前に、コードをページにロードされます現在のブラウザはサポートしていたにもかかわらず、それは良くありませんでした。この例は、実際には同等の次の2つのコード。
JSXの構文：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);上記のコードによって翻訳された標準のJavaScriptシンタックスが来ます：
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);JSXは、より簡潔に書くために、より直感的な構文を感じていないですか？だから、実際にJSXのReact.createElement(component, props, ...children)シンタックスシュガー。
：あなたがHTMLに精通している場合はJSXでHTMLタグのすべてが、実質的には、コストを学ぶだけわずかに異なる以下の中から、サポートされていませんので、あなたのためにJSXには圧力ではありません
- クラスclassName属性はなり
- tabindex属性は、tabIndexになり、
- プロパティの変更のためのhtmlFor
- value属性で指定された値によって必要とTEXTAREA
- backgroundColorの：として書かこぶにオブジェクトのスタイル属性値、CSSプロパティを受けます。
前回の記事では、我々は実際には、我々は内部の基本的なコンポーネントを達成した反応する見JSXでHTMLタグを書くことができ、部品を言及しました。次は私がこれらの基本的なコンポーネントは、前の上記のオファーを反応させるのHTMLタグを作成するための新しい機能である新しいコンポーネントを作成する方法を詳細に紹介します。
最後に書かれました
この記事の主な目的は、我々はJSXの基本的な印象を持っていることを期待している、私はあきらめに読み取るためにJSX構文を見ているので多くの学生があることを学びました。本当に申し訳ありません......
ここで私はまた、個人的な経験を共有したい、それは単にSteve Jobsがそれを置くと同じように、滞在謙虚です：「空腹滞在愚かな滞在します。」。
それはそれは時間を無駄にするように設計されたこと、既存の経験と競合する場合は、新しい枠組み、新しい技術に接触すると、Tucaoを心配しないでください。特に、それ以上に、まだ比較的人気のあるフレームワークや技術のいくつかのために。あなたは、これらの技術的なスキルとエンジニアリングの経験デザイナーフレームは、はるかにあなたの上に、あなたが不快に感じる場合は、あなたは彼らが実際に考慮していないと感じていることを信じることがありますか？時間枠の考え方を設計する際に真剣にフレームワーク設計を考えるために、真剣な努力が他の人からこの枠組みの中でのベストプラクティスを学ぶために、結果は、多くの場合、あなたを驚かせるでしょう。
あなたは、あなたが問題を抱えている次回のコミュニティ検索に移動し、ホイールを作成するために急いではありません、時間の特定の側面をフレーム能力に欠けて見つけるのですか場合も同様に、他の人がすでに長い間議論され、かなり良いを持っていたことソリューションは、さえない場合、プロセスはまた、あなたのインスピレーションの多くを与えます。
個人的な経験、時の試練を経た、王6月は十分に良いです、ありがとうございました。