参考:https://ko.reactjs.org/docs/hello-world.html[反応公式サイト]
今まで掴んできた反応の基本文法を再整理したい.
あの时は勉强しましたが、今は覚えていない理由はその时努力しなかったからです.どうやら...JSXとは何か、state、propsの正確な意味と役割を一言で正確に定義し、使用理由と流れを知ることが今回の学習反応法の核心である.
この内容は公式サイトに反応することを重点的に参考にします!

JSXとは何ですか。

JavaScriptの構文を拡張し、JavaScriptのすべての機能を含みます.また、JSXは反応ユニットを生成する.(UIではXMLの方が近いです.)しかし、これは正式なJavaScript構文ではありません.Barbelでは、事前設定により、開発者は任意に作成した構文、次のJavaScriptの構文を使用できます.
ソース:https://developerntraveler.tistory.com/54[]
どうしてこれを使うの?
リアクターは、個々のファイルに寸法と論理を追加することによって技術を人為的に分離するのではなく、注目点を緩やかな接続ユニットから分離する.応答では、多くの人がJSコードでUI関連の操作を行う場合に視覚的に役立つと考えているので、JSXを使用します!

JSX構文

完全に閉じる必要があるラベル

Fragment、div、<>などを包囲しなければならない.

これは,仮想ドームで素子の変化を検出するルールが要求される場合,素子内部にDOMツリー構造が必要であり,効率的な比較が可能であるためである.

JSX表示対象

  const element = ( 
      <h1 className="greeting"> 
          Hello, world! 
      </h1> 
  ); 

デフォルトJSX構文寸法

  const element = React.createElement( 
      'h1', 
      {className: 'greeting'}, 
      'Hello, world!' 
  ); 

バーベルを回転させる前の純反応ユニット

  const element = { 
      type: 'h1', 
      props: { 
          className: 'greeting', 
          children: 'Hello, world!' 
      } 
  }; 

反応器で前コードを識別する

JSXも式です。

コンパイルが完了すると、JSX式は通常のJavaScript関数呼び出しとなり、JavaScriptオブジェクトとして認識されます.文でJSXを使用できる場合は、変数を指定したり、パラメータとして渡したり、関数から返したりできます.

function formatName(name){
	return <p> Mr.{name}</p>
}

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
  
  getFreeting("John")

JSXに式(JavaScript)を含める

const users= {
	user1:'John',
  	user2:'Bob'
}
const element= () => {
	return <h1> Welcome {users.user1} ! </h1>
}

ReactDom.render(element,document.getElementById('root'))

JSX演算子

条件演算子

JSX内部のJavaScript式ではif文は使用できませんが、条件に応じて他の内容をレンダリングする場合は、JSX以外でif文を使用して辞書値を設定したり、ブロックで3つの演算子を使用したりできます.

const Test = () => {
  const user = {
    name: "john",
    age: 24,
  };
  return (
    <div>{user.name !== "" ? <h1>Have name</h1> : <h1> No name </h1>}</div>
  );
};

**私の考え.
props伝達にはどのような条件が必要なのか、あるいは何かを処理するときは可能なようですが、propsを受け取るとブロックに何か処理できないものがあるようです.実はこの部分はたくさんのテストをしなければなりません.後で変更します.しかし、私の考えはそうです.

And演算子による条件付きレンダリング

何もレンダリングしたくないときは、何もレンダリングする必要がない場合があります.and演算子を使用すると、短いコードで操作できます.

const Test = () => {
  const user = {
    name: "john",
    age: 24,
  };
  return <div>{user.name === "john" && <h1>Hi {user.name}</h1>}</div>;
};

user.name=「john」なので、最初の条件項目はtrueなのでhi{user.name}が出力されます.
ユーザーの場合name=""の場合、falseが成立するため、この条件項目はfalseであるため、何も出力されません.

propsと条件付加項目

私が実験したいのは=>サブコンポーネントが持つデータアプリケーションです.jsとしてインポートします.
持ってきてもいいですが、加工できません.管理できません.すべてのデータは親コンポーネントによって管理される必要があります.
*App.js

import Test from "./components/Test";
function App() {
  const testFunc = (data) => {
    console.log(data);
  };

  return (
    <div className="App">
      <Test func={testFunc}></Test>
    </div>
  );
}
export default App;

*test.js

const Test = ({ func }) => {
  const user = {
    name: "john",
    age: 24,
  };
  func(user);
  return <div>{user.name === "john" && <h1>Hi {user.name}</h1>}</div>;
};

export default Test;

App.jsからtestFuncを読み込み、testFuncをfuncに渡します.

Test.jsからfuncをpropsとして受信する.アプリケーションはfunc関数を読み込みます.js

への再アクセス

コンソールに出力します.

撮影できますが、どのデータ、アプリケーションを管理しますか.jsからstateに設定する必要があります.