JSX files in create-react-app

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?

.jsx works out of the box with create react app. Just restart the server. — Pablo Bianchi
– Pablo Bianchi, Commented Sep 5, 2021 at 2:06

Community · Accepted Answer · 2019-11-13 07:52:07Z

9

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

edited Nov 13, 2019 at 7:52

CommunityBot

11 silver badge

answered Feb 7, 2017 at 15:37

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aaron Beall Over a year ago

Won't that pattern match .js or .j? Did you mean /\.jsx?$/?

Dave Newton Over a year ago

@Aaron Hm. Yeah. In my defense I didn't write our webpack config :/

Karoh Over a year ago

@DaveNewton, so you cannot make any changes to those Webpack & Babel configs without ejecting them?

Dave Newton Over a year ago

@Horak Technically you could probably reach into node_modules and change it, but that seems like a truly bad idea.

Karoh Over a year ago

@DaveNewton, I see; so standard protocol is to just eject, eh?

Collectives™ on Stack Overflow

JSX files in create-react-app

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related