{"id":2729,"date":"2019-12-02T10:50:05","date_gmt":"2019-12-02T01:50:05","guid":{"rendered":"http:\/\/www.whoocus.com\/blog\/?p=2729"},"modified":"2020-05-05T12:44:28","modified_gmt":"2020-05-05T03:44:28","slug":"phoenix-react-%e9%80%a3%e6%90%ba","status":"publish","type":"post","link":"https:\/\/www.blowfish.co.jp\/?p=2729","title":{"rendered":"Phoenix – React \u9023\u643a"},"content":{"rendered":"\n

Phoenix Project \u4f5c\u6210<\/h3>\n\n\n\n
$ mix phx.new ProjectName --app project_name --no-ecto<\/code><\/pre>\n\n\n\n
npm \u30e2\u30b8\u30e5\u30fc\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n\n\n\n
$ cd ProjectName\/assets\/node_modules\/
$ npm install --save @babel\/preset-react
$ npm install --save @babel\/polyfill
$ npm install --save react react-dom redux react-redux
$ npm install --save react-router-dom
$ npm install --save connected-react-router history
$ npm install --save redux-thunk
$ npm install --save axios
$ npm install --save redux-form react-hook-form
$ npm install --save react-bootstrap
$ npm install --save history
$ npm install redux-saga --save

<\/pre>\n\n\n\n
.babelrc \u8a2d\u5b9a<\/h3>\n\n\n\n
assets\/.babelrc
{
    \"presets\": [
        \"@babel\/preset-env\",
        \"@babel\/react\"
    ]
}
<\/pre>\n\n\n\n
\u30a8\u30f3\u30c8\u30ea\u30dd\u30a4\u30f3\u30c8(index.js)\u306e\u5909\u66f4<\/h3>\n\n\n\n
$mv assets\/js\/app.js assets\/js\/index.js<\/code><\/pre>\n\n\n\n
index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    Hello React!!
  <\/div>,
    document<\/em><\/strong>.getElementById('root')
);
<\/pre>\n\n\n\n
<\/p>\n\n\n\n
webpack.config.js

entry: {
  '.\/js\/index.js': glob.sync('.\/vendor\/**\/*.js').concat(['.\/js\/index.js'])
},
output: {
  filename: 'index.js',
  path: path.resolve(__dirname, '..\/priv\/static\/js')
},

<\/pre>\n\n\n\n
index.eex \u306e\u5909\u66f4<\/h3>\n\n\n\n
lib\/project_name_web\/templates\/page\/index.eex

<section class=\"row\">
  <article class=\"column\">
    <div id=\"root\"><\/div>
  <\/article>
<\/section><\/pre>\n\n\n\n
index.js\u30d1\u30b9\u306e\u5909\u66f4<\/h3>\n\n\n\n
lib\/project_name_web\/templates\/layout\/app.eex

<script type=\"text\/javascript\" src=\"<%= Routes.static_path(@conn, \"\/js\/index.js\") %>\"><\/script>
<\/pre>\n","protected":false},"excerpt":{"rendered":"
Phoenix Project \u4f5c\u6210 npm \u30e2\u30b8\u30e5\u30fc\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb $ cd ProjectName\/assets\/node_modules\/$ npm install –save @babel\/preset-rea […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"saved_in_kubio":false,"footnotes":""},"categories":[54,61,4],"tags":[],"class_list":["post-2729","post","type-post","status-publish","format-standard","hentry","category-phoenix-framework","category-react-js","category-tech"],"_links":{"self":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts\/2729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2729"}],"version-history":[{"count":21,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts\/2729\/revisions"}],"predecessor-version":[{"id":2757,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts\/2729\/revisions\/2757"}],"wp:attachment":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2729"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2729"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}