{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html","result":{"data":{"markdownRemark":{"html":"

Today we’re releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: react-rails.

\n

This gem has 2 primary purposes:

\n
    \n
  1. To package react.js in a way that’s easy to use and easy to update.
    2. \n
  2. To allow you to write JSX without an external build step to transform that into JS.
    3. \n
\n

Packaging react.js

\n

To make react.js available for use client-side, simply add react to your manifest, and declare the variant you’d like to use in your environment. When you use :production, the minified and optimized react.min.js will be used instead of the development version. For example:

\n
# config/environments/development.rb\n\nMyApp::Application.configure do\n  config.react.variant = :development\n  # use :production in production.rb\nend
\n
// app/assets/javascript/application.js\n\n//= require react
\n

Writing JSX

\n

When you name your file with myfile.js.jsx, react-rails will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.

\n
/** @jsx React.DOM */\nReact.renderComponent(<MyComponent/>, document.getElementById('example'))
\n

Asset Pipeline

\n

react-rails takes advantage of the asset pipeline that was introduced in Rails 3.1. A very important part of that pipeline is the assets:precompile Rake task. react-rails will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.

\n

Installation

\n

Installation follows the same process you’re familiar with. You can install it globally with gem install react-rails, though we suggest you add the dependency to your Gemfile directly.

","excerpt":"Today we’re releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: react-rails. This gem has 2 primary purposes: To package in a way that’s easy to use and easy to update. To allow you to write JSX without an external build step to transform that into JS. Packaging react.js To make available for use client-side, simply add to your manifest, and declare the variant you’d like to use in your environment. When you use , the minified and optimized will be used…","frontmatter":{"title":"Use React and JSX in Ruby on Rails","next":null,"prev":null,"author":[{"frontmatter":{"name":"Paul O’Shannessy","url":"https://twitter.com/zpao"}}]},"fields":{"date":"July 30, 2013","path":"content/blog/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md","slug":"/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html"}},"staticQueryHashes":[]}