create-react-app 中的 JSX 文件

Question

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 1

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:    /\.jsx?$/, 
        exclude: /(node_modules)/,
        loader:  'babel',
        query:   {
          presets: [
            'react',
            'es2015',
            'stage-0'
          ],
          plugins: [
            ["transform-decorators-legacy"],
          ]
        },
      }

This runs.js and.jsx 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