Andrei Tarutin Andrei Tarutin - 1 year ago 146
React JSX Question

JSX files in create-react-app

Just wondering how create-react-app uses .js files instead of .jsx for jsx markup. Is it because of the special webpack configuration?
Btw, where can I find the webpack and babel configuration of my project created with create-react-app?

Answer Source

There's nothing special about the file extensions; it's just a matter of what's being run through Babel. For example:

  module: {
    loaders: [
      {
        test:    /\.js?$/,
        exclude: /(node_modules)/,
        loader:  'babel',
        query:   {
          presets: [
            'react',
            'es2015',
            'stage-0'
          ],
          plugins: [
            ["transform-decorators-legacy"],
          ]
        },
      }

That'll run both JS and JSX (and JS?) through Babel with the React presets.

The Webpack and Babel configs are inside create-react-app.

You can eject them via:

npm run eject to get them "externalized", but only do it if you really want to.

https://github.com/facebookincubator/create-react-app#user-content-converting-to-a-custom-setup

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download