LoginSignup
0
0

More than 1 year has passed since last update.

@hiro-hiro(hiro hiro)

React メモ

Last updated at Posted at 2021-10-09

目次

  1. コマンド
  2. JSX
  3. props
  4. 条件分岐と繰り返し処理
  5. Stateとイベント処理
  6. ルーティング

1. コマンド

# create-react-appをインストール
$ npm install -g create-react-app

# 新規作成
$ npx create-react-app [プロジェクト名]

# TSX(JSXのTypeScript版)で作りたい時
# --template typescriptをつける
$ npx create-react-app --template typescript [プロジェクト名]

# 開発サーバー起動
$ npm start

# ビルドしてHTML/CSS/JSファイルを生成
$ npm run build

2. JSX

  • classはclassName, forはhtmlForで書く
  • {変数名} の形式で埋め込むことができる

index.js(最初に呼び出されるファイル)

//React関連のライブラリをインポート
import React from 'react';
import ReactDOM from 'react-dom';

//アプリ固有のファイルをインポート
import './index.css';
import App from './App';

//キャッシュのためのサービスをインポート
import reportWebVitals from './reportWebVitals';

//Appコンポーネントを実行
//render(comp, target)
//comp: 出力するコンポーネント
//target: 出力先の要素
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

//サービスを有効化
registerServiceWorker();

コンポーネントファイル

//Reactの基本ライブラリをインポート
import React, { Component } from 'react';

//ロゴ画像/スタイルシートをインポート
import logo from './log.svg';
import './App.css';

//Appコンポーネントを定義
class App extends Component {

  //描画内容を準備
  render() {
    return (
      //class → classNameにすること
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
          Learn React
          </a>
        </header>
      </div>
    );
  }
}

//Appクラスをエクスポート
export default App;

React.Fragment(ダミーの要素)

//React.Fragmentは最終的な出力には含まれない
ReactDOM.render(
  <React.Fragment>
    <p>あいうえお</p>
    <p>かきくけこ</p>
  </React.Fragment>
  , document.getElementById('root');
);

属性の設定

//属性値前後のクォートは付けない
//href="{url}"だとダメ
const url = 'https://wings.msn.to/';
<a href={url}>Webサイト</a>

//style属性の指定にはオブジェクトを利用する
//オブジェクトリテラルではcamelCase記法に直す
const style = { color: 'Red', backgroundColor: 'Yellow' };
<p style={style}>あいうえお</p>

//属性をまとめて設定
//オブジェクトリテラルと「...」演算子を利用する
const attrs = {
  src: 'http://test/image/aiueo.jpg',
  alt: 'あいうえお',
  title: 'テストあいうえお'
};
<img {...attrs} />

コンポーネントを入れ子にする

import React, { Component } from 'react';
//子コンポーネントをインポート
import MyCover from './MyCover';

export default class MyBook extends Component {
  render() {
    return (
      <div>
        {/* MyCoverコンポーネントを呼び出し */}
        <MyCover title={this.props.info.title} />
      </div>
    )
  }
}

3. props

propsとは?

単一のオブジェクトとしてこのコンポーネントに渡すオブジェクトのこと。
JSX内で使用する属性情報、子要素を渡すことができる。

//コンポーネント側
import React, { Component } from 'react';

export default class MyHello extends Component {
  //プロパティを元に出力を生成
  render(){
    return <div>こんにちは、{this.props.name}さん</div>;
  }
}

//index.js
import MyHello from './MyHello';
...
ReactDOM.render(
  //MyHelloコンポーネントにプロパティを引き渡す
  //この場合は「name」を渡す
  <MyHello name="鈴木" />,
  document.getElementById('root');
);
  • 「...」演算子を使用することで、オブジェクトの内容を個々の属性にばらすことも可能。
const data = {
  name: '鈴木',
  age: 18,
  sex: '男'
};

ReactDOM.render(
  <MyClass {...data} />,
  document.getElementById('root')
);

4. 条件分岐と繰り返し処理

条件分岐

「?:」演算子、「&&」演算子

  • 「?:」演算子は、三項演算子のような使い方
  • 「&&」演算子は、trueの時だけ出力される
//「?:」演算子
{ this.props.isNew ? <MyNew /> : null }

//「&&」演算子
{ this.props.isNew && <MyNew /> }

即時関数

//関数を使う
//見栄えが悪くなるので、なるべく先に名前付きで関数を作って、それを利用するようにする
{(() => {
  if(this.props.isNew){
    return <MyNew />
  }
})()}

繰り返し処理

Array#mapメソッドを利用する

const data = [
  { name: '鈴木', age: 18, sex: '男', userid=1 },
  { name: '佐藤', age: 20, sex: '女', userid=2 },
};

//index.js
ReactDOM.render(
  //配列dataを使っての繰り返し処理
  <div>
    {data.map((x) => 
      <MyClass {...x} />)}
  </div>
)

//keyプロパティを持たないことによる警告対処のため
//以下のようにkey属性を持つことを推奨
//主キーを持たない場合はkey={index}とするのもOK
//<MyClass {...x} key={x.userid} />

5. Stateとイベント処理

Stateとは?

  • コンポーネントの状態(state)を管理するオブジェクト。
  • stateの値を更新する場合は、setStateを使用する
export default class MyState extends Component {

  constructor(props) {
    super(props);

    //Stateの初期値を設定
    this.state = {
      current: new Date()
    }
  }

  //1000ミリ秒おきにStateを更新
  //setStateを使用する
  setInterval(() => {
    this.setState({
      current: new Date()
    });
  }, 1000)

  render() {
    //currentの値をページに反映
    <div>{this.state.current.toLocaleString()}</div>
  }
}

イベント処理

  • HTMLではonchange(全て小文字)だが、JSXではonChange(cameCase形式)で書く
  • this.関数名.bindでイベント実行時の関数を指定(bindを付けないとエラーになる)
//onchangeイベントを起こす
<input id="txtName" type="text" onChange={this.show.bind(this)} />

//アロー関数で指定する場合
<input id="txtName" type="text" onChange={(e) => this.show(e)}

//引数を渡す場合
show(end, e) {
  console.log(`${e.target.value}${end}`);
}
...
//元々のイベントオブジェクトは、引数リストの末尾に渡される
//end => 'さん'
//e => this
//がそれぞれわたされる
<input id="txtName" type="text" onChange={this.show.bind(this, 'さん')} />

ライフサイクルメソッド

後で書く

6. ルーティング

  • ルーティング機能用のライブラリとしてReact Routerがある
# React Routerをインストール
$ npm install --save react-router-dom

ルーティングのサンプル

  • ルーティング設定は<Route>で定義する
    • <Switch>で括っているのは、最初に合致した要素だけ出力する、という意味
    • exact属性は、完全一致で判定するという意味
  • ルーティング経由でのページ遷移は、<Link>で定義する
import React, { Component } from 'react';

//ルーティング関連の機能をインポート
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';

//ルーティングで利用するコンポーネントをインポート
import MyTop from './MyTop';
import MyHello from './MyHello';
import MyArticle from './MyArticle';

export default class App extends Component {
  render() {
    //Router(BrowserRouter)でルーティング機能を有効化
    return(
      <Router>
        <div>
          {/* ルーティング経由のリンクリストを準備 */}
          <ul>
            <li><Link to="/">トップ</Link></li>
            <li><Link to="/hello">Hello</Link></li>
            <li><Link to="/article">公開記事</Link></li>
          </ul>
          <hr />

          {/* ルーティング設定(条件にマッチしたコンポーネントを出力) */}
          <Switch>
            <Route exact path="/" component={MyTop} />
            <Route　path="/hello"　component={MyHello}/>
            <Route path="/article" component={MyArticle}/>
          </Switch>
        </div>
     </Router>
    )
  }
}

ルートパラメータ

  //リンク
  <Link to="/article/13">記事13</Link>

  //ルートパラメーターを含んだルート
  <Route path="/article/:id" component={MyArticle} />

  //コンポーネント側でルートパラメータを受け取る
  //this.props.match.params.名前で受け取ることが可能
  const id = this.props.match.params.id;

補足

  • <Route>にてpathを書かない場合、全てのURLにマッチする、という書き方ができる
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0