How to install react 18 in a Ruby on Rails 6 application
Problem
How to install react 18 in a Ruby on Rails 6 application
Current Env
This is my current environment
Rails 6.0.6.1
ruby 2.7.2p137
Deepin OS 20.7.1
webpacker: ^5.4.4
In case you want to double-check yours, try the following commands
rails -v
ruby -v
lsb_release -a
cat package.json | grep webpacker
Install react
bin/rails webpacker:install:react
The command webpacker:install:react is a Rails command that is used to install and configure the React framework with Webpacker in a Rails application.
By running webpacker:install:react, you can set up the necessary dependencies, configurations, and boilerplate files to start using React in your Rails application with Webpacker.
It simplifies the process of integrating React into the asset pipeline and provides a foundation for building React components within your Rails application.
Include React
In order to check the installation, choose one view file and add the following command in one place that you know how to locate it.
<%= javascript_pack_tag("hello_react") %>
The command <%= javascript_pack_tag("hello_react") %> is an ERB (Embedded Ruby) code snippet used to include the JavaScript pack generated by Webpacker in the rendered HTML page.
The argumentjavascript_pack_tag: is a Rails helper method provided by Webpacker. It generates the appropriate HTML <script> tag to include the JavaScript pack in the rendered page.
The argument "hello_react" specifies the name of the JavaScript pack file to be included.
When the view template is rendered and the <%= javascript_pack_tag("hello_react") %> code is executed, it generates an HTML <script> tag with the appropriate src attribute that points to the generated JavaScript pack file. This tag is then included in the rendered HTML page.
By including the JavaScript pack file, the browser can fetch and execute the bundled JavaScript code associated with the specified pack file. In the case of React, this pack file typically contains the code for initializing and rendering React components on the page.
When running your rails app, you should be able to see the following message:
Check version
cat package.json | grep react
The cat command is used to concatenate and display the contents of a file. In this case, it displays the contents of the package.json file in the terminal.
The grep command is used to search for a specified pattern in the given input. In this case, it searches for the word "react" in the output of cat package.json.
So, when you run cat package.json | grep react, the cat command displays the content of the package.json file, and the grep command filters that output to only show lines that contain the word "react".
The output will display any lines from the package.json file that include the word "react", such as dependencies or configuration related to React.
YOu should see something like this as a result
Celebrate
Let's become business friends
Final thoughts
I hope this article helped you. Let me know if you need help.
Your thoughts, suggestions and corrections are more than welcome.
By the way, feel free to drop your suggestions on new blog articles.
Hope to see you next time.