react【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する

本日は、reactのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。
ja.reactjs.org

Quipperに入社する前も一度読んだんですが、専門用語が多すぎてさっぱり意味がわかりませんでした。

ドキュメントを読む前にやったことは以下です。

JavaScript本格入門を読む
ReactとReduxのUdemy
普段のコーディング
りあクト！を読む

Getting Started

まずはこのページから。
Getting Started – React

Reactのドキュメントは、
　手を動かしたい人→チュートリアル
　コンセプトからひとつひとつ学んでいきたい人→ドキュメント
と、導線が２種類あるのが素敵ですね！

チュートリアルはやったことがあるので最後にして、まずはコンセプトから改めて学んでいきたいと思います。

Hello world

JavaScriptは12月にそこそこ学んだので、JavaScriptのチュートリアルは飛ばします。
Hello World – React

JSX

次はJSXについて。読んでみると意外と新しい発見がありました！
JSX の導入 – React

JSXはJavaScript構文の拡張で、テンプレート言語ではない。
JSX は HTML よりも JavaScript に近い。そのためReact DOM は HTML の属性ではなくキャメルケース (camelCase) のプロパティ命名規則を使用する。
JSXはレンダリングされる前にエスケープしてくれる。便利。
JSX はオブジェクトの表現である。以下は一緒。

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

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

render

要素のレンダー – React

React要素はイミュータブル（状態を変えることができないオブジェクト）
UIを更新するには、ReactDOM.render()に渡すこと
renderによってUI ツリー全体を表す要素を作成しているにも関わらず、内容が変更されたテキストノードのみが React DOM により更新されているのがポイント

コンポーネントとprops

コンポーネントと props – React

もしかして、propsってpropertiesの略...！？

関数コンポーネント

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

ES6から登場したclassも使用できる。

（ちなみに最近classでしかできなかった機能が関数コンポーネントでできるようになったため、classより全部関数コンポーネントで定義した方がイケてるらしいです。）

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

上の２つは同じ意味ですが、下はpropsを引数に渡してないにも関わらず突然現れるので読みにくいと思いました。

全ての React コンポーネントは、自己の props に対して純関数のように振る舞わねばならない。

純関数、つまり、同じpropsに対して絶対同じDOMが返ってこないとダメってことなんですね。

この章では、処理される順番が詳しく載っていたので大変わかりやすかったです。

stateとライフサイクル

propsは絶対同じ結果が返ってこないとだめだけど、表示を変えたいときは...？stateの出番です！！
state とライフサイクル – React

クラスのコンポーネントは常に props を引数として親クラスのコンストラクタを呼び出す必要があるからsuper(props);って書いてたんですね〜なるほど〜

this.stateに直接代入してよい唯一の場所はコンストラクタ
stateを変更したいときはsetState()を使う。

Reactは単一方向データフロー

つまり、データは上から下にしか伝わっていかず、下から上にデータが伝わることはない、ということですね！
propsは滝、stateは途中で合流する水源ってとてもわかりやすかったです。

イベント処理

イベント処理 – React

constructorの中で関数をbindをしないといけない理由は、JavaScript ではクラスのメソッドはデフォルトではバインドされないから。bindせずにonClick に渡した場合、実際に関数が呼ばれた時に this は undefined となってしまう。

constructorにいちいちbindを書くのが面倒なら、以下の方法で書く。

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

// もしくはこう。callbackされるところにかける。

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

条件付きレンダー

条件付きレンダー – React

ifとか&&とか条件演算子とかの話
コンポーネントレンダーされても隠したいときはnull使ってねという話。（空div返してた...）

リストと key

リストと key – React

map使えるよ、keyつけるの忘れんといてなーという話だった。
keyにindexは使っちゃだめ。

フォーム

フォーム – React

HTMLでは input、textarea、そして selectは通常自分で状態を持っているが、Reactではユーザに変更される値はstateに保持している。

stateのリフトアップ

state のリフトアップ – React

異なるコンポーネントで、一緒にデータを変更したい（同期させたい）ときの話。
この章では、摂氏が入力されたら同時に華氏に変換、または華氏が入力されたら摂氏に変換するフォームを作成する。
一番近い先祖のstateを変更して、子コンポーネントにpropsとして渡そうねって話だった。

コンポジション vs 継承

コンポジション vs 継承 – React

prop.childrenの話（渡すpropsが決まってないとき、子要素でprops.childrenって書けば任意のpropsが渡せる）
継承なんてする必要ない！コンポーネントに分けてimportしろ！

React の流儀

jsonデータとページのデザインがあれば、Reactの設計はこうやるんだよ！ってことが書いてありました。
React の流儀 – React

Step 1: UI をコンポーネントの階層構造に落とし込む
Step 2: Reactで静的なバージョンを作成する
Step 3: UI 状態を表現する必要かつ十分な state を決定する
Step 4: state をどこに配置するべきなのかを明確にする
Step 5: 逆方向のデータフローを追加する

3行以内でまとめる

reactとは、

UIを作るためのJavaScriptライブラリ
フレームワークじゃないよ

次はrender propsとHOC、その次にHOOKSを学ぶと良さそうな雰囲気...！！
頑張ります😭

以上です！

宮水の日記

主に書評や資格取得について記事を書いています。