react

JSXとは何ですか。

JavaScript拡張の略として、簡単に言えばHTML構文をJAVASCRIPTコード内部に書き込むことです.
Reactは、レンダリングロジックが別のUI(ユーザが製品、サービスを使用する際に相対する)のロジックに関連付けられているという事実を受け入れる.

JSX属性の定義

const element = <div tabIndex="0"></div>;

const element = <img src={user.avatarUrl}></img>;

attributeにJavaScript式を挿入する場合は、引用符(文字列値)または括弧(式)のみが使用され、同じattributeの2つを同時に使用することはできません.

JSXで子を定義する

const element = <img src={user.avatarUrl} />; // '/>'를 사용하여 태그 닫아주기.

const element = )
  <div> //div 태그 내부에 자식 태그 <h1> <h2>가 있다. -> JSX태그는 자식을 포함할 수 있다.
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSXは対象を表します。

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

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

1番目のコードと2番目のコードは同じです.それぞれ<h1>, </h1>および'h1'、className="greeting"および{classNAme: 'greeting'}、Hello, world!および'Hello, world!'に対応する.
しかしながら、React.createElement()は、コードの記述にバグがないことを確認するためにいくつかのチェックを実行する.

レンダーエフェクト(Render Effects)

イラストは、react appの最小単位で画面に表示する内容を説明しています.

const element = <h1>Hello, world</h1>;

DOMとは?

Documentオブジェクトモデルを使用してWebページのインタフェースにアクセスします.

DOMでエンティティをレンダリングする

すべての要素はreact DOMによって管理されるのでroot DOMノードと呼ばれます.
Reactが実装するアプリケーションには、通常、ルートDOMノードがあります.
ルートDOMノードにReact Ellimentをレンダリングするには、両方ともReactDOM.render()に渡すことができます.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

上記のコードは、'root'およびelementをReactDOM.render()に渡す.

部品と支柱

関数構成部品とクラス構成部品

関数構成部品

関数構成部品の定義->JavaScript関数の作成

function Welcome(props){
  return <h1>Hello, {props.name}</h1>;
}

上記の関数は、propsというオブジェクトパラメータを受信した後にreactエイリアスを返します.
これらの素子はJavaScript関数であるため,関数素子と呼ぶ.

クラス構成部品

->classを使用してクラス構成部品を定義します.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

前述したように、Welcomeというクラス構成部品を作成できます.

レンダー構成部品

React Elementは、ユーザー定義の構成部品で表されます。

const element = <Welcome name = "Sara" />;

Hello、Saraをレンダリングすると

function Welcome(props) {
  return <h1> Hello, {props.name}</h1>;
}

const element = <Welcome name = "Sara" />;
ReactDOM.render(
  element, 
  document.getElementById('root')
);

コンポーネントの合成

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App(){
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

構成部品の抽出

構成部品を抽出して新しい構成部品を作成し、既存の構成部品の可読性を向上させることができます.

StateとLifecycle

stateとは?

共通点は、データがアプリケーションコンポーネントに影響を与えるレンダリング成果物のオブジェクト(propsなど)であることです.
propsは素子に渡される.
stateは構成部品に管理の違いがあります.

ライフサイクルとは?

反応素子はライフサイクルを有する.構成部品が実行、更新、または削除されると、特定のイベントが発生します.

時計を作る

function tick() {
  const element = {
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root)
  );
}

setInterval(tick, 1000);

ここでは,Clock素子を完全に再利用し,カプセル化する.

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date = {new Date()} />,
    document.getElementById('root)
  );
}
setInterval(tick, 1000);

ここで重要なのは、クロック設定タイマと毎秒更新UIがクロックの実装の詳細になるべきである.
コードを1回作成し、Clock自身に更新させるだけです.

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

上記機能を実現するためには、Clock素子にstateを追加する必要がある.
まず、関数要素Clockをクラス要素に変換します.

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}. </h2>
      </div>
    );
  }
}

<h2>ラベルのpropsをstateに変換する必要があります.では.

<h2> It is {this.state.date.toLocaleTimeString()}.</h2>

こうなります.
Clockはクラスコンポーネントなのでclass constructorを追加します.

constructor(props){
  super(props);
  this.state={date: new Date()};
}

コード全体が次のようになります.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

ライフサイクルメソッドをクラスに追加

構成部品を削除する際には、構成部品に使用されるリソースを確保することが重要です.
ClockがDOMを初めてレンダリングするたびに、インストールと呼ばれるタイマーを設定しようとします.
この反対をインストールしないと言います.
クラス内では、ライフサイクルメソッドを宣言できます.
ClockクラスコンポーネントのコンポーネントDidMount()とコンポーネントWillUnmount()が宣言されます.

componentDidMount

componentDidMount() {
  this.timerID = setInterval(
    () => this.tick(),
    1000
  );
}

componentWillUnmount

componentWillUnmount() {
  clearInterval(this.timerID);
}

clearIntervalメソッドは、現在進行中の関数のプロセスを停止するために使用されます.

tick

componentDidMountはtick()メソッドを実装するためにtick()というメソッドを呼び出した.

tick() {
  this.setState({
    date: new Date()
  });
}

ステータスの変更方法

this.state.comment = 'Hello'; //wrong case
this.setState({comment: 'Hello'}); //correct!

this.stateを指定できる唯一の空間は構造関数です.

イベント処理

レスポンス中のイベント処理

<button onClick = {activateLasers}>
  Activate Lasers
</button>

REACTはfalseを返してもデフォルト操作を防止できないため、preventDefaultを明示的に呼び出す必要がある.
次のコードはpreventDefaultを記述する例です.

function ActionLink() {
  function handleClick(e){
    e.preventDefault();
    console.log('The link was clicked.');
  }
  
  return (
    <a href='#' onClick={handleClick}>
      Click me
    </a>
  );
}

条件付きレンダリング

条件によってレンダリングする要素を決定すると考えられます.

else文による条件レンダリング

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

上のコードは、isLogdInがfalseに設定されているため、Guest Greetingコンポーネントをレンダリングします.

論理演算子&&を使用してIfを行内として表す

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

上記のように、&&&を使用して簡単に条件付きで線分を入れることができます.

条件演算子の使用

?演算子テストに合格しましたか?Then:Else構文を作成し、Testが真であればThenがFlashであればElseを返します.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

リストとキー

次のコードは、map()関数を使用して数値配列の値を2倍にした後、map()が返す新しい配列を2倍の変数に割り当て、ログを表示するコードです.

const numbers = [1,2,3,4,5];
const doubled = numbers.map((number) => number*2);
console.log(doubled);

キーで構成部品を抽出

キーは周囲に配列されたコンテキストでのみ意味があります.<li>ユニットではなく、並んでいる<ListItem />ユニットに鍵が必要です.<li key={value.toString()}>ではありません.
このように<ListItem key={number.toString()} value={number} />を指定するべきです.

棚

reactでは、フォームがHTMLフォームアクションを実行します.JavaScript関数を使用してフォームのコミットを処理し、ユーザーがフォームに入力したデータにアクセスできるようにするのは便利です.

せいぎょようそ

ユーザー入力に基づいて自分のステータスを管理および更新します.Reactは、変更可能なステータスを管理し、更新します.Reactでは、ステータスがsetState()によって更新されます.

Taxtareaラベル

<textarea>エリモンは、テキストをサブテキストとして定義します.

<textarea>
  Hello there, this is some text in a text area
</textarea>

タグの選択

このラベルはドロップダウンリストを作成します.たとえば、HTMLは果物のドロップダウンリストを作成します.

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

fileinputタグ

HTMLでは、<input type = "file">により、ユーザは、1つまたは複数のファイルを自分のデバイスストレージからサーバにアップロードしたり、File APIを介してJavaScriptを使用して操作したりすることができる.

昇格ステータス

同じクラスの内部に2つの関数要素がある場合.構成部品は、それぞれのステータスとは独立して、各入力値を格納します.しかし、2つの入力値が互いに同期している場合は、reactでstateを共有する必要があります.これは最も近い共通の祖先であり、stateを昇格させ、stateに昇格させる必要があります.

合成と継承

構成部品に他の構成部品を含める

一部の素子では、どのサブユニットがあるか予め予想できないものがあります.
children propを使用してサブ要素をそのまま出力に渡すことが望ましい.

unction FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

このようにして、他の素子にJSXを重畳することによって任意のサブアイテムを伝達することができる.

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}