reactについて

[KeihakuOh]

reactのrouterについて

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, IndexRoute } from 'react-router';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';

import App from './components/App';
import SongList from './components/SongList';
import SongCreate from './components/SongCreate';

const client = new ApolloClient({});

const Root = () => {
  return (
    <ApolloProvider client={client}>
      <Router history={hashHistory}>
        <Route path="/" component={App}>
          <IndexRoute component={SongList} />
          <Route path="song/new" component={SongCreate} />
        </Route>
      </Router>
    </ApolloProvider>
  );
};

ReactDOM.render(
  <Root />,
  document.querySelector('#root')
);

トップページ（/）にアクセス: URLがhttp://example.com/#/の場合、Appコンポーネントが表示され、その中のIndexRouteによってデフォルトでSongListが表示されます。

/song/newにアクセス: URLがhttp://example.com/#/song/newの場合、Appコンポーネントが表示され、その中のRouteによってSongCreateが表示されます。

このルーティング設定では、トップページ"/"にアクセスするとAppコンポーネントが表示され、その中でSongListがデフォルトで表示されます。また、/song/newにアクセスすると、Appコンポーネント内でSongCreateコンポーネントが表示されます。つまり、ルート階層の構造としてAppが共通して表示され、特定のパスに応じて中身が切り替わる仕組みです。

[KeihakuOh]

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

class SongCreate extends Component {
  constructor(props) {
    super(props);

    this.state = { title: '' };
  }

  onSubmit(event) {
    event.preventDefault();

    this.props.mutate({
      variables: {
        title: this.state.title
      }
    });
  }

  render() {
    return (
      <div>
        <h3>Create a New Song</h3>
        <form onSubmit={this.onSubmit.bind(this)}>
          <label>Song Title:</label>
          <input
            onChange={event => this.setState({ title: event.target.value })}
            value={this.state.title}
          />
        </form>
      </div>
    );
  }
}

const mutation = gql
  mutation AddSong($title: String){
    addSong(title: $title) {
      title
    }
  }
;

export default graphql(mutation)(SongCreate);

    super(props);

    this.state = { title: '' };はそれぞれ何？また、    this.props.mutate({
      variables: {
        title: this.state.title
      }
    });

class SongCreate extends React.Component { constructor(props) { super(props); // 親クラスである React.Component のコンストラクタを呼び出す // ここで this が正しく使えるようになる } }

this.state の役割 state は、Reactクラスコンポーネントが内部で持つ状態（データ）を管理するためのオブジェクトです。この状態はコンポーネント内で変更可能であり、変更が行われると自動的に再レンダリングされてUIが更新されます。

[KeihakuOh]

hashHistory は、React Router で使用される「ルーティング履歴管理オブジェクト」の一種です。これを使うと、URLに #（ハッシュ）が含まれる形でルーティングを管理できます。具体的には、ブラウザのアドレスバーに表示されるURLが次のような形式になります。

hashHistory の特徴

ハッシュ (#) ベースのURL: URLに # が含まれているため、ブラウザがサーバーにリクエストを送信せずに、クライアント側でルートを切り替えることができます。たとえば、http://example.com/#/home のようなURLでは、ブラウザは #/home の部分を気にせず、サーバーには http://example.com の部分だけをリクエストします。クライアント側（Reactアプリ）が #/home を解釈して適切なコンポーネントをレンダリングします。

履歴管理: hashHistory を使うことで、ブラウザの「戻る」や「進む」ボタンを使って、以前のページに戻ったり、進んだりする履歴管理が可能です。hashHistory がその履歴を追跡し、適切にコンポーネントを再表示します。