React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する


  1. React 開発の全体像を把握しつつ開発環境を整える
  2. React の単純なサンプルに React Router を適用する
  3. React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する
  4. React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む

Bootstrap を Reactから利用できるようにする、React-Bootstrap を導入する。



React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. If you have React setup and React-Bootstrap installed you have everything you need.
You can consume the library as CommonJS modules, ES6 modules via Babel, AMD, or as a global JS script.

React-Bootstrapでは、Reactを使用して、Bootstrapコンポーネントを完全に再実装しているとのこと。bootstrap.js にも、jQueryにも依存していなくて、React と React-Bootstrapをインストールすれば、十分らしい。安心してインストール!

npm install --save react-bootstrap


ということで、上記 Ajax通信を組み込んだ状態に、変更を加えてみる。


チュートリアルに従い、HTMLから、CSSを CDNを参照するように指定する。

<!doctype html>
        <meta charset="utf-8">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="">
        <!-- Optional theme -->
        <link rel="stylesheet" href="">
        <title>Reac Get Start</title>
        <div id="root"></div>
        <script src="./dist/bundle.js"></script>


react-bootstrap から、Grid, Row, Col をインポートして、Bootstrapの グリッドレイアウトを記述できる。これはわかりよい!

また、button –> Button とすることで、Bootstrap のボタンに変更。

  Nav、NavItem と、React-Router の Link コンポーネントをどう合わせて利用したらよいのかが、課題。そもそも、Reactコンポーネントを合成することができるのか?

<Nav btStyle=”tabs”>

    <NavItem><Link to=”..”>hoge</Link></NaviItem>


とすると、タブのうち、文字の部分がハイパーリンクになって、そこを選択しないと(タブ全体ではだめ) 遷移しない。。。

とりあえず、UL に css class を適用すると機能はしているが、、、

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom'
import { helloAction, helloApiAction } from '../actions';
import { 
  Grid, Row, Col,
  Button, ButtonToolbar, 
  Nav, NavItem,
} from 'react-bootstrap';

class Home extends Component {
  handleMessage() {
  handleMessageApi(event) {
    this.props.dispatch(helloApiAction({ id: }));
  render() {
    return (
        <Alert bsStyle="info">{this.props.hello}</Alert>
          <Button onClick={this.handleMessage.bind(this)} >Hello</Button>
          <Button bsStyle="primary" name="successurl" onClick={this.handleMessageApi.bind(this)} >API(Sucess)</Button>
          <Button bsStyle="danger"  name="failurl" onClick={this.handleMessageApi.bind(this)} >API(Fail)</Button>

const About = () => (
const Topics = () => (

class App extends Component {
  render() {
    return (
            <Row className="show-grid">
              <Col xs={12}>
                  <ul className="nav nav-tabs">
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/topics">Topics</Link></li>
            <Row className="show-grid">
              <Col xs={8}>
                {/* */}
                <Route exact path="/" component={connect(state => state)(Home)} />
                <Route exact path="/about" component={About} />
                <Route exact path="/topics" component={Topics} />

function mapStateToProps(state) {
  return {

// export default withRouter(connect(mapStateToProps)(App))
export default connect(state => state)(App)


実行したところ。Bootstrap UI になったよ~



Follow me!


メールアドレスが公開されることはありません。 * が付いている欄は必須項目です