![\"Screencapture](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/656460ebdaa94e2bdf7b2f3a\/6-0.png\" "\\"\\"")
<\/div>\n\u524d\u63d0\u6761\u4ef6<\/h2>\n
\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306b\u5f93\u3046\u305f\u3081\u306b\u306f\u3001\u6b21\u306e\u3082\u306e\u304c\u5fc5\u8981\u3067\u3059\uff1a<\/p>\n
- \n
- Node.js and npm installed on your development machine. This tutorial uses Node.js version 16.14.0 and npm version 8.3.1. Node.js is a JavaScript run-time environment that allows you to run your code outside the browser. It comes with a pre-installed Package Manager called npm, which lets you install and update packages. To install these on Ubuntu 20.04 or macOS, follow the \u201cInstalling Using a PPA\u201d section of How To Install Node.js on Ubuntu 20.04 or the steps in How to Install Node.js and Create a Local Development Environment on macOS.<\/li>\n
- The Yarn package manager installed on your development machine, which will allow you to download the React framework. This tutorial was tested on version 1.22.10; to install this dependency, follow the official Yarn installation guide.<\/li>\n
- Ruby on Rails installed. To get this, follow our guide on How to Install Ruby on Rails with rbenv on Ubuntu 20.04. If you would like to develop this application on macOS, you can use How To Install Ruby on Rails with rbenv on macOS. This tutorial was tested on version 3.1.2 of Ruby and version 7.0.4 of Rails, so make sure to specify these versions during the installation process.<\/li>\n<\/ul>\n\n
Note<\/p>\n
\u6ce8\u610f\uff1aRails\u30d0\u30fc\u30b8\u30e7\u30f37\u306f\u4e92\u63db\u6027\u304c\u3042\u308a\u307e\u305b\u3093\u3002\u3082\u3057Rails\u30d0\u30fc\u30b8\u30e7\u30f35\u3092\u4f7f\u3063\u3066\u3044\u308b\u5834\u5408\u306f\u3001Ubuntu 18.04\u3067Ruby on Rails v5\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306bReact\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092\u8a2d\u5b9a\u3059\u308b\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/div>\n<\/div>\n- \n
- PostgreSQL installed, as described in Steps 1 and 2 How To Use PostgreSQL with Your Ruby on Rails Application on Ubuntu 20.04 or How To Use PostgreSQL with Your Ruby on Rails Application on macOS. To follow this tutorial, you can use PostgreSQL version 12 or higher. If you want to develop this application on a different distribution of Linux or another OS, see the official PostgreSQL downloads page. For more information on how to use PostgreSQL, see How To Install and Use PostgreSQL.<\/li>\n<\/ul>\n
\u30b9\u30c6\u30c3\u30d71 – \u65b0\u3057\u3044Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210<\/h2>\n
\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u4e0a\u306b\u30ec\u30b7\u30d4\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002\u307e\u305a\u6700\u521d\u306b\u3001React\u3068\u9023\u643a\u3059\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3055\u308c\u305f\u65b0\u3057\u3044Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
Rails\u306f\u3001\u73fe\u4ee3\u306e\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u3059\u3079\u3066\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u3044\u304f\u3064\u304b\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u3089\u306e\u30b3\u30de\u30f3\u30c9\u306e\u5b8c\u5168\u306a\u30ea\u30b9\u30c8\u3068\u305d\u308c\u3089\u306e\u5f79\u5272\u3092\u78ba\u8a8d\u3059\u308b\u306b\u306f\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- rails -h<\/span><\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u5305\u62ec\u7684\u306a\u30ea\u30b9\u30c8\u3092\u8868\u793a\u3057\u307e\u3059\u3002\u30ea\u30b9\u30c8\u306b\u306f\u3001\u65b0\u3057\u3044Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u300cnew\u300d\u30b3\u30de\u30f3\u30c9\u3082\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u4eca\u3001\u65b0\u3057\u3044\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u3092\u4f7f\u7528\u3057\u3066\u65b0\u3057\u3044Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- rails new rails_react_recipe<\/mark> -d<\/span> postgresql -j<\/span> esbuild -c<\/span> bootstrap -T<\/span><\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u524d\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u540d\u304crails_react_recipe\u3067\u3042\u308b\u65b0\u3057\u3044Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u3001\u5fc5\u8981\u306aRuby\u304a\u3088\u3073JavaScript\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3001Webpack\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u3053\u306e\u65b0\u3057\u3044\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30b3\u30de\u30f3\u30c9\u306b\u95a2\u9023\u3059\u308b\u30d5\u30e9\u30b0\u306b\u306f\u4ee5\u4e0b\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
- \n
- The -d flag specifies the preferred database engine, which in this case is PostgreSQL.<\/li>\n
- The -j flag specifies the application\u2019s JavaScript approach. Rails offers a few different ways to handle Javascript code in Rails applications. The esbuild option passed to the -j flag instructs Rails to preconfigure esbuild as the preferred JavaScript bundler.<\/li>\n
- The -c flag specifies the application\u2019s CSS processor. Bootstrap is the preferred option in this case.<\/li>\n
- The -T flag instructs Rails to skip the generation of test files since you won\u2019t be writing tests for this tutorial. This command is also suggested if you want to use a Ruby testing tool different from the one Rails provides.<\/li>\n<\/ul>\n
\u30b3\u30de\u30f3\u30c9\u304c\u5b8c\u4e86\u3057\u305f\u3089\u3001\u30a2\u30d7\u30ea\u306e\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067\u3042\u308brails_react_recipe\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- cd<\/span> rails_react_recipe<\/mark><\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u6b21\u306b\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u5185\u5bb9\u3092\u30ea\u30b9\u30c8\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- ls<\/span><\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5f62\u5f0f\u3067\u5185\u5bb9\u3092\u5370\u5237\u3057\u307e\u3059\u3002<\/p>\n
<\/code><\/pre>\nOutput<\/div>\n<\/code><\/pre>\nGemfile README.md bin db node_modules storage yarn.lock Gemfile.lock Rakefile config lib package.json tmp Procfile.dev app config.ru log public vendor<\/p>\n
<\/code><\/pre>\n\u3053\u306e\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306f\u3001\u81ea\u52d5\u751f\u6210\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u3068\u30d5\u30a9\u30eb\u30c0\u304c\u3044\u304f\u3064\u304b\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u3089\u306fRails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u9020\u3092\u69cb\u6210\u3059\u308b\u3082\u306e\u3067\u3042\u308a\u3001React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f9d\u5b58\u95a2\u4fc2\u304c\u542b\u307e\u308c\u308bpackage.json\u30d5\u30a1\u30a4\u30eb\u3082\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u65b0\u3057\u3044Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u6210\u529f\u88cf\u306b\u4f5c\u6210\u3057\u305f\u306e\u3067\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u63a5\u7d9a\u3057\u307e\u3059\u3002<\/p>\n
\u30b9\u30c6\u30c3\u30d72 \u2014 \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u8a2d\u5b9a<\/h2>\n
\u65b0\u3057\u3044Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3059\u308b\u524d\u306b\u3001\u307e\u305a\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u63a5\u7d9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u65b0\u3057\u304f\u4f5c\u6210\u3057\u305fRails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092PostgreSQL\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u63a5\u7d9a\u3057\u3066\u3001\u30ec\u30b7\u30d4\u30c7\u30fc\u30bf\u3092\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u4fdd\u5b58\u304a\u3088\u3073\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n
config\/database.yml\u306b\u3042\u308bdatabase.yml\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u3001\u3055\u307e\u3056\u307e\u306a\u958b\u767a\u74b0\u5883\u3054\u3068\u306e\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u540d\u306a\u3069\u306e\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u8a73\u7d30\u304c\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002Rails\u306f\u74b0\u5883\u540d\u306e\u5f8c\u306b\u30a2\u30f3\u30c0\u30fc\u30b9\u30b3\u30a2(_)\u3092\u4ed8\u3051\u3066\u3001\u3055\u307e\u3056\u307e\u306a\u958b\u767a\u74b0\u5883\u306b\u5bfe\u3057\u3066\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u540d\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u8a2d\u5b9a\u5024\u3092\u4f7f\u7528\u3057\u307e\u3059\u304c\u3001\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u8a2d\u5b9a\u5024\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n
\nNote<\/p>\n
\u6ce8\u610f\uff1a\u3053\u306e\u6642\u70b9\u3067\u3001config\/database.yml\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u3067\u3001\u3069\u306ePostgreSQL\u306e\u30ed\u30fc\u30eb\u3092Rails\u304c\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3059\u308b\u304b\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u524d\u63d0\u6761\u4ef6\u306e\u4e2d\u3067\u3001How To Use PostgreSQL with Your Ruby on Rails Application\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u3001\u30d1\u30b9\u30ef\u30fc\u30c9\u3067\u4fdd\u8b77\u3055\u308c\u305f\u30ed\u30fc\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002\u307e\u3060\u30e6\u30fc\u30b6\u30fc\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u540c\u3058\u524d\u63d0\u6761\u4ef6\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u306e\u30b9\u30c6\u30c3\u30d74 – \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u8a2d\u5b9a\u3068\u4f5c\u6210\u306e\u624b\u9806\u306b\u5f93\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/div>\n<\/div>\nRails\u306f\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u4f5c\u6210\u3001\u524a\u9664\u3001\u30ea\u30bb\u30c3\u30c8\u306a\u3069\u3001\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u3092\u5bb9\u6613\u306b\u3059\u308b\u591a\u304f\u306e\u30b3\u30de\u30f3\u30c9\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u305f\u3081\u306b\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3092\u4f5c\u6210\u3059\u308b\u306b\u306f\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- rails db:create<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u958b\u767a\u304a\u3088\u3073\u30c6\u30b9\u30c8\u7528\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3092\u4f5c\u6210\u3057\u3001\u4ee5\u4e0b\u306e\u51fa\u529b\u3092\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n
<\/code><\/pre>\nOutput<\/div>\n<\/code><\/pre>\nCreated database ‘rails_react_recipe_development’ Created database ‘rails_react_recipe_test’<\/p>\n
<\/code><\/pre>\n\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u63a5\u7d9a\u3057\u3066\u8d77\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- bin\/dev<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\nRails\u306f\u3001Foreman gem\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u3042\u308bProcfile.dev\u30d5\u30a1\u30a4\u30eb\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u3001Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8d77\u52d5\u3059\u308b\u4ee3\u66ff\u306ebin\/dev\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n
\u3053\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u30b3\u30de\u30f3\u30c9\u30d7\u30ed\u30f3\u30d7\u30c8\u304c\u6d88\u3048\u3001\u305d\u306e\u4ee3\u308f\u308a\u306b\u4ee5\u4e0b\u306e\u51fa\u529b\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n
<\/code><\/pre>\nOutput<\/div>\n<\/code><\/pre>\nstarted with pid 70099 started with pid 70100 started with pid 70101 yarn run v1.22.10<\/mark> yarn run v1.22.10<\/mark> $ esbuild app\/javascript\/*.* –bundle –sourcemap –outdir=app\/assets\/builds –public-path=assets –watch $ sass .\/app\/assets\/stylesheets\/application.bootstrap.scss:.\/app\/assets\/builds\/application.css –no-source-map –load-path=node_modules –watch => Booting Puma => Rails 7.0.4<\/mark> application starting in development => Run `bin\/rails server –help` for more startup options [watch] build finished, watching for changes… Puma starting in single mode… * Puma version: 5.6.5<\/mark> (ruby 3.1.2-p20) (“Birdie’s Version”) * Min threads: 5 * Max threads: 5 * Environment: development * PID: 70099 * Listening on http:\/\/127.0.0.1:3000 * Listening on http:\/\/[::1]:3000 Use Ctrl-C to stop Sass is watching for changes. Press Ctrl-C to stop.<\/p>\n
<\/code><\/pre>\n\u3042\u306a\u305f\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u306b\u306f\u3001\u30d6\u30e9\u30a6\u30b6\u30a6\u30a3\u30f3\u30c9\u30a6\u3092\u958b\u304d\u3001http:\/\/localhost:3000 \u306b\u79fb\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002Rails\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30a6\u30a7\u30eb\u30ab\u30e0\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u306f\u305a\u3067\u3059\u3002\u3053\u308c\u306f\u3001\u3042\u306a\u305f\u304cRails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u6b63\u3057\u304f\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3067\u304d\u3066\u3044\u308b\u3053\u3068\u3092\u610f\u5473\u3057\u307e\u3059\u3002<\/p>\n
![\"Screencapture](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/656460ebdaa94e2bdf7b2f3a\/43-0.png\" "\\"\\"")
<\/div>\n\u30a6\u30a7\u30d6\u30b5\u30fc\u30d0\u30fc\u3092\u505c\u6b62\u3059\u308b\u306b\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u304c\u52d5\u4f5c\u3057\u3066\u3044\u308b\u30bf\u30fc\u30df\u30ca\u30eb\u3067CTRL+C\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002Puma\u304b\u3089\u5225\u308c\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n
<\/code><\/pre>\nOutput<\/div>\n<\/code><\/pre>\n^C SIGINT received, starting shutdown – Gracefully stopping, waiting for requests to finish === puma shutdown: 2019-07-31 14:21:24 -0400 === – Goodbye! Exiting sending SIGTERM to all processes terminated by SIGINT terminated by SIGINT exited with code 0<\/p>\n
<\/code><\/pre>\n\u305d\u306e\u5f8c\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u304c\u518d\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n
\u3042\u306a\u305f\u306f\u3001\u6599\u7406\u306e\u30ec\u30b7\u30d4\u30a2\u30d7\u30ea\u306b\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3092\u6b63\u5e38\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001React\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092\u7d44\u307f\u7acb\u3066\u308b\u305f\u3081\u306b\u5fc5\u8981\u306aJavaScript\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n
\u30b9\u30c6\u30c3\u30d73\uff1a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b<\/h2>\n
\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001\u98df\u4e8b\u30ec\u30b7\u30d4\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306b\u5fc5\u8981\u306aJavaScript\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u306f\u4ee5\u4e0b\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n
- \n
- React for building user interfaces.<\/li>\n
- React DOM to enable React to interact with the browser DOM.<\/li>\n
- React Router for handling navigation in a React application.<\/li>\n<\/ul>\n
\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u3001Yarn\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u3067\u3053\u308c\u3089\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- yarn<\/span> add<\/span> react react-dom react-router-dom<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001\u6307\u5b9a\u3057\u305f\u30d1\u30c3\u30b1\u30fc\u30b8\u3092Yarn\u3092\u4f7f\u7528\u3057\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3001\u305d\u308c\u3089\u3092package.json\u30d5\u30a1\u30a4\u30eb\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u3042\u308bpackage.json\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- nano<\/span> package.json<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u305f\u30d1\u30c3\u30b1\u30fc\u30b8\u306f\u3001\u4f9d\u5b58\u95a2\u4fc2\u30ad\u30fc\u306e\u4e0b\u306b\u30ea\u30b9\u30c8\u3055\u308c\u307e\u3059\u3002<\/p>\n
\u300c~\/rails_react_recipe\/package.json\u300d\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u308b\u3068\u3001\u300c~\/rails_react_recipe\/package.json\u300d\u3068\u306a\u308a\u307e\u3059\u3002<\/div>\n{\r\n \"name\": \"app\",\r\n \"private\": \"true\",\r\n \"dependencies\": {\r\n \"@hotwired\/stimulus\": \"^3.1.0\",\r\n \"@hotwired\/turbo-rails\": \"^7.1.3\",\r\n \"@popperjs\/core\": \"^2.11.6\",\r\n \"bootstrap\": \"^5.2.1\",\r\n \"bootstrap-icons\": \"^1.9.1\",\r\n \"esbuild\": \"^0.15.7\",\r\n \"react\": \"^18.2.0\",<\/mark>\r\n \"react-dom\": \"^18.2.0\",<\/mark>\r\n \"react-router-dom\": \"^6.3.0\",<\/mark>\r\n \"sass\": \"^1.54.9\"\r\n },\r\n \"scripts\": {\r\n \"build\": \"esbuild app\/javascript\/*.* --bundle --sourcemap --outdir=app\/assets\/builds --public-path=assets\",\r\n \"build:css\": \"sass .\/app\/assets\/stylesheets\/application.bootstrap.scss:.\/app\/assets\/builds\/application.css --no-source-map --load-path=node_modules\"\r\n }\r\n}\r\n<\/code><\/pre>\nCTRL+X\u3092\u62bc\u3057\u3066\u30d5\u30a1\u30a4\u30eb\u3092\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u3042\u306a\u305f\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u4f9d\u5b58\u95a2\u4fc2\u3092\u3044\u304f\u3064\u304b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3057\u305f\u3002\u6b21\u306b\u3001\u98df\u4e8b\u30ec\u30b7\u30d4\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n
\u30b9\u30c6\u30c3\u30d74 \u2014 \u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306e\u8a2d\u5b9a<\/h2>\n
\u5fc5\u8981\u306a\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305f\u5f8c\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u521d\u3081\u3066\u8a2a\u308c\u305f\u3068\u304d\u306b\u3001\u30e9\u30f3\u30c7\u30a3\u30f3\u30b0\u30da\u30fc\u30b8\u3068\u3057\u3066\u6a5f\u80fd\u3059\u308b\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
Rails\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u5bfe\u3057\u3066Model-View-Controller\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u30d1\u30bf\u30fc\u30f3\u3092\u63a1\u7528\u3057\u3066\u3044\u307e\u3059\u3002MVC\u30d1\u30bf\u30fc\u30f3\u3067\u306f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306e\u76ee\u7684\u306f\u7279\u5b9a\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u53d7\u3051\u53d6\u308a\u3001\u9069\u5207\u306a\u30e2\u30c7\u30eb\u3084\u30d3\u30e5\u30fc\u306b\u6e21\u3059\u3053\u3068\u3067\u3059\u3002\u73fe\u5728\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u30eb\u30fc\u30c8URL\u304c\u30d6\u30e9\u30a6\u30b6\u3067\u30ed\u30fc\u30c9\u3055\u308c\u308b\u3068Rails\u306e\u30a6\u30a7\u30eb\u30ab\u30e0\u30da\u30fc\u30b8\u3092\u8868\u793a\u3057\u307e\u3059\u3002\u3053\u308c\u3092\u5909\u66f4\u3059\u308b\u305f\u3081\u306b\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306e\u305f\u3081\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3068\u30d3\u30e5\u30fc\u3092\u4f5c\u6210\u3057\u3001\u30eb\u30fc\u30c8\u306b\u30de\u30c3\u30c1\u3055\u305b\u307e\u3059\u3002<\/p>\n
Rails\u306b\u306f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u751f\u6210\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u751f\u6210\u6a5f\u80fd\u306f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u540d\u3068\u5bfe\u5fdc\u3059\u308b\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u53d7\u3051\u53d6\u308a\u307e\u3059\u3002\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001Rails\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3068\u547c\u3076\u3053\u3068\u306b\u3057\u307e\u3059\u3002\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u3001\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u6301\u3064\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- rails g controller Homepage<\/mark> index<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\nNote<\/p>\n
\u6ce8\u610f\uff1a
\nLinux\u3067\u306f\u3001\u30a8\u30e9\u30fcFATAL: Listen\u30a8\u30e9\u30fc:\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u5909\u66f4\u3092\u76e3\u8996\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u306f\u3001\u30de\u30b7\u30f3\u304c\u5909\u66f4\u3092\u76e3\u8996\u3067\u304d\u308b\u30d5\u30a1\u30a4\u30eb\u306e\u6570\u306b\u95a2\u3059\u308b\u30b7\u30b9\u30c6\u30e0\u5236\u9650\u306e\u7d50\u679c\u3067\u3042\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u4fee\u6b63\u3057\u3066\u304f\u3060\u3055\u3044\uff1a
\necho fs.inotify.max_user_watches=524288 | sudo tee -a \/etc\/sysctl.conf && sudo sysctl -p<\/div>\n\u3053\u306e\u30b3\u30de\u30f3\u30c9\u306f\u3001Listen\u3067\u76e3\u8996\u3067\u304d\u308b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u6570\u3092\u6c38\u4e45\u306b524288\u306b\u5897\u3084\u3057\u307e\u3059\u3002\u540c\u3058\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066524288\u3092\u5e0c\u671b\u306e\u6570\u5024\u306b\u7f6e\u304d\u63db\u3048\u308b\u3053\u3068\u3067\u3001\u518d\u5ea6\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<\/div>\n
\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u3001\u6b21\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n
- \n
- A homepage_controller.rb file for receiving all homepage-related requests. This file contains the index action you specified in the command.<\/li>\n
- A homepage_helper.rb file for adding helper methods related to the Homepage controller.<\/li>\n
- An index.html.erb file as the view page for rendering anything related to the homepage.<\/li>\n<\/ul>\n
Rails\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u4f5c\u6210\u3055\u308c\u308b\u65b0\u3057\u3044\u30da\u30fc\u30b8\u4ee5\u5916\u306b\u3082\u3001Rails\u306fconfig\/routes.rb\u306b\u3042\u308b\u30eb\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u7528\u306eGET\u30eb\u30fc\u30c8\u304c\u8ffd\u52a0\u3055\u308c\u3001\u3053\u308c\u3092\u30eb\u30fc\u30c8\u30eb\u30fc\u30c8\u3068\u3057\u3066\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n
Rails\u306e\u30eb\u30fc\u30c8\u30eb\u30fc\u30c8\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30eb\u30fc\u30c8URL\u3092\u8a2a\u308c\u305f\u3068\u304d\u306b\u8868\u793a\u3055\u308c\u308b\u5185\u5bb9\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u3053\u306e\u5834\u5408\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u306f\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u305f\u3044\u3067\u3059\u3002\u304a\u6c17\u306b\u5165\u308a\u306e\u30a8\u30c7\u30a3\u30bf\u3067config\/routes.rb\u306b\u3042\u308b\u30eb\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- nano<\/span> config\/routes.rb<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001’homepage\/index’\u3092’homepage#index’\u306b\u7f6e\u304d\u63db\u3048\u3066\u3001\u30d5\u30a1\u30a4\u30eb\u304c\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u4e00\u81f4\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n~\/rails_react_recipe\/config\/routes.rb\u306e\u5185\u5bb9\u3092\u65e5\u672c\u8a9e\u3067\u8868\u73fe\u3059\u308b\u3068:<\/p>\n
\u300c~\/rails_react_recipe\/config\/routes.rb\u300d\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002<\/p>\n<\/div>\n
Rails.application.routes.draw do\r\n root 'homepage#index'<\/mark>\r\n # For details on the DSL available within this file, see http:\/\/guides.rubyonrails.org\/routing.html\r\nend\r\n<\/code><\/pre>\n\u3053\u306e\u4fee\u6b63\u306f\u3001Rails\u306b\u5bfe\u3057\u3066\u30eb\u30fc\u30c8\u3078\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092Homepage\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306eindex\u30a2\u30af\u30b7\u30e7\u30f3\u306b\u30de\u30c3\u30d4\u30f3\u30b0\u3059\u308b\u3088\u3046\u6307\u793a\u3057\u3001\u305d\u306e\u7d50\u679c\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u306fapp\/views\/homepage\/index.html.erb\u306b\u3042\u308bindex.html.erb\u30d5\u30a1\u30a4\u30eb\u306e\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u308b\u3002<\/p>\n
\u3053\u306e\u52d5\u4f5c\u304c\u6b63\u5e38\u306b\u884c\u308f\u308c\u3066\u3044\u308b\u304b\u3092\u78ba\u8a8d\u3059\u308b\u305f\u3081\u306b\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u8d77\u52d5\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- bin\/dev<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u30d6\u30e9\u30a6\u30b6\u3067\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u3044\u305f\u308a\u66f4\u65b0\u3057\u305f\u308a\u3059\u308b\u5834\u5408\u3001\u65b0\u3057\u3044\u521d\u671f\u753b\u9762\u304c\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u8aad\u307f\u8fbc\u307e\u308c\u307e\u3059\u3002<\/p>\n
![\"The](\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/656460ebdaa94e2bdf7b2f3a\/80-0.webp\" "\\"\\"")
<\/div>\n\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u6b63\u5e38\u306b\u52d5\u4f5c\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u305f\u5f8c\u3001\u30b5\u30fc\u30d0\u30fc\u3092\u505c\u6b62\u3059\u308b\u305f\u3081\u306bCTRL+C\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u6b21\u306b\u3001~\/rails_react_recipe\/app\/views\/homepage\/index.html.erb \u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- nano<\/span> ~\/rails_react_recipe\/app\/views\/homepage\/index.html.erb<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u30d5\u30a1\u30a4\u30eb\u5185\u306e\u30b3\u30fc\u30c9\u3092\u524a\u9664\u3057\u3001\u7a7a\u306e\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u4fdd\u5b58\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u308c\u306b\u3088\u308a\u3001index.html.erb\u306e\u5185\u5bb9\u304c\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306eReact\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306b\u5e72\u6e09\u3057\u306a\u3044\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
\u3042\u306a\u305f\u304c\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u8a2d\u5b9a\u3057\u305f\u3089\u3001React\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3092\u69cb\u6210\u3059\u308b\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u306b\u79fb\u52d5\u3067\u304d\u307e\u3059\u3002<\/p>\n
\u30b9\u30c6\u30c3\u30d75 – \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u306eReact\u306e\u8a2d\u5b9a\u3092Rails\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u3057\u3066\u884c\u3044\u307e\u3059\u3002<\/h2>\n
\u3053\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u3001Rails\u306e\u8a2d\u5b9a\u3092\u5909\u66f4\u3057\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306bReact\u3092\u4f7f\u7528\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002\u3053\u306e\u65b0\u3057\u3044\u8a2d\u5b9a\u306b\u3088\u308a\u3001React\u3092\u4f7f\u3063\u3066\u3088\u308a\u9b45\u529b\u7684\u306a\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
Rails\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u751f\u6210\u3059\u308b\u969b\u306b\u6307\u5b9a\u3055\u308c\u305fesbuild\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u52a9\u3051\u3092\u501f\u308a\u3066\u3001JavaScript\u304cRails\u3068\u30b7\u30fc\u30e0\u30ec\u30b9\u306b\u9023\u643a\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u307b\u3068\u3093\u3069\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u304c\u3059\u3067\u306b\u5b8c\u4e86\u3057\u3066\u3044\u307e\u3059\u3002\u6b8b\u308b\u4f5c\u696d\u306f\u3001React\u30a2\u30d7\u30ea\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3092esbuild\u306eJavaScript\u30d5\u30a1\u30a4\u30eb\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u306b\u8aad\u307f\u8fbc\u3080\u3053\u3068\u3067\u3059\u3002\u3053\u308c\u3092\u884c\u3046\u305f\u3081\u306b\u3001app\/javascript\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bcomponents\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- mkdir<\/span> ~\/rails_react_recipe\/app\/javascript\/components<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306f\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3001React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5185\u306e\u4ed6\u306eReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u542b\u307e\u308c\u307e\u3059\u3002\u307e\u305f\u3001React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3078\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30d5\u30a1\u30a4\u30eb\u3082\u542b\u307e\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u6b21\u306b\u3001app\/javascript\/application.js\u3068\u3044\u3046\u5834\u6240\u306b\u3042\u308bapplication.js\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/application.js<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u30d5\u30a1\u30a4\u30eb\u306b\u30cf\u30a4\u30e9\u30a4\u30c8\u3055\u308c\u305f\u884c\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u4ee5\u4e0b\u306f\u3001\u30cd\u30a4\u30c6\u30a3\u30d6\u306a\u65e5\u672c\u8a9e\u3067\u306e\u30d1\u30e9\u30d5\u30ec\u30fc\u30ba\u4f8b\u3067\u3059\uff1a\u300c~\/rails_react_recipe\/app\/javascript\/application.js\u300d<\/div>\n\/\/ Entry point for the build script in your package.json\r\nimport \"@hotwired\/turbo-rails\"\r\nimport \".\/controllers\"\r\nimport * as bootstrap from \"bootstrap\"\r\nimport \".\/components\"<\/mark>\r\n<\/code><\/pre>\napplication.js\u30d5\u30a1\u30a4\u30eb\u306b\u8ffd\u52a0\u3055\u308c\u308b\u30b3\u30fc\u30c9\u884c\u306f\u3001entry index.jsx\u30d5\u30a1\u30a4\u30eb\u306e\u30b3\u30fc\u30c9\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001esbuild\u3067\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u305f\u3081\u306b\u5229\u7528\u53ef\u80fd\u306b\u3057\u307e\u3059\u3002Rails\u30a2\u30d7\u30ea\u306eJavaScript\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u306b\/components\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304c\u30a4\u30f3\u30dd\u30fc\u30c8\u3055\u308c\u308b\u3053\u3068\u3067\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u7528\u306eReact\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306b\u306f\u30c6\u30ad\u30b9\u30c8\u3068\u30ec\u30b7\u30d4\u3092\u3059\u3079\u3066\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u30dc\u30bf\u30f3\u304c\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n
\u4fdd\u5b58\u3057\u3066\u30d5\u30a1\u30a4\u30eb\u3092\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u305d\u308c\u3067\u306f\u3001components\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bHome.jsx\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/components\/Home.jsx<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u4ee5\u4e0b\u306e\u5185\u5bb9\u3092\u65e5\u672c\u8a9e\u3067\u8ff0\u3079\u3066\u304f\u3060\u3055\u3044\uff08\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\u4e00\u3064\u306e\u307f\u5fc5\u8981\u3067\u3059\uff09\uff1a
\n~\/rails_react_recipe\/app\/javascript\/components\/Home.jsx<\/div>\nimport React from \"react\";\r\nimport { Link } from \"react-router-dom\";\r\n\r\nexport default () => (\r\n <div className=\"vw-100 vh-100 primary-color d-flex align-items-center justify-content-center\">\r\n <div className=\"jumbotron jumbotron-fluid bg-transparent\">\r\n <div className=\"container secondary-color\">\r\n <h1 className=\"display-4\">Food Recipes<\/h1>\r\n <p className=\"lead\">\r\n A curated list of recipes for the best homemade meal and delicacies.\r\n <\/p>\r\n <hr className=\"my-4\" \/>\r\n <Link\r\n to=\"\/recipes\"\r\n className=\"btn btn-lg custom-button\"\r\n role=\"button\"\r\n >\r\n View Recipes\r\n <\/Link>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n);\r\n<\/code><\/pre>\n\u3053\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001React\u3068React Router\u304b\u3089Link\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002Link\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u30da\u30fc\u30b8\u9593\u3092\u79fb\u52d5\u3059\u308b\u305f\u3081\u306e\u30cf\u30a4\u30d1\u30fc\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u6b21\u306b\u3001Bootstrap\u306e\u30af\u30e9\u30b9\u3067\u30b9\u30bf\u30a4\u30eb\u5316\u3055\u308c\u305f\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306e\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u8a00\u8a9e\u3092\u542b\u3080\u6a5f\u80fd\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3001\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002<\/p>\n
\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u9589\u3058\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u30db\u30fc\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u8a2d\u5b9a\u3055\u308c\u305f\u3089\u3001React Router\u3092\u4f7f\u7528\u3057\u3066\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002app\/javascript\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306broutes\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- mkdir<\/span> ~\/rails_react_recipe\/app\/javascript\/routes<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306f\u3001\u3044\u304f\u3064\u304b\u306e\u30eb\u30fc\u30c8\u3068\u305d\u308c\u306b\u5bfe\u5fdc\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u542b\u307e\u308c\u307e\u3059\u3002\u6307\u5b9a\u3055\u308c\u305f\u30eb\u30fc\u30c8\u304c\u8aad\u307f\u8fbc\u307e\u308c\u308b\u305f\u3073\u306b\u3001\u5bfe\u5fdc\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u30d6\u30e9\u30a6\u30b6\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n
\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u3001index.jsx\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/routes\/index.jsx<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\n\u305d\u308c\u306b\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
~\/rails_react_recipe\/app\/javascript\/routes\/index.jsx\u3092\u65e5\u672c\u8a9e\u3067\u8868\u73fe\u3059\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/div>\nimport React from \"react\";\r\nimport { BrowserRouter as Router, Routes, Route } from \"react-router-dom\";\r\nimport Home from \"..\/components\/Home\";\r\n\r\nexport default (\r\n <Router>\r\n <Routes>\r\n <Route path=\"\/\" element={<Home \/>} \/>\r\n <\/Routes>\r\n <\/Router>\r\n);\r\n<\/code><\/pre>\n\u3053\u306eindex.jsx\u30eb\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001\u6b21\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\uff1aReact\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u306eReact\u30e2\u30b8\u30e5\u30fc\u30eb\u3001\u304a\u3088\u3073React Router\u304b\u3089\u306eBrowserRouter\u3001Routes\u3001\u304a\u3088\u3073Route\u30e2\u30b8\u30e5\u30fc\u30eb\u3002\u3053\u308c\u3089\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u306f\u5171\u306b\u30eb\u30fc\u30c8\u304b\u3089\u5225\u306e\u30eb\u30fc\u30c8\u306b\u79fb\u52d5\u3059\u308b\u306e\u306b\u5f79\u7acb\u3061\u307e\u3059\u3002\u6700\u5f8c\u306b\u3001\u30eb\u30fc\u30c8(\/)\u3068\u4e00\u81f4\u3059\u308b\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u3042\u308b\u5834\u5408\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u308bHome\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u8ffd\u52a0\u306e\u30da\u30fc\u30b8\u3092\u8ffd\u52a0\u3057\u305f\u3044\u5834\u5408\u306f\u3001\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3067\u30eb\u30fc\u30c8\u3092\u5ba3\u8a00\u3057\u3001\u305d\u306e\u30da\u30fc\u30b8\u306e\u305f\u3081\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u4e00\u81f4\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u7d42\u4e86\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
React Router\u3092\u4f7f\u7528\u3057\u3066\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002React\u304c\u5229\u7528\u53ef\u80fd\u306a\u30eb\u30fc\u30c8\u3092\u8a8d\u8b58\u3057\u3001\u305d\u308c\u3089\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3067\u30eb\u30fc\u30c8\u304c\u5229\u7528\u53ef\u80fd\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u3092\u5b9f\u73fe\u3059\u308b\u305f\u3081\u306b\u3001React\u304c\u30a8\u30f3\u30c8\u30ea\u30fc\u30d5\u30a1\u30a4\u30eb\u3067\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u30eb\u30fc\u30c8\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u307e\u3059\u3002<\/p>\n
\u300capp\/javascript\/components\u300d\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u300cApp.jsx\u300d\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/components\/App.jsx<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\nApp.jsx\u30d5\u30a1\u30a4\u30eb\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
~\/rails_react_recipe\/app\/javascript\/components\/App.jsx\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u308b\u3068\u3001\u6b21\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\uff1a
\n~\/rails_react_recipe\/app\/javascript\/components\/App.jsx<\/div>\nimport React from \"react\";\r\nimport Routes from \"..\/routes\";\r\n\r\nexport default props => <>{Routes}<\/>;\r\n<\/code><\/pre>\nApp.jsx \u30d5\u30a1\u30a4\u30eb\u3067\u306f\u3001React\u3068\u5148\u307b\u3069\u4f5c\u6210\u3057\u305f\u30eb\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\u305d\u3057\u3066\u3001\u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u5185\u3067\u30eb\u30fc\u30c8\u3092\u63cf\u753b\u3059\u308b\u305f\u3081\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3067\u63cf\u753b\u3055\u308c\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u8aad\u307f\u8fbc\u307e\u308c\u308b\u3068\u304d\u306b\u5e38\u306b\u30eb\u30fc\u30c8\u304c\u5229\u7528\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3001\u9589\u3058\u308b\u3002<\/p>\n
App.jsx\u3092\u8a2d\u5b9a\u3057\u305f\u306e\u3067\u3001\u30a8\u30f3\u30c8\u30ea\u30fc\u30d5\u30a1\u30a4\u30eb\u3067\u305d\u308c\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002components\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bindex.jsx\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n- \n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/components\/index.jsx<\/li>\n<\/ol>\n
<\/code><\/pre>\n<\/p>\n
<\/code><\/pre>\nindex.js\u30d5\u30a1\u30a4\u30eb\u306b\u3001\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\n~\/rails_react_recipe\/app\/javascript\/components\/index.jsx\u3092\u65e5\u672c\u8a9e\u3067\u8a00\u3044\u63db\u3048\u308b\u3068\u3001<\/p>\n
\u300c~\/rails_react_recipe\/app\/javascript\/components\/index.jsx\u30d5\u30a1\u30a4\u30eb\u300d<\/p>\n<\/div>\n
import React from \"react\";\r\nimport { createRoot } from \"react-dom\/client\";\r\nimport App from \".\/App\";\r\n\r\ndocument.addEventListener(\"turbo:load\", () => {\r\n const root = createRoot(\r\n document.body.appendChild(document.createElement(\"div\"))\r\n );\r\n root.render(<App \/>);\r\n});\r\n<\/code><\/pre>\nimport\u306e\u884c\u3067\u306f\u3001React\u30e9\u30a4\u30d6\u30e9\u30ea\u3068ReactDOM\u304b\u3089createRoot\u95a2\u6570\u3001\u304a\u3088\u3073App\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u307e\u3059\u3002ReactDOM\u306ecreateRoot\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u30eb\u30fc\u30c8\u8981\u7d20\u3092\u30da\u30fc\u30b8\u306b\u8ffd\u52a0\u3055\u308c\u305fdiv\u8981\u7d20\u3068\u3057\u3066\u4f5c\u6210\u3057\u3001\u305d\u306e\u4e2d\u306bApp\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u307e\u3059\u3002\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u8aad\u307f\u8fbc\u307e\u308c\u308b\u3068\u3001React\u306fApp\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5185\u5bb9\u3092\u30da\u30fc\u30b8\u4e0a\u306ediv\u8981\u7d20\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u307e\u3059\u3002<\/p>\n
\u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3057\u3066\u7d42\u4e86\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
\u6700\u5f8c\u306b\u3001\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306b\u3044\u304f\u3064\u304b\u306eCSS\u30b9\u30bf\u30a4\u30eb\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
~\/rails_react_recipe\/app\/assets\/stylesheets\/application.bootstrap.scss\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u5185\u306eapplication.bootstrap.scss\u30d5\u30a1\u30a4\u30eb\u3092\u958b\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
<\/code><\/pre>\n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/components\/index.jsx<\/li>\n<\/ol>\n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/components\/App.jsx<\/li>\n<\/ol>\n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/routes\/index.jsx<\/li>\n<\/ol>\n
- mkdir<\/span> ~\/rails_react_recipe\/app\/javascript\/routes<\/li>\n<\/ol>\n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/components\/Home.jsx<\/li>\n<\/ol>\n
- nano<\/span> ~\/rails_react_recipe\/app\/javascript\/application.js<\/li>\n<\/ol>\n
- mkdir<\/span> ~\/rails_react_recipe\/app\/javascript\/components<\/li>\n<\/ol>\n
- nano<\/span> ~\/rails_react_recipe\/app\/views\/homepage\/index.html.erb<\/li>\n<\/ol>\n
- bin\/dev<\/li>\n<\/ol>\n
- nano<\/span> config\/routes.rb<\/li>\n<\/ol>\n
- rails g controller Homepage<\/mark> index<\/li>\n<\/ol>\n
- nano<\/span> package.json<\/li>\n<\/ol>\n
- yarn<\/span> add<\/span> react react-dom react-router-dom<\/li>\n<\/ol>\n
- bin\/dev<\/li>\n<\/ol>\n
- rails db:create<\/li>\n<\/ol>\n
- ls<\/span><\/li>\n<\/ol>\n
- cd<\/span> rails_react_recipe<\/mark><\/li>\n<\/ol>\n
- rails new rails_react_recipe<\/mark> -d<\/span> postgresql -j<\/span> esbuild -c<\/span> bootstrap -T<\/span><\/li>\n<\/ol>\n
- rails -h<\/span><\/li>\n<\/ol>\n
- PostgreSQL installed, as described in Steps 1 and 2 How To Use PostgreSQL with Your Ruby on Rails Application on Ubuntu 20.04 or How To Use PostgreSQL with Your Ruby on Rails Application on macOS. To follow this tutorial, you can use PostgreSQL version 12 or higher. If you want to develop this application on a different distribution of Linux or another OS, see the official PostgreSQL downloads page. For more information on how to use PostgreSQL, see How To Install and Use PostgreSQL.<\/li>\n<\/ul>\n