なぜ反応?それは実際にはかなりクールだから.時々誤解されるが、冷静に👍

「なぜ反応するか」に対するうまく受け入れられた教育的反応

JSX templates

JSXは「テンプレート言語」ではなく、実際には一つの反論であると考えられている.テンプレート言語はDSL(ドメイン特有の言語)になります.それによって、「言語」は条件付きの論理と反復のようなものを再利用しなければなりません.

JSX was added as a way to avoid using React's own createElement API.

ちっとも.React.createElement JSXが特にコンパイルするために作成された反応のための基になるAPIです.JSXが「何かを避ける」ように反応した後に作成されたようではありません.その代わりに、主な考えは、それが入れ子になるとき、DOMノードを構築するどんなプログラム的な方法も乱雑であるということです.例えば、それはjQueryまたはバニラJSで恐ろしいです.したがって、DOMノードを作るためにこのような関数呼び出しを入れ子にする代わりに

React.createElement(
  "div",
  null,
  React.createElement("h1", null, "Hi, welcome to JSX"),
  React.createElement(
    "p",
    null,
    "It's a function call, not a tempesting language"
  )
);

🎉 また、ネストした関数コールであるこれを書くことができます.

<div>
  <h1>Hi, welcome to JSX</h1>
  <p>It's a function call, not a tempesting language</p>
</div>

JSXを使用するには、関数を呼び出します.

const message = 'I teach workshops at reacttraining.com'
<div>{message && message.substr(0, 7)}</div>

// compiles to
React.createElement(div, null, message && message.substr(0, 7))

そして、それが本質的に関数呼び出しであるので、我々は引数として小道具を考えることができます.DSLのナンセンスを避けることができ、JS式でホスト言語(JavaScript)の完全なパワーを持つことができます.
では、なぜ表現だけ?🤔
再び、関数呼び出しです.関数の引数としてこれを行うことができないので、JSXのステートメントを実行できません.

// Nope, not allowed
<div>{if (condition) {}}</div>

// Because it would compile to this:
React.createElement(div, null, if (condition) {})

JSXはXMLやHTMLのような身近な関数呼び出しであるように設計されています.そのため、実際の入れ子機能呼び出しを見ても、完全なプログラミング言語の使いやすさとパワーで目が燃えません.
これにより、これを行うことができず、2つのJSXノードを返すことができます.

function App() {
  return <div></div><div></div>
}

// Compiles to 
function App() {
  return React.createElement('div') React.createElement('div')
}

そして、あなたはちょうど2つの機能を背中に戻すことができません
あなたが見るならば{' '} JSXでは、HTML(JSXではない)では空白はある方法で扱われます.つ以上の空白文字は、単一の空白に縮小されます.JSXが関数呼び出しであるので、それはちょっと私が認めます{' '} いくつかのシナリオで空白を作成します.本当に大きなプロジェクトでは、私は4回のようにそれをしなければならないかもしれません.

Because of all this specialness you can't easily port JSX. That rubs me the wrong way. Template code should be easy to port because HTML is a standard.

再び、それはHTMLであるはずではありません
例えば、JSXでは次のようにします.

<div className=""></div>
<label htmlFor="" />

JSXの批評家である多くの人々は「なぜHTMLと違うのか?」
クラスはHTML属性ですが、クラス名はDOMプロパティですMDN

https://developer.mozilla.org/en-US/docs/Web/API/Element/className

HTML属性とJSの違いは、HTML属性が何であるか、そしてJSでそのものを変更する対応する方法によって常に違いがあることがわかります.同じことは<label> . 我々がそうするJSXでそれを文句を言わないかもしれない一部の人々<label htmlFor=""> HTMLの代わりに<label for=""> . しかし、再びこれはプレーンJavaScriptで行われる方法です.MDNドキュメントをチェックアウトしてください😉

https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor

For example, the perfectly valid <label for=""> will not work because for gets parsed as JavaScript. You have to use a funny JSX attribute: <label htmlFor="">.

私は、我々がそれをカバーすると思います.

Also, you have to do a funny comment syntax because HTML comment syntax is not allowed.

HTMLではない👆🏻 「異なる」「おかしい」コメントの理由は、Babelが内容であるためにこれらのコメントを混乱させるでしょう-- HTMLコメントがどのように働くかを文書化しているように.

<div>
  <!-- HTML comment -->
</div>

And don't forget to slash your self-closing tags, e.g. <img />, even though HTML5 dropped that syntax more than 10 years ago.

実際に本当に本当でない.XHTMLは2000年代のもので、ブラウザはいくつかの実装を始めました.W 3 Cは最終的にその考えを捨て、HTML 5を行ったが、前のスラッシュのようなものはほとんどのブラウザで既に実装されていなかった.今日、私たちはまだXHTML<img /> <-- それは有効なHTMLです、それは「落とされません」、それはちょうどブラウザが保持した古いW 3 C考えから、手荷物の上に残っています.
ところで、JSXは「JavaScriptとXML」を表しています.なぜなら、JavaScript関数呼び出し(私は既にそれを言ったことがあります)はXML(HTMLではない)構文で.XMLでは、あなたの自己終了タグをフォワードスラッシュで閉じなければなりません.

Another one I still don't understand and don't want to understand is: Error: The style prop expects a mapping from style properties to values, not a string.

オブジェクトとして表現すればプログラムをインライン形式にするほうが簡単です.そして再び、これは関数呼び出し™, 我々はそれを行うことができます.この機能は、あなたが好きでないと決めることができるか、あなたがちょうどそれがオブジェクトであるのを好きでないと決めることができるJSのCSSのようなものを開発する際に大きな役割を果たしました.しかし、それは“ばかげたスピードバンプ”ではない.

[React is an] "unmanageable mess" [because of] Functional or Class-based, controlled or uncontrolled, forwardRef, mixins, HOC, Hooks, etc.

それは彼らが作っていたポイントではない.反応は再利用可能なビジネスロジックを共有するための原始的(MIXINES)を元のAPIからクラスに切り替えたので、コミュニティ(反応ライブラリではない)はコードを共有するいくつかのパターンを思いつきました、それらのパターンの1つは再利用可能なコードを共有する問題を解決するために他のコンポーネントにコンポーネントを二重または三重に包む方法を持っていました.これは、“反応devtoolの典型的な反応アプリケーションを見て”コンポーネントビューアー(実際のDOMではない)に余分なラッパーがあることを意味します.反応のチームは、コードを共有する原始的な方法を持っていないことが多くの理由で実現された反応の開発者は、より多くの厄介なものだったので、彼らはコードを共有するための原始的なAPIを与えるためにフックを作成しました.
彼らは、反応がそのリストのために汚いと言うしようとしていませんでした.この全体のセクションは、物語に適合するために本当にそこにないものに手を伸ばしていました.

The fact that there are so many options and types of components confuses me.

明らかに😕
コンポーネント-関数とクラスを作るには2通りしかありません.反応コミュニティの大多数はフックのために機能を受け入れています.JavaScriptの機能を作るには3つの方法があります.しかし、それは反応の誤りでありません.
それらの他のもの(制御されるか、制御されていない、転送先、mixins、Homey、フック)はコンポーネントでありません、彼らはコンポーネントが持つことができる「機能」です、そして、それらのいくつかは互いの選択肢です.いくつかは異なった期間からさえあります(最初のAPIをミックスしてください.それで、私たちが行くことに座るようにではありません.

When a tool can be used in so many ways it creates doubt in its user. That's why, as the React team admits, "even between experienced React developers [there's disagreement]"

また、基本的に、多くのクラスがもうクラスを使用していないので、コンポーネントを作る方法があります.反応は“ライブラリ”ではなく、フレームワークです.それは角ではない、またはノックアウト、または(“どのようにしている”バッテリーが含まれている)モノリシックアプローチを燃やす.反応して、2つの反応開発者が不一致を持っているかもしれない理由は、1つはreduxを使用したいかもしれません、そして、1つは文脈を使いたいかもしれません.すべての他のウェブコミュニティが同じページの上で100 %であるように、劇的で、行動しないでください.ちょうど反応は、我々が異なる建築のために反応の上に行くツールを選ぶことができます.それはいいことだ.そして、「意見の相違」は議論があることを意味します、そして、最高の考えはトップに上がります.これはモノリシックの枠組みの場合ではない.
私は、コメントの中で言ったように、事実上すべてのパラグラフが間違っているか誤解を招く情報があったので、そこで読書を止めました.
我々はすべてのようなツールが好きです.それはクールだ👍 あなたは反応が好きではない、私はそれを気にしない.しかし、多くの虚偽または誤解を招くものがあり、初心者は、この種のものを読んで知っていない.