6日目:ミーティングミーティング

Feynman Technologyは、教科を教えることがあなたをより良くすると言います.このポストの間違いを見たなら、あなたは私を訂正するかもしれない

JSXと反応

JS文字列の中にHTMLを書くことはお尻の痛みですので、開発者がJSコードでHTMLを書くのを容易にするためにJSXが導入されます.

let elem = <h1>Yeet</h1> // HTML made easy in JS! 🚀

しかし、JSXはJS構文を違反しますので、まずバニラJSにコンパイルする必要があります.バベルトランスポーターは、このタスクのための人気のあるオプションです.
JSX構文は一度に1つの要素だけで動作することに注意してください.あなたは、より多くの要素を中で巣を作ることができます.
そして、コメントするために{* comment *} 構文.
HTML構文がjsxで異なる特殊な場合がいくつかあります.重要なものはclass :

let container = <div className="Nope"></div>;

実際には、JSXのすべてのHTML属性に従ってくださいcamelCase 🐪 ネーミングonclick なるonClick , など.
もう一つの重要な点は、JSXがすべての要素が自己閉鎖であることを許容するということです.

let abnormal = <div /> // I'm self closing!
let closed = <br /> // I need to be closed!

最後に、JSコードを構文内で挿入することもできます.

let username = "Bob Ross";
let title = <h1>My name is {username}</h1>;

オールアバウト

反応は、UIを構築するためのJSライブラリですので、それは私たちの好みにDOMを操作するために必要な電力を持っています.
DOMに要素をレンダリングするにはReactDOM.render() メソッド:

let box = document.getElementById("section1");
let content = <h1>Cool!</h1>;

ReactDOM.render(content, box);

反応は、コンポーネントの概念で動作します.基本的に、反応は、より小さな機能的な部分にウェブサイトを壊すために、開発者を勧めます.これにより、UIコードを関数コードから分離することが容易になります.
反応中のコンポーネントを書くには2つの方法があります.

ステートレス機能性成分

このアプローチfunction ステートレスのコンポーネントを書くためのJSでは(私はまだ州について学んでいますが、ステートレスコンポーネントはデータを受け取り、レンダリングすることはできますが、データを追跡したり管理したりできません.

const Recipe = (props) => {
  return <ul>
           <li>Flour</li>
           <li>Egg</li>
           <li>Love</li>
         </ul>
}

それらは資本化された名前を持っていなければならなくて、JSXnull . props は引数の標準名で、矢印関数構文は非常に一般的です.

エス6class 構文

以下に構文を示します:

class Drinks extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>Coffee, Tea, and more!</h1>
    );
  }
};

これは威圧的に見えるかもしれませんが、今のところ重要なことはrender() 関数.残りはほとんどの時間のボイラー板です.ステートレス機能コンポーネントと同じように、資本名を指定する必要があります.
The Drinks クラスはReact.Component クラス.The constructor() 関数はクラスを初期化する責任があります.The super() 関数は、コンストラクタ関数を親から借りればよいReact.Component . The render() 関数はDOMレンダリングのために呼び出されます.
このコンポーネントをDOMに描画するには、まだReactDOM.render() これを行うには、しかし、別の構文を使用します.

let target = document.body;
ReactDOM.render(<Drinks />, target);

コンポーネントはJSXのカスタムHTMLタグとして使用できます.これは次の部分に役立ちます.

ミックスとマッチ要素

このように、コンポーネントを使用してカスタムHTMLタグをJSXに作成できます.これらのタグはrender() コンポーネントの関数が戻ります.
また、HTMLタグとして、ネストすることができます🤯!

class Drinks extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>Coffee, Tea, and more!</h1>
    );
  }
};

const Menu = (props) => {
  return (
    <div>
      <Drinks />
      <p>Lorem Ipsum Dolor</p>
    </div>
);

このカスタムHTMLタグは他のように振る舞うので、非常に柔軟です.

余韻

Woohoo、今日はたくさんやった.これは私にとって非常に良い進歩です、そして、私はそれを誇りに思います.私は、これを通して私の熱意を共有し、それを通過し続けることを望んでいる他の人を願っています.
フォローミーオンGithub !
また!