[TIL]RealJSを使用した映画Webサービス作成3 0624

8212 ワード
React TIL テキストリンク

今日の進度


#2 JSX & PROPS (#2.0~#2.4)
#3 STATE (#3.0)

#2 JSX & PROPS


#2.0 Creating your first React Component



HTMLのように見えますが、コンポーネント.reactはcomponentとともに動作し、すべての内容はcomponentである.
では、コンポーネントは何ですか.
:HTMLを返す関数
コンポーネントを使用してreactをHTMLに合成する場合は、reactが必要です.
JavaScriptとHTMLの組み合わせをjsx->reactで唯一非常にカスタマイズされた概念と呼ぶ

実習


potato.jsの作成
import React from 'react';

function Potato() {
    return <h3>I love potato</h3>;
}

export default Potato;
index.jsのそばでやるには問題がある.(もちろん、導入する必要があります)
reactアプリケーションには1つのコンポーネントしか表示されません.
ではアプリjsにPotatoを入れる
import React from 'react';
import Potato from './Potato';

function App() {
  return (
    <div className="App">
      <h1>Hello!</h1>
      <Potato />
    </div>
  );
}

export default App;

reactはコンポーネントをインポートし、ブラウザが理解できる一般的なHTMLにします.
今回の講座の結論
reactアプリケーションは一度に1つのコンポーネントしか表示できません!
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
のみ

#2.1 Reusable Components with JSX + Props


reactの利点:再利用可能なコンポーネントを作成できる->再利用可能なコンポーネント

実習


App.js
import React from 'react';

function Food({ fav }) {
  return <h1>I like {fav}</h1>;
}

function App() {
  return (
    <div className="App">
      <h1>Hello!</h1>
      <Food fav="kimchi" />
      <Food fav="ramen" />
      <Food fav="cheeze" />
      <Food fav="milk" />
    </div>
  );
}

export default App;
のfavとfunction foodのfav、および関数のfav}は一致する必要があります.
porpsを関数のパラメータ{fav}に置き換えます.favも可能

#2.2 Dynamic Component Generation


以前にすべてのコンテンツをにコピーする必要がある場合は、mapを使用してコードを簡単に作成できます.
->map:javascript関数.に対する拘束が不十分です.arrayから欲しいarrayを送ります.

#2.3 map Recap


reactの要素は一意でなければなりません.listに入れると一意性が失われます.
->各idの作成(解析)
私たちは誰もが異なる名前と画像のリンクを持っていることを知っていますが、私たちは彼らの反応を知らないので、明確に伝えなければなりません.
ここのaltは写真の説明です

#2.4 Protection with PropTypes


npm i prop-types
prop-type:受け取ったpropsが私の欲しいpropsかどうかを確認します
(インストール確認)パッケージ.jsでは2479162 eが見られます
Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number,
};
protTypeの名前はprotTypeでなければなりません

#3 STATE


#3.0 Class Components and State


(違い)Functional componentは、何かを返して画面に表示する関数です.class componentはclassで、react componentから展開して画面に表示されます.
また、class componentはrender(){}にある必要があります.reactはclass componentのrederメソッドを自動的に実行します.
state?
:object、componentに入れるスペースがあり、これらのデータは変化します.
つまり、私が変更したいデータstate={};中に入れればいいです
実習の注意事項
  <button onClick={this.add()}></button>과
  <button onClick={this.add}></button>의 차이는?
すぐに実行します.ただし、実際には、クリック時にすぐに実行するために()100 add⭕を追加します.
コットは終わってから聞いて、書いて寝ます.😴
UFFSファイルシステムとNandFlash
Ubuntuのデフォルトソースを国内ソースに変更