javascript: `.jsx` extension cannot be used with React Native

@borisyankov “what’s common” isn’t the primary motivator for this guide, it’s “what we use at Airbnb”. We believe that .js files should only ever contain actual, standard JavaScript, and JSX is decidedly not that.

"react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]

@julesmoretti

{
    "extends": "airbnb",

+    "rules": {
+      // `.jsx` extension cannot be used with React Native
+      // https://github.com/airbnb/javascript/issues/982
+      "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]
+    }
}

@stonecold123 @youngjuning try this :

module.exports = {
  resolver: {
    sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx']
  }
};

Apart from React Native, it is very common to use .js extensions for files that include JSX. Having this as a default doesn’t make sense.

Update: This only works in react-native 57, use the solutions below for later versions

Just so everyone one knows it is possible to use JSX files with react native. Inside of the root of your project add a file named rn-cli.config.js and place the following code into it.

// ./rn-cli.config.js
module.exports = {
  /// @name Make ReactNative Great Again
  /// @description Allows you to enable support for JSX files, and `.mjs` files which is the new node standard
  /// @source http://www.fallingcanbedeadly.com/posts/enabling-react-native-jsx-extension
  /// @note One caveat, The `index.js` file in the root of your project has to be `.js`. 
  getSourceExts: () => [ 'jsx', 'mjs', 'js' ],
}

facebook/react-native#5233

Found an answer to React Native 0.59. Move resolver: {...} and other configs from rn-cli.config.js to metro.config.js.

Everyone that is giving 👎 to @ljharb you clearly do not understand that this is a React Native issue.

As he explains, this is the guideline for AirBnB, not the guide line of Javascript community or React ecosystem and they have a really good argument on why this should be like this,

Just let me give you one,

Go to your code and tell me how many files depends of React components right now 😉 I am pretty much that with .jsx it wouldn’t take you that long.

Why would you care,

Well, go to your code and tell me what could be a potential code that could be shared cross any Javascript environment (NodeJS and Browsers) I am pretty much that it is not the React one, it isn’t it?!

I hope you get where I am heading.

Despite that, React creator invented .jsx extension and was only used when you used JSX syntax. It is a bit hypocritical that Metro bundler (used on React Native) do not include the extension by default and use the argument of .jsx is not a real extension or whichever one they could come out with, they invented the extension.

So, I do not see any issue related to the code style unless AirBnB decide to think otherwise.

I’ve disabled this rule because as you said, it doesn’t make sense in the context of an RN app.

It might help to add a note in the docs: https://github.com/airbnb/javascript/tree/master/react#naming

Found an answer to React Native 0.59. Move resolver: {...} and other configs from rn-cli.config.js to metro.config.js.

You saved me several hours of pulling my hair out from trying to figure out why the old solutions were not working, thanks!