RailsでReactコンポーネントをつかう |

By: justine warrington – CC BY 2.0

1 React on rails
2 インストール
3 react on railsで生成されるファイル
4 material-uiをつかう
5 React Developer Tools
6 情報

React on rails

GitHub

shakacode/react_on_rails

https://github.com/shakacode/react_on_rails

react_on_rails - Integration of React + Webpack + Rails using rails/webpacker to build Universal (Isomorphic) Apps (aka Server Rendering)

React on railsは、RailsからReact.jsを使いやすいようにしたgem

webpackerでいいとも思えるけど、サーバーサイドレンダリング(SSR)が簡単にできたりする.

shakacode.gitbooks.io

Home · React On Rails

https://shakacode.gitbooks.io/react-on-rails/content/

インストール

webpackerのインストール

Gemfileに、 gem 'webpacker' を加えてbundle.

bundle exec rails webpacker:install
bundle exec rails webpacker:install:react

1 2	bundle exec rails webpacker:install bundle exec rails webpacker:install:react

react_on_railsのインストール

Gemfileに、 gem 'react_on_rails' を加えてbundle.

gitのステージをクリーンにしておく(git commitとか).

reduxバージョンもインストールできる.

bundle exec rails g react_on_rails:install

or

bundle exec rails g react_on_rails:install --redux

bundle exec rails g react_on_rails:install

bundle exec rails g react_on_rails:install --redux

react on railsで生成されるファイル

Procfile.dev

Procfileが生成されるので、foremanなどでまとめてサーバー起動できる.

foreman start -f Procfile.dev

1	foreman start -f Procfile.dev

routes.rb

まず、routes.rbに/hello_worldが加えられる.

  get 'hello_world', to: 'hello_world#index'

1	get 'hello_world', to: 'hello_world#index'

hello_world_controller.rb

hello_worldコントローラーをみると、indexアクションが定義されてる.

class HelloWorldController < ApplicationController
  layout "hello_world"

  def index
    @hello_world_props = { name: "Stranger" }
  end
end

class HelloWorldController < ApplicationController

layout "hello_world"

def index

@hello_world_props = { name: "Stranger" }

end

layouts/hello_world.html.erb

layoutの方をみると、webpackのjavascriptが読み込まれてる.

<!DOCTYPE html>
<html>
  <head>
    <title>ReactOnRailsWithWebpacker</title>
    <%= csrf_meta_tags %>
    <%= javascript_pack_tag 'hello-world-bundle' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ReactOnRailsWithWebpacker</title>

<%= csrf_meta_tags %>

<%= javascript_pack_tag 'hello-world-bundle' %>

</head>

<body>

<%= yield %>

</body>

</html>

index.html.erb

つぎに、index.html.erbの方をみると、react_componentメソッドが使われている.
サーバーサイドレンダリングは、ここでprerender: trueにすればよい.
propsで、react.jsのpropsに値を渡すことができる.

<h1>Hello World</h1>
<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

1 2	<h1>Hello World</h1> <%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

app/javascripts

javascripts以下はこんな感じ.

app/javascript/
├── bundles
│   └── HelloWorld
│       └── components
│           └── HelloWorld.jsx
└── packs
    ├── application.js
    ├── hello-world-bundle.js
    └── hello_react.jsx

app/javascript/

├── bundles

│ └── HelloWorld

│ └── components

│ └── HelloWorld.jsx

└── packs

├── application.js

├── hello-world-bundle.js

└── hello_react.jsx

hello-world-bundle.js

react_on_railsで設定したエントリポイントはhello-world-bundle.js
そして、ここで、ReactOnRails.registerしてるので、ビューヘルパーのreact_componentメソッドで”HelloWorld”を見つけられる.

import ReactOnRails from 'react-on-rails';

import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';

// This is how react_on_rails can see the HelloWorld in the browser.
ReactOnRails.register({
  HelloWorld,
});

import ReactOnRails from 'react-on-rails';

import HelloWorld from '../bundles/HelloWorld/components/HelloWorld';

// This is how react_on_rails can see the HelloWorld in the browser.

ReactOnRails.register({

HelloWorld,

});

HelloWorld.jsx

Reactコンポーネントの実体はこちら

import PropTypes from 'prop-types';
import React from 'react';

export default class HelloWorld extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired, // this is passed from the Rails view
  };

  /**
   * @param props - Comes from your rails view.
   */
  constructor(props) {
    super(props);

    // How to set initial state in ES6 class syntax
    // https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class
    this.state = { name: this.props.name };
  }

  updateName = (name) => {
    this.setState({ name });
  };

  render() {
    return (
      <div>
        <h3>
          Hello, {this.state.name}!
        </h3>
        <hr />
        <form >
          <label htmlFor="name">
            Say hello to:
          </label>
          <input
            id="name"
            type="text"
            value={this.state.name}
            onChange={(e) => this.updateName(e.target.value)}
          />
        </form>
      </div>
    );
  }
}

import PropTypes from 'prop-types';

import React from 'react';

export default class HelloWorld extends React.Component {

static propTypes = {

name: PropTypes.string.isRequired, // this is passed from the Rails view

};

/**

* @param props - Comes from your rails view.

constructor(props) {

super(props);

// How to set initial state in ES6 class syntax

// https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

this.state = { name: this.props.name };

}

updateName = (name) => {

this.setState({ name });

};

render() {

return (

<div>

<h3>

Hello, {this.state.name}!

</h3>

<hr />

<form >

Say hello to:

</label>

<input

id="name"

type="text"

value={this.state.name}

onChange={(e) => this.updateName(e.target.value)}

</form>

</div>

);

}

material-uiをつかう

material-ui.com

The world's most popular React UI framework - Material-UI

https://material-ui.com

React Components that Implement Google's Material Design.

material-uiは、マテリアルデザインを実装したReactコンポーネント.
バージョン１以降は、次のようにインストールできる.

yarn add @material-ui/core
yarn add @material-ui/icons

1 2	yarn add @material-ui/core yarn add @material-ui/icons

こんな感じでReactコンポーネントが使える.

AppBar

bodyのマージンを0にしておく.

  <body style="margin: 0">
    <%= yield %>
  </body>

<%= yield %>

</body>

import React, { Component } from 'react'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'

const Navbar = ()=>  {
    return (
        <div>
          <AppBar position="static">
            <Toolbar>
              <Typography variant="title" color="inherit">
                React & Material-UI Sample Application
              </Typography>
            </Toolbar>
          </AppBar>
        </div>
    )
}

export default Navbar

import React, { Component } from 'react'

import AppBar from '@material-ui/core/AppBar'

import Toolbar from '@material-ui/core/Toolbar'

import Typography from '@material-ui/core/Typography'

const Navbar = ()=> {

return (

<div>

React & Material-UI Sample Application

</Typography>

</Toolbar>

</AppBar>

</div>

)

}

export default Navbar

class化して、メニュー用のハンバーガーアイコンを追加

class Navbar extends Component {
  render(){
    return (
        <div>
          <AppBar position="static">
            <Toolbar>
              <IconButton 
                color="inherit"
                aria-label="Menu"
              >
                <MenuIcon />
              </IconButton>
              <Typography variant="title" color="inherit">
                React & Material-UI Sample Application
              </Typography>
            </Toolbar>
          </AppBar>
        </div>
    )
  }
}

class Navbar extends Component {

render(){

return (

<div>

<IconButton

color="inherit"

aria-label="Menu"

</IconButton>

React & Material-UI Sample Application

</Typography>

</Toolbar>

</AppBar>

</div>

)

}

Fab

Fabは右下に置きたい.
withStylesでコンポーネントにスタイルを適用できる.

import React, { Component } from 'react'
import Button from '@material-ui/core/Button'
import AddIcon from '@material-ui/icons/Add'
import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
  fab: {
    position: 'absolute',
    bottom: theme.spacing.unit * 2,
    right: theme.spacing.unit * 2
  }
})

const FloatingActionButton = (props)=> {
  const {classes} = props
  return (
    <Button variant="fab" color="secondary" className={classes.fab}>
      <AddIcon />
    </Button>
  )
}

// export default FloatingActionButton
export default withStyles(styles)(FloatingActionButton)

import React, { Component } from 'react'

import Button from '@material-ui/core/Button'

import AddIcon from '@material-ui/icons/Add'

import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({

fab: {

position: 'absolute',

bottom: theme.spacing.unit * 2,

right: theme.spacing.unit * 2

}

})

const FloatingActionButton = (props)=> {

const {classes} = props

return (

</Button>

)

}

// export default FloatingActionButton

export default withStyles(styles)(FloatingActionButton)

Dialog

FabからDialogを起動させてみる.
自分で作ったコンポーネントにonClickを設定しても反応しない.
そこで、handleClickOpen関数をpropsで子にわたす.

import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close';
import Button from '@material-ui/core/Button';
import Slide from '@material-ui/core/Slide';
import FloatingActionButton from './FloatingActionButton'

function Transition(props) {
  return <Slide direction="up" {...props} />;
}


class FullScreenDialog extends React.Component {
  state = {
    open: false 
  }

  handleClickOpen = () => {
    this.setState({open: true})
  }

  handleClose = () => {
    this.setState({open: false})
  }

  render() {
    return(
      <div>
        <FloatingActionButton handleClickOpen={this.handleClickOpen} />
        <Dialog
          fullScreen
          open={this.state.open}
          onClose={this.handleClose}
          TransitionComponent={Transition}
        >
          <AppBar>
            <Toolbar>
              <IconButton
                color="inherit"
                onClick={this.handleClose}
                aria-label="Close"
              >
                <CloseIcon />
              </IconButton>
              <Typography variant="title" color="inherit">
                Sound
              </Typography>
              <Button color="inherit" onClick={this.handleClose}>
                save
              </Button>
            </Toolbar>
          </AppBar>
          aiueo
        </Dialog>
      
      </div>
    )
  }
}

export default FullScreenDialog

import React from 'react';

import Dialog from '@material-ui/core/Dialog';

import DialogTitle from '@material-ui/core/DialogTitle';

import AppBar from '@material-ui/core/AppBar';

import Toolbar from '@material-ui/core/Toolbar';

import IconButton from '@material-ui/core/IconButton';

import Typography from '@material-ui/core/Typography';

import CloseIcon from '@material-ui/icons/Close';

import Button from '@material-ui/core/Button';

import Slide from '@material-ui/core/Slide';

import FloatingActionButton from './FloatingActionButton'

function Transition(props) {

return <Slide direction="up" {...props} />;

}

class FullScreenDialog extends React.Component {

state = {

open: false

}

handleClickOpen = () => {

this.setState({open: true})

}

handleClose = () => {

this.setState({open: false})

}

render() {

return(

<div>

<Dialog

fullScreen

open={this.state.open}

onClose={this.handleClose}

TransitionComponent={Transition}

<IconButton

color="inherit"

onClick={this.handleClose}

aria-label="Close"

</IconButton>

Sound

</Typography>

save

</Button>

</Toolbar>

</AppBar>

aiueo

</Dialog>

</div>

)

}

export default FullScreenDialog

で、Fabの方にonClickメソッドを設定する.

    const {classes} = this.props
    return (
      <Button 
        variant="fab" color="secondary" className={classes.fab}
        onClick={this.props.handleClickOpen}
      > 
        <AddIcon />
      </Button>
    )

const {classes} = this.props

return (

<Button

variant="fab" color="secondary" className={classes.fab}

onClick={this.props.handleClickOpen}

</Button>

)

Drawer

ハンバーガーメニューをクリックすると、ドロワーメニューが出てくるやつ.

HeaderというコンポーネントでNavbarとDrawerをくくって状態管理.

import React, { Component } from "react";
import Navbar from "./NavBar";
import MenuDrawer from "./MenuDrawer"

class Header extends Component {
  state = {
    open: false
  }

  handleMenuDrawer = () => {
    this.setState({open: !this.state.open})  
  }

  render() {
    return(
      <div>
        <MenuDrawer
          open={this.state.open} 
          handleMenuDrawer={this.handleMenuDrawer}
        />
        <Navbar handleMenuDrawer={this.handleMenuDrawer} />
      </div>
    )
  }

}

export default Header

import React, { Component } from "react";

import Navbar from "./NavBar";

import MenuDrawer from "./MenuDrawer"

class Header extends Component {

state = {

open: false

}

handleMenuDrawer = () => {

this.setState({open: !this.state.open})

}

render() {

return(

<div>

<MenuDrawer

open={this.state.open}

handleMenuDrawer={this.handleMenuDrawer}

</div>

)

}

export default Header

で、ドロワーのコンポーネントをつくる.

import React, { Component } from 'react'
import Drawer from '@material-ui/core/Drawer'

class MenuDrawer extends Component {
  render() {
    return (
      <div>
        <Drawer open={this.props.open} onClose={this.props.handleMenuDrawer}>
          <div
            tabIndex={0}
            role="button"
            onClick={this.props.handleMenuDrawer}
            onKeyDown={this.props.handleMenuDrawer}
          >
            aiueo
          </div>
        </Drawer>
      </div>
    )
  }
}

export default MenuDrawer

import React, { Component } from 'react'

import Drawer from '@material-ui/core/Drawer'

class MenuDrawer extends Component {

render() {

return (

<div>

<div

tabIndex={0}

role="button"

onClick={this.props.handleMenuDrawer}

onKeyDown={this.props.handleMenuDrawer}

aiueo

</div>

</Drawer>

</div>

)

}

export default MenuDrawer

最後に、NavBarの方にクリックイベントを設定する

          <AppBar position="static">
            <Toolbar>
              <IconButton 
                color="inherit"
                aria-label="Menu"
                onClick={this.props.handleMenuDrawer}
              >
                <MenuIcon />
              </IconButton>
              <Typography variant="title" color="inherit">
                React & Material-UI Sample Application
              </Typography>
            </Toolbar>
          </AppBar>