反応の基礎

6651 ワード
react webdev javascript テキストリンク
何が反応している:反応はJavascriptライブラリFacebookによって作成されます.UIコンポーネントを構築するためのツールです.ReplyはブラウザのDOMを直接操作しないで、代わりにDOMのコピーを作成してメモリに保存します.このコピーされたDOMは一般に「仮想DOM」と呼ばれています.反応は、何が変化したかを発見し、DOMの部分だけを変更する.
スキルを学ぶために:
HTMLとCSS
日本学術振興会
JavaScriptとES 6の基礎
パッケージマネージャ( Node + NPM )
GitとCLI
Render関数:Reactdomと呼ばれる関数を使用してHTMLをWebページにレンダリングします.render ()この関数は、HTMLコードとHTML要素の2つの引数をとります.この関数の目的は指定された要素の中に指定されたHTMLコードを表示することです.
' root '要素内にスパンを表示します.
ReactDOM.render(<span>Hello World!</span>, document.getElementById('root'));
結果は<div id='root'> 要素
<body>
  <div id='root'></div>
</body>
ここでのHTMLコードはJSXを使用し、JavaScriptコード内にHTMLタグを書くことができます.
JSX : JSXはJavaScript XMLを表します.それは私たちの反応でHTMLを書くことができます.JSXはHTMLを反応要素に変換します.
  • JSXで
    • const newElement: <h1>Learning JSX!</h1>
ReactDOM.render(newElement, document.getElementById('root'));
  • JSXなしで:
    • const newElement = React.createElement('h1', {}, 'Not using JSX');
ReactDOM.render(newElement, document.getElementById('root'));
    上記の例から明らかに分かりますが、JSXを書くほうがずっと簡単です.最終的には実行時にHTMLをJavaScriptに移行します.
    式は巻きキー括弧{ }を使用してJSXに記述できます.
    そして、複数のHTML行を書くためには、HTMLの周りに括弧を付けて、すべてのトップレベルの要素をラップしなければなりません.
    例えば、
    const newElement = (
  <div>
    <h1>I am a header.</h1>
    <p> I am a paragraph.</p>
  </div>
);
    機能コンポーネント:コンポーネントは、小さい部分にUIを分割する独立した、再利用可能なコードブロックです.機能的なコンポーネントは、基本的に、反応要素(JSX)を返すJavaScript/ES 6機能です.それは後でどこか他の場所で使用するようにエクスポートする必要があります.
    const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>
}

export default Welcome;
    そして、それを使うために、我々はそれを輸入する必要があります.
    import Welcome from './Welcome';

const App = () => {
  return(
    <div className="App">
      <Welcome />
    <div>
  )
}
    小道具:プロップは、それらが反応コンポーネント間のデータを渡すために使用されるプロパティAntのために短いです.コンポーネント間のデータの流れは、(親から子のみ)一方向である
    たとえば、アプリケーションからコンポーネントに渡す場合は、適切な名前の属性のように渡す必要があります.
    ここでは、「コンポーネント」コンポーネントを「コンポーネント」コンポーネントに渡します.動的にデータを渡す必要がある場合は、単にカーリーブレースを使用します.
    import Welcome from './Welcome';

const App = () => {
  return(
    <div className="App">
      <Welcome name="Justin" />
    <div>
  )
}
    したがって、歓迎コンポーネントでは' props 'のデータを取得します.
    そして、我々はそれのようにそれを使うことができます.
    const Welcome = (props) => {
  return <h1>Hello {props.name}!</h1>
}
    状態:反応は、コンポーネントが独自のデータを作成し、管理することができる状態と呼ばれる別の特別な組み込みオブジェクトを持っています.したがって、propsと異なり、コンポーネントは状態でデータを渡すことはできませんが、内部で作成し、管理できます.
    反応コンポーネントは、状態のデータに基づいて(状態で)レンダリングされます.状態は初期情報を保持する.したがって、状態の変更時に、反応が通知され、すぐに再実際に変更する必要があるDOMの部分をレンダリングします.更新された部分の再描画処理をトリガーする「setstate」というメソッドがあります.反応は情報を取得し、どの部分を変更するかを知っています.
    機能的なコンポーネントでは、我々がこの状態を使用することができます反応フックの助けを借りて.
    我々は、単純なカウンタは、反応のUSENTフックを使用して実装されます.
    import React, { useState } from "react";

function Counter() {
  // Set the initial count state to zero, 0
  const [count, setCount] = useState(0);

  // Create handleIncrement event handler
  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  //Create handleDecrement event handler
  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };
  return (
    <div>
      <div>
        <button onClick={handleDecrement}>-</button>
        <h5>Count is {count}</h5>
        <button onClick={handleIncrement}>+</button>
      </div>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default Counter;
    そして、このコンポーネントを使用するアプリケーションです.以下のようなJS :
    import React from "react";
import Counter from "../Counter";

export default function App() {
  return (
    <div className="App">
      <Counter/>
    </div>
  );
}
    UseEffect:関数反応コンポーネントは、出力を計算するために小道具や状態を使用します.機能的なコンポーネントが出力値を目標としない計算をするならば、これらの計算は副作用と呼ばれます.
    useeffect () hookは2つの引数を受け取ります:useEffect(callback[, dependencies]) ;
    コールバックは、副作用ロジックを含むコールバック関数です.useEffect() 反応がスクリーンに変更を行ったあと、コールバック関数を実行します.
    依存関係は任意の依存関係の配列です.useEffect() 依存関係がレンダリングの間で変更された場合のみコールバックを実行します.
    あなたの副作用ロジックをコールバック関数に入れてください、そして、あなたが実行する側の影響を望むとき、依存する引数を使用してください.それが唯一の目的ですuseEffect() .
    反応イベント:HTMLのように、反応は、ユーザーイベントに基づいて行動を実行することができます.REACHはHTMLと同じイベントを持っています:クリック、変更、mouserover等.
    CamelCaseのsytaxに反応イベントを書くonClick の代わりにonclick .
    import React from 'react';
import ReactDOM from 'react-dom';

function shoot() {
  alert("Great Shot!");
}

const myelement = (
  <button onClick={shoot}>Take the shot!</button>
);

ReactDOM.render(myelement, document.getElementById('root'));
    イベントハンドラで引数を渡す場合は、ハンドラーを匿名矢印関数にラップしなければなりません.
    import React from 'react';
import ReactDOM from 'react-dom';

function shoot(condition) {
  if (condition) {
    alert("Great Shot!");
  }
  alert("Keep going on");
}

const myelement = (
  <button onClick={() => shoot(true)}>Take the shot!</button>
);

ReactDOM.render(myelement, document.getElementById('root'));
    CSS :インラインスタイル属性を持つ要素に、値はJavaScriptオブジェクトでなければなりません.2つの名前のプロパティbackground-color , キャメルケース構文で書かれなければなりません.
    const MyHeader = () => {
  return (
      <div>
      <h1 style={{color: "white", backgroundColor: 'black'}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
 }
    スタイル情報を持つオブジェクトを作成することもできます.
    const myStyle = {
  color: "white", 
  backgroundColor: 'black'
}

const MyHeader = () => {
  return (
      <div>
      <h1 style={myStyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
 }
    Vue MVVMフレームワークの実現原理
    Android設定システム輝度