React-rails component generator using es6 class results in .jsx extension

Question

When generating components using react-rails, my es6 class components are created with a .jsx extension? Why is that? Example rails generate react:component TestComponent --es6 results in a test_component.es6.jsx file instead of test_component.es6

Answer 1

Because before the Javascript can be converted from ES6 to ES5, it has to be converted from JSX into ES6 (removing all HTML tags from your React components).

You can read more about JSX here

Answer 2

JSX is just an extension to javascript adding some syntax differences. It uses and XML-like structure. Instead of typing:

React.DOM.div(..)

You can just type:

<div>

The JSX added to the end is just to tell the asset pipeline that there is existing JSX used in their and to transpile it to Javascript.