REACT prestudy

21476 ワード
テキストリンク

WHAT IS REACT?


  • React is a JavaScript library, is used for building UIs and front-end applications.

  • Often called a framework.


  • 宣言性VSプログラム性

    • WHY USE IT?

  • Makes JS much easier, much more interactive, virtual DOM, easy to work with teams.

    • REACT STATE

  • Components can have state which is an object that determines how that component renders and behaves
  • We can also have "application level"state by using a state manager like Redux or React's own context API.

    • CREATE-REACT-APP

  • CLI Tool for creating React applications
  • uses Webpack
  • "npm run build"will compile and run

    • Anatomy of a component


    -

    React 01. JSX (Syntax Extension for JacaScript)

    const hi = <p>Hi</p>;
  • JSX上記形式のJavaScript拡張バージョン
    • を有する
  • .jsファイルで作成されますが、構文エラーが発生したため、
    • コンパイルプロセスでJavaScript構文に変換する必要があります.

    JSX Element

  • HTML構文.jsで作成することをJSXと呼ぶこともできます.
    ex) 
    • const hi = <p>Hi</p>;

const myFavorite = {
	food: <li>샐러드</li>,
    animal: <li>dog></li>,
    hobby: <li>programming</li>
};

    JSX attribute

  • ラベルにattribitを付けるためには、いつも「」で包みます.
  • HTMLの属性名とは異なる場合があります.
  • は、任意のラベル
    • を自動的に閉じることができる.
    <div /> 
<div></div> 는 동일
  • classはJSXでclassNameを使用する必要があります.
    • const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>
};
  • のカッコ{}を使用して、JavaScriptコードであることを示します.

    • Nested JSX



    Rendering


    図は
  • html、react elmentなどのコードの可視化である.
  • React要素をDOMノードに追加し、画面上でレンダリングします.render関数
    • の使用
  • 最初のパラメータはreact要素をJSXに渡し、2番目のパラメータは要素をレンダリングしたいコンテナ(親要素)を渡します.
    • reactDOM.render{
	<h1>Hello, World!</hi>
    document.getelementById('root')
};

    React 02. Components & Props


    Component

  • 再利用可能なUI単位.
  • は、同じコードの重複部分を1つのコンポーネントに結合し、同じ設計コードまたは機能が必要な場所で再利用することができる.
  • クラスまたは関数.状況が異なる
  • ex)関数
    • を使用
    function Welcome() {
  return <h1>Hello </h1>;
}

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);
  • ex)クラス
    • を使用
    class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

    コンポーネントの操作



    より小さなコンポーネントに分離

    function Comment(props) {
  return (
    <div className="comment">
      <div className="user-info">
        <img className="avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="user-info-name">
          {props.author.name}
        </div>
      </div>
      <div className="comment-text">
        {props.text}
      </div>
      <div className="comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
  • の上のコードからより小さなコンポーネントを分離することができ、従来のコンポーネントをより簡潔にし、分離された小さなコンポーネントを再使用することができる.
    • function Avatar(props) {
  return (
    <img className="avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

  • AvatarコンポーネントにはユーザのAvatarUrlとnameが必要なのでCommentコンポーネントにはpropsが必要です.author情報はuserというプロパティに渡されました.props.authorのavatarUrlとnameの値はuserを介して渡されました.

  • .user-info部分をcomponentに分割します.
    • function UserInfo(props) {
  return (
    <div className="user-info">
      <Avatar user={props.user} />
      <div className="user-info-name">
        {props.user.name}
      </div>
    </div>
  );
}
  • が切断されると、Commentコンポーネントは以下のように簡潔になります.
    • function Comment(props) {
  return (
    <div className="comment">
      <UserInfo user={props.author} />
      <div className="comment-text">
        {props.text}
      </div>
      <div className="comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

    React 03. State of Component


    State

  • ステータスとは、コンポーネントのステータス値です.
  • State&propsはobjectであり、画面に表示する情報(ステータス)があるため、似たような役割を果たしています.
  • propsは、使用するコンポーネントの親によってパラメータのように渡さなければ使用できません.
    stateはコンポーネント内で定義して使用する必要があります.
    • class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }
  }

  render() {
    return (
      <div
        className="btn"
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

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

  • 上のコードはボタンをクリックするたびにstateを変更し、画面に表示されるテキスト「はい」「いいえ」をクリックするたびに変更します.

  • stateは複数追加でき、名前は任意に命名できます.

  • clickイベントが発生すると、clickedの状態が変更されます.

  • コンストラクション関数()は、クラスインスタンスを作成するときに常に呼び出される関数ジェネレータです.
    • constructor() {
  super();

  this.state = {
    clicked: false
  }
}

  • buttonコンポーネントを描画するには、次の手順に従います.state.clicked値が必要ですが、初期値は存在しません.したがって、コンストラクション関数はfalse値を指定します.

  • super()キーワードはreactです.Componentクラスのメソッド(ex.render)を使用する必要があります.

  • propsコード
    • class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }
  }

  render() {
    return (
      <div
        className={`btn ${this.props.type === 'like' ? 'like-btn' : ''}`}
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button type="like" />,
  document.getElementById('root')
);
  • this.props.type値がlikeの場合、like-btnというclassプロパティが追加されます.

    • React 04. Lifecycle of React component



    上記のクラスでコンポーネントを作成する場合はreactが望ましい.Componentクラスが提供するレンダリング、ComponentDidMount、ComponentDidUpdateなどの方法が使用できるからです.componentのライフサイクルに基づいてそれぞれのメソッドを呼び出します. 
    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);
  • の上部のコードは、現在の時間を秒単位で更新するtick関数を毎秒1回呼び出します.
    ----------後で整理して・・・困難後

    • React 05. Event handling

  • のボタンコードに戻り、
    • onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
    これにより,イベント処理が行われることが分かる.
  • イベントハンドラ部分を分離し、関数を減算することができる.
    • class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      clicked: !this.state.clicked
    });
  }

  render() {
    return (
      <div
        className={`btn ${this.props.type === 'like' ? 'like-btn' : ''}`}
        onClick={this.handleClick}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button type="like" />,
  document.getElementById('root')
);
    イベントハンドラ関数を
  • イベントに渡したときにバインドされていない場合、イベントハンドラ関数内にthisのコンテキストが失われるためbind(this)が必要です.
    • this.handleClick = this.handleClick.bind(this);
    mongodbレプリカセットの構成とnode.jsの使用
    ［1−1］作業環境の設定−(ES 6)