Reactメモ

Web

Reactを0から勉強・練習している時の自分用メモです。

Reactってなんぞ??ってとこからざっくりメモっています。

スポンサードリンク

Reactてなに?

Facebookのエンジニアが作ったjsライブラリで世界的に人気。

複雑なアプデートにも柔軟に対応できる上、早くてレスポンシブ。

長いコードを書かなくて良い、使い回しできる。

大規模なプログラムで沢山変化するデータがあってもreactは素晴らしいパフォーマンスである。

フレキシブルなのでWebアプリ以外でも使える

とても人気。reactを理解すると採用されやすくなるかも?

JSXでコーディング

例:const h1 = <h1>Hello world</h1>;

JSXとは?

jsのシンタックスエクステンションでReactに使われる
HTMLに似ている

シンタックスエクステンション?

JSXはvalid(有効)なjavascriptではないのでブラウザーは読み込むことができない

どうする?

コンパイルしないといけない
JSXのcompiler(コンパイラー)でJSXをブラウザーが読めるように普通のjavascriptに変換する

Virtual(仮想)DOMについて

reactがサクセスフルなのはこれがあるからでもある

通常は、javascriptフレームワークはDOMで不要な部分も読み込み表示するため遅い
例えば、10個のアイテムがリストにあって、1つチェックしただけでも残りの9個も読み込み直すのでそのぶん遅くなるし無駄。

reactではDOMオブジェクトには対応するVirtual DOMが存在し、軽くて早い
通常のDOMと同じプロパティがある

通常のDOMを操作するのは遅いが、Virtual DOMだと早い。

JSXをレンダーするときに全てのVirtual DOMのオブジェクトがアップデートされます。
すごく効率的で、早いにもかかわらず、開発コストもあまりかからない

なぜ早い?

ReactがVirtual DOMの変更されたとこをだけを変更前と比較するので必要な箇所のDOMのみを更新する:これをDiffingという

ざっくりな流れ

  • (1) 全体のVirtual DOMが更新される
  • (2) Virtual DOMが更新される前の状態と比較する
  • (3) Reactがどのオブジェクトが変更されたのか理解する
  • (4) 変更が加わったオブジェクトのみリアルのDOMに更新される
  • (5) リアルのDOMの更新が画面に反映される

てかDOMって何?という方

DOM(Document Object Model)とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。
例えば<p>の中身のテキストを変更したり、<img src="sample.jpg">のsrcの中身を変更して別の画像に差し替えるといったことができます。

参照:DOMとは

JSX Writingルール

classはclassName
img / br / inputなどはself-closing tagを使う

ReactDOM.render(
  <h1>2 + 3</h1>,
document.getElementById('app')
);

だと”2 + 3”と表示される
*計算して”5”とは表示されない(テキストとして読み込む)

どうするか?

ReactDOM.render(
  <h1>{2 + 3}</h1>,

document.getElementById('app')
);

{}で囲むとその中身は通常のjavascriptとして読み込まれる

JSXの中にはif文は入れることはできない

例:


(
<h1>
{
if (purchase.complete) {
'ご購入ありがとうございます!'
}
}
</h1>
)

これダメ

ならどうやって条件分岐とかすんの?

JSX文の中に書かないだけ
例:

if (user.age >= drinkingAge) {
  message = (
    <h1>
      お酒は控えめにしましょう
    </h1>
  );
} else {
  message = (
    <h1>
       お酒は二十歳になってから
    </h1>
  );
}

The ternary operatorがよく使われる

The ternary operator(三項演算子)てどげん使うんけ?復習〜

例:

if(userIsYoungerThan21) {
  serveGrapeJuice();
}
else {
  serveWine();
}

このif文を短くできる

userIsYoungerThan21 ? serveGrapeJuice() : serveWine();

参考:How do you use the ? : (conditional) operator in JavaScript?

x ? y : z
xがtrueならyを返す
xがfalseならzを返す

keyとは?

keyはJSXのattributeでidのようなもの*ユニークじゃないとダメ

見えないものだけどReactが中でゴニョゴニョしてリストをトラック(追跡)します。

もし、keyが必要なのに設定していないとreactが違う順番にリストを並べてしまうかもです。

ならkeyはいつ使うの?

例:todoリストのようなリストアイテムに記録があるもの
シャッフルされるようなリスト

.map()と一緒に使うとき、

const peopleLis = people.map(person =>)

から

const peopleLis = people.map((person, i) => )

にして、
key={‘person_’ + i}
と記述する

person_1
person_2
person_3
person_4
……………

となる

JSXを使わなくても記述できる*ほとんどJSX使うけど

With JSX

const sampleTxt = <p>i am sample</p>;

Without JSX

const sampleTxt = React.createElement(
  “p",
  null,
  "i am sample"
);

Componentてなに?

コンポーネントは小さい、使い回しできるコードで1つの仕事を持っているやつ。
ほとんどの場合はhtmlをrenderする仕事。

Component Classは?

コンポーネントを作る工場のようなもの
コンポーネントクラスがあれば、そのクラスを使って好きなだけコンポーネントを作ることができる。

React.Componentでコンポーネントクラスを作れる

React.Componentてなんぞ?

Javascriptクラスで自分のコンポーネントクラスを作るために必ずサブクラスしないといけない。*作るのはコンポーネントではない

参考:サブクラス化

どうやって?

例:以下のシンタックスを使ってできます。

class MyComponentName extends React.Component {}

*MyComponentNameを好きな名前に(ただし大文字スタートUpperCamelCaseで!!)

Render Functionについて

class MyComponentClass extends React.Component {
  この中にどうコンポーネントを作るのか命令を書く
}

この命令の中にはrenderメソッドを入れないといけない。

class MyComponentClass extends React.Component {
  render() {
}
}

そしてrenderメソッドはreturnを含まないといけない。

class MyComponentClass extends React.Componet {
  render() {
return <h1>Hello world</h1>;
}
}

これでMyComponentClassができました

以下のコードでコンポーネントを作る。

ReactDOM.render(<MyComponentClass />, document.getElementById('app'));

◯番目のものを使う時

const greetings = [
  {
    title: “hello",
    src: “画像url"
  },
  {
    title: “what’s up",
    src: “画像url"
  },
  {
    title: “hola",
    src: “画像url"
  }
];

const greeting = greetings[ここにgreetingsの何番目か記述(0,1,2,3,4…)];

if文使う時

import React from 'react';
import ReactDOM from 'react-dom';

// 半分の確率でfalse or true
const fiftyFifty = Math.random() < 0.5;

// 新しいコンポーネントクラス
class TonightsPlan extends React.Component {
  render() {
    if(fiftyFifty) {
     return <h1>今夜はパーティーだぁ!</h1>
} else {
     return <h1>今夜はコーディングだぁ!</h1>
}
}
};

ReactDOM.render(<TonightsPlan />, document.getElementById('app'));

thisを使う時

thisはReactでよく使うらしい
例:

class MyName extends React.Component {
    // nameプロパティはここ
  get name() {
    return 'コーディングマン';
}

  render() {
    return <h1>My name is {this.name}.</h1>;
  }
}

ここでのthisはMynameのインスタンスです。

イベントリスナー

Render functionはよくイベントリスナーを含んでる

render() {
    return (
        <div onHover={function名}>
        </div>
    );
}

*onClickを良く使う

Reactではこんな感じでコンポーネントクラスのメソッドのイベントハンドラーを定義するぞよ

class MyClass extends React.Component {
  function名() {
    alert(‘ハ、、、ハ、、、ファンクション!!!!!');
  }

  render() {
    return (
        <div onHover={this.function名></div>;
        </div>
     );
  }
}

他のjsファイルからコンポーネントを読み込む:import

import { コンポーネント名 } from ‘./ファイルの場所’;

exportも重要
exportをエクスポートしたいもののすぐ前に記述
例:

export const sampleThings = {
    sample1: ‘xxxxxxxx’,
    sample2: ’yyyyyyyy’,
    sample3: ‘zzzzzzzzz'
};

*var, let, const, function, classが使える
使い分けについて:var/let/constの使い分けのメモ
var,let,constの違いは、ブロックスコープと巻き上げ

複数のものをexportできる

export const sampleThings = {
    sample1: ‘xxxxxxxx’,
    sample2: ’yyyyyyyy’,
    sample3: ‘zzzzzzzzz'
};

export const anotherOne = ‘xxxxxxxx’;

Propsてなに?

全てのコンポーネントはpropsを持っている。
コンポーネントのpropsはそのコンポーネントの情報を持ったオブジェクトである。

コンポーネントのpropsを見るには、this.propsを使う
例:

render() {
  console.log(“Propsオブジェクトがくるよ〜");

  console.log(this.props);

  console.log(“今のがワシのpropsじゃよ");

  return <h1>Hello world</h1>;
}

情報をコンポーネントに渡す
以下みたいに属性を与えることで渡すよ〜

<SampleComponent sample=“this is smaple” />

配列を渡すことも

<Jobs myJobs={[“cleaner", “DJ", “waiter"]} />

色々渡せる

<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />

*stringじゃない時は{}で囲む

全体はこんな感じ

class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.name}!</h1>;
  }
}

ReactDOM.render(
  <Greeting name='こんにちは' />, 
  document.getElementById('app')
);

propsはコンポーネントに情報を渡す時に使われるのが一般的

Propsでfunctionを渡す

Sample.js内:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

class Test extends React.Component {
  sample() {
    命令内容
  }
  
  render() {
    return <Button test={this.sample} />;
  }
}

ReactDOM.render(
  <Test />,
  document.getElementById('app')
);

Button.js内

import React from 'react';

export class Button extends React.Component {
  render() {
    return (
      <button>
        Click me!
      </button>
    );
  }
}

Propsで情報を受け取る

Button.js内

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.sample}>
        Click me!
      </button>
    );
  }
}

*onClick={this.props.sample}でsampleの命令内容の情報を受け取る

名前の付け方

*別に従わなくても良い
例から
さっきのSample.js内:sample()をhandleClick()に変更し、
<Button />内のtestをonClickに変更し、event名に合わせてsampleをhandleClickに変更

class Test extends React.Component {
  handleClick() {
    命令内容
  }
  
  render() {
    return <Button onClick={this.handleClick} />;
  }
}

ReactDOM.render(
  <Test />,
  document.getElementById('app')
);

さっきのButton.js内
<button>内のsampleをprops名に合わせてonClickに変更

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        Click me!
      </button>
    );
  }
}

この時、Sample.js内の<Button />にあるonClickはevent listenerを作らない、通常のpropsの名前。
Button.js内の<button>にあるonClickはevent listenerを作る。

<Button />はJSXではなく、コンポーネントのインスタンスだから。

HTMLに似ているJSXでonClickなどの名前が使われたら、それはevent listenerを生成する。それ以外は普通のpropの名前。

this.props.childrenてどげんして使うと???

コンポーネントの全てのpropsオブジェクトはchildrenというプロパティを持っている。
this.props.childrenはコンポーネントのJSXの開始タグから閉じタグ内のものを返す。

今まで、<MyComponent />のようなself-closingタグで書いていましたが、<MyComponent></MyComponent>でも動きます。

そんで、this.props.childrenは<MyComponent></MyComponent>の間のもの全て返します。

例:
// Example 1

<Sample>
  Hello world
</Sample>

this.props.childrenは「Hello world」になる

// Example 2

<Sample>
  <Test />
</Sample>

this.props.childrenは「」になる

// Example 3

<Sample />

this.props.childrenは「undefined」になる

コンポーネントが1つ以上childをJSXタグ内に持っていたら、それを全部配列で返す。

defaultPropsてなんぞよぉぉぉぉ???

デフォルトのpropsを設定できる
例:

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

Example.defaultProps = { text: ’this is a default' };

Dynamic informationてなんやね〜〜〜ん???

Dynamic informationとは変化可能な情報であ〜る

??どゆこと

Reactコンポーネントはよくrenderするのに、Dynamic informationが必要になる。
例:バスケットボールゲームでスコアはどんどん変わる。ということは、そのスコアはDynamicであ〜る。

コンポーネントがDynamic informationを得るのに2つの方法がある:propsとstate
propsとstate以外、コンポーネントで使われているvalueは変わらない

State???なんそれ??

stateは外から渡されるものではない
コンポーネントが自分のstateを決める

コンポーネントにstateを持たせるためにはコンポーネントにstateプロパティを与えないといけません。
このプロパティはconstructorメソッド内で宣言されないといけない。
例:

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { mood: ’sad' };
    }
    render() {
        return <div></div>; 
    }
}
 <Example />

何これ???

constructor(props) {
  super(props);
  this.state = { mood: ’sad' };
}

this.stateはオブジェクトとイコールになってないといけない。
このオブジェクトはコンポーネントインスタンスの最初の”state”になる。

superて何?すごいの?

細かいことは省くが、Reactコンポーネントはプロパティをセットするためにconstructor内でsuperを使わないといけない。

一番下の<Example />がstateを持っていることになり、{ mood : ’sad’ }とイコールになっている。
*constructorとrenderはコンマで分割しない!

Stateにアクセス

this.state.プロパティ名
例:

<h1>{this.state.プロパティ名}</h1>

this.setState()でstateをチェーーーーンジ

this.state = {
    mood: ’sad’
    angry: false
}

こういうstateがあって、

this.setState({ angry: true});

をすると、その後は

{
    mood: ’sad’
    angry: true
}

がstateになる。

*moodの箇所は変わってないです。

違うfunctionからthis.setStateを呼び出す

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { weather: 'sunny' };
    this.makeSomeFog = this.makeSomeFog.bind(this);
  }

thisを使うコンポーネントクラスメソッドを書く時、以下をconstructor内に記述
this.methodName = this.methodName.bind(this)

ボタンを押すと背景が変わるやつ

import React from 'react';
import ReactDOM from 'react-dom';

const green = '#39D1B4';
const yellow = '#FFD712';

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: green }
    this.changeColor = this.changeColor.bind(this);
}
  
  changeColor() {
    //今表示している色ともう一つの色を入れ替える
    const newColor = this.state.color == green ? yellow : green;
    this.setState({ color: newColor });
}
  
  render() {
    return (
      <div style={{background: this.state.color}}>
        <h1>
          Change my color
        </h1>
        <button onClick={this.changeColor}>
            Change color
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Toggle />, document.getElementById('app'));

以下は、Aの時B、Bの時Aを渡すやつ(changeColor()内)

const newColor = this.state.color == A ? B : A;
this.setState({ color: newColor });

this.setState()をコールする時はいつでも、this.setState()がrender()をコールする。
そのため、renderの中にthis.setState()をコールしてしまうと、無限ループする、、、

*勉強次第随時更新します〜〜〜

Webのコトでお困りの方

ホームページの制作・修正・リニューアル等のお手伝い致します!!詳細はこちら

まずは下のリンクから気軽にご相談ください^ ^

SNSからのDMの方が早くレスポンスできます。