コンポーネントとは

ReactはJavaScriptライブラリで、ユーザーインタフェースをより簡単に構築できます.ユーザインタフェースは構成部品で構成されています.では、この素子は何ですか.

上図の単純なアプリケーションでは、컴포넌트は、ユーザインタフェースのコンポーネントで再利用可能なhtml、css、javascriptによって作成されたブロックを示す.
これらの再利用可能なブロックを組み合わせて、ユーザーインタフェースを作成します.この構造には、次の2つの利点があります.

再利用可能:クリンコードでも重要なコンセプト「Dry Han Code」を使用できます.重複を避けることで、コードサイズを減らし、管理しやすいコードを作成できます.

Seperation of Concerns:SOC興味点を分離し、興味点ごとに問題を解決し、興味点を分析して分離します.これにより、各要素の設計がより繰り返し可能になります.これにより、1つの注目点に多くの要素が含まれません.

反応器は素子を用い,宣言的なコード使用方式を有する.構成部品または宣言関数を宣言してコードを再使用します.

Reactプロジェクトを開始する最も基本的な方法:React-APPを作成する

上記の方法を使用する理由は、プロジェクトの作成時にすぐに戻る構築ページがあり、コードの変更後、ブラウザには直ちに修正コードを反映するreact-hot-loaderなどの機能が内蔵されるため、webpackやbabelを設定する必要がないからです.
CRAは、プロジェクトの開始時にプロセスを最小化する方法にすぎません.
create react app
以上の手順でreactアプリケーションを作成できます.

はんのうこうもくぶんせき

src

srcフォルダは、コードの作成に最も時間がかかる場所です.含まれるコードはreactで処理されたファイルです.特殊なreact構文を使用しますが、最終的にはJavaScriptになる可能性があります.

index.js

最初のコード.ページのロード時に最初に実行されるファイル.ただし、ブラウザでのファイルの動作は上記ではありません.ブラウザが実行される前に、npm startプロセスは、応答構文をブラウザから分離可能な言語に変換します.
例えば、import '/index.css'は、通常のJSでは通用しない文法である.ただし、npmプロシージャは中間変換後にブラウザに渡されるため、上記のコードは問題ありません.

JSX

ReactDOM.render(<App />, document.get...));上記コードの<App / >は、通常のJSでは使用できません.JSにはhtml構文が含まれているからです.これはnpmプロシージャが変換された後,ブラウザが理解可能な言語に変換するため問題がないためである.

import ReactDOM from 'react-dom'

これは、react-domという名前のソフトウェアパッケージから、ReactDOMという名前のコンポーネントをコードを含むファイルにインポートすることを意味する.react-domはReactプロジェクトの組み込みパッケージであり、reactの組み込みパッケージとともにReactライブラリを構成する.

ReactDOM.render(<App />, document.getElementById('root'));

render関数は、2つの引数を受け入れます.2番目のパラメータは、JSDOM API関数としてDOMオブジェクトを受信する.このDOMオブジェクトはrootという名前のDOMで、ファイルを閲覧すると、
publicという名前のフォルダには、index.htmlがあります.<div id='root'></div>このDOMには何もありません.
すなわち、render関数は、このDOMで<App/>をレンダリングすることを望む.
では、<App/>とは何でしょうか.index.jsファイルには、コードimport App from './App.js'が含まれています.

srcフォルダのApp.jsからインポートされたことを示します.

JSX

上記のコードでは、render(<App/>, ...)は実際にはJSでは利用できない表現である.JavaScriptはhtml構文とともに使用される形式をJSXと呼び,React開発者によって作成される.
JSXはJavaScriptXMLの略です.最終的にHTMLはXMLなので、これらの名前が作成されます.npm startプロシージャは、これらのJSXを純粋なJSにし、ブラウザに優しいコードに変更するので、このプロシージャを実行できます.実際にブラウザで実行されているコードを見てみましょう.
XMLは、Htmlなどの寸法言語の一種である.ただし、XMLはユーザー指定によりタグを作成できます.データを交換するための寸法言語.XMLは、新しい名前のタグに任意のデータをバインドできると考えられます.

ブラウザの開発者モードに入ると、chuck,bundleが表示されます.jsなどのファイルのmain.chuck.js内にはfunction App()が見えます.上の写真で見たFunctionAppとはかなり違いますコードはブラウザで読み込むことができるコードに変更されました.

  const content = document.getElementById("root");
  const para = document.createElement("p");
  para.textContent = "Wow this is traditional JS";
  content.append(para);

上記のプロシージャはDOMへのリアルタイムアクセスであり、DOMを作成、追加、作成、実行するプロシージャを作成するため、非常に煩雑で複雑なコードを記述する必要があります.

function App() {
  
  return (
    <div>
      <h2>Let's get started!</h2>
    </div>
  );
}
export default App;

ただし、上記の関数型で返されるResactのJSXを使用すると、必要な最終状態を定義して返すことができ、より簡潔なコードを表示できます.

JSXに式を含める

JSXでは、変数として宣言された値を括弧で囲み、DOMに追加できます.式は値を持つ変数であり、戻り値を式と呼ぶことができます.JSX自体も式です.return()でJSXを返します.

import "./ExpenseItem.css";
export default function ExpenseItem() {
  const date = new Date(2021, 3, 28);
  return (
    <div className="expense-item">
      <div>{date.toISOString().slice(0, 10)}</div>
      <div className="expense-item__description">
        <h2>Car Insurace</h2>
        <div className="expense-item__price">$294.45</div>
      </div>
    </div>
  );
}

𘥪これらの特性を用いて作成されたjsxによるユーザへの注入攻撃XSS(Cross site scripting)は安全である.JSXのすべての式の挿入は、明示的に宣言された変数がレンダリングされる前に文字列に変換されてレンダリングされるため、ユーザはリアルタイムでデータを入力できません.式を挿入できるのは、開発者が明確に宣言した部分だけです.

JSXを使わなければ?

もしreactがJSXを使わなかったらどうなりますか?JSXは反応器としてサポートされている構文であり,これらのJSXの機能を詳細に理解するには,JSXを用いずに同じ機能を持つコードを記述することができる.

  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpenseItem items={expense}/>
    </div>
  );

  return React.createElement(
    "div",
    {},
    React.createElement("h2", {}, "Let's get started!"),
    React.createElement("ExpenseItem", { items: expense })
  );       

以上の2つのコードの機能は同じであるが,可読性に大きな違いがある.JSXは最終的に以下のコード形式に変換され、ブラウザ言語に変換されます.

次の反応.createElementでは、一番上のルート要素のみが返されます.したがって、jsxはルートタグのみを返し、2つのタグを返すことはできません.

また<>...</>もこのような無名のラベルを組み合わせて返却することができ、これも反応です.createElementでは、最初のパラメータは""文字列であってもよく、符号なしであってもよいからである.