この記事の続きです
ここまででAPIエンドポイントができてCSSも当たるようになりました。
いよいよUIを作りこんでいく、といきたいところですがそのまえにReactとReact周りのほげほげを導入していきます。
まだbabelの設定をやってなかったので、まずはバベっておきます
$ yarn add babel-core $ yarn add babel-loader@7 $ yarn add babel-preset-react $ yarn add babel-preset-env
rulesに追加します
rules: [ { test: /\.(js)$/, loaders: 'babel-loader', query: { presets: ['react', 'env'], } },
react周りのやつ
$ yarn add react $ yarn add react-dom $ yarn add redux $ yarn add react-redux
application.html.erbに以下を追加します
<div id="root"></div>
application.jsを修正
import React from 'react' import ReactDOM from 'react-dom' const rootElement = document.getElementById('root') ReactDOM.render( <div> konnichiwa! </div>, rootElement )
ブラウザで konnichiwa! が出ました。Reactは問題なさそうです。
続いてReduxしていきます。
app/javascript/packs/redux/store.jsを作ります。まずはシンプルに
import { createStore } from "redux" const store = createStore(() => {}) export default store
中身は空ですがcomponentも作っておきます
app/javascript/packs/components/Tasks.js
import React from "react"; import { connect } from "react-redux" class Tasks extends React.Component { render(){ return( <div> you will see some tasks here </div> ) } } const mapStateToProps = state => { return { } }; const mapDispatchToProps = dispatch => { return { } } export default connect( mapStateToProps, mapDispatchToProps )(Tasks);
application.jsを修正してビルド。
import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import store from './redux/store' import Tasks from './components/Tasks' const rootElement = document.getElementById('root') ReactDOM.render( <Provider store={store}> <Tasks /> </Provider>, rootElement )
エラーもなくyou will see some tasks hereが出ました。これでUIを作る準備もできました。
やってくぞー