Reactの基本概念

Reactは、Facebookによって作成されたフロントエンドJavaScriptライブラリです。これは、再利用可能なUI要素の作成に役立つコンポーネントベースのアプローチに従います。

1.ReactのJSX

通常はJSX単なるシンタックスシュガーReact.createElement(component, props, ...children)

JSXコード：

<div>My Name is Hossain</div>

React.createElement("div", null, "My Name is Hossain");

を使用して、小道具で任意のjavascript式を渡すことができ{}ます。以下の例を流します：

<Component sum={5 + 9 + 1} />

3.文字列リテラル

文字列を小道具として渡すことができます。2つのJSX式は同等です。HTML属性と同じです。

<Component name="Hossain" />
<Component name={'Hossain'} />

すでにオブジェクトとして小道具を持つことができ、JSXで小道具を渡しました。...「spread」演算子を使用して、小道具オブジェクトを渡すことができます。

const App = () => {
  const props = {name: 'Hossain', age: 20};
  
  return <Person {...props} />
}

より多くのJSXを子として渡すprops.childrenか、ネストされたコンポーネントをHTMLと同じように表示できます。

<Container>
  <App1 />
  <App2 />
</Container>

defaultPropsclassコンポーネントでプロパティを定義できます。にデフォルトの小道具を設定しますclass。これは使用されますundefindが、使用されませんnull

class Container extends React.Component {
  // ...
}
Container.defaultProps = {
  color: 'red'
};

ビルドプロセスが現在設定されているかどうかわからない場合は、Chrome用のReact DeveloperToolsをインストールできます。Reactの制作ムードでサイトにアクセスすると、React DeveloperToolsの背景色が暗いことがわかります。しかし、あなたのサイトは開発ムードであり、React DeveloperToolsの背景色が赤であることがわかります。あなたがであなたのサイトを構築するならばcreate-react-app、あなたはこの賞賛を流すことができます：

npm run build
or 
yarn build

これまでは静的データを使用できましたが、状態変更のためにデータが変更される場合はuseState、フォームを使用できますReact hooks。例を流して吹いた：useStateは関数です。値のデフォルト値count。もしsetCount()変更するstate値。count値が変化しています。

const App = () => {
  [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1)
  }
  
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

JSXでは、条件付きレンダリングに三項演算子を使用できます。

<div>{name ? name : 'What is your name?'}</div>

反応要素へのイベントの処理は、DOM要素でのイベントの処理と非常によく似ています。いくつかの構文が異なります

• React要素名はキャメルケースを使用します。
• JSXを使用すると、関数を文字列ではなくイベントハンドラとして渡すことができます。

<button onClick={() => console.log('Clicked me')}>
    Click me
</button>