New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`.jsx` extension cannot be used with React Native #982

Open
jgkim opened this Issue Aug 2, 2016 · 11 comments

Comments

Projects
None yet
9 participants
@jgkim

jgkim commented Aug 2, 2016

Since .jsx extension cannot be used with React Native (Cf. facebook/react-native#5233), if someone wants to use this config with React Native, the rule react/jsx-filename-extension should be set to .js only instead of .jsx only.

@ryankask

This comment has been minimized.

Show comment
Hide comment
@ryankask

ryankask Aug 2, 2016

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

ryankask commented Aug 2, 2016

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

@ljharb

This comment has been minimized.

Show comment
Hide comment
@ljharb

ljharb Aug 2, 2016

Member

A note would be great, thanks!

Member

ljharb commented Aug 2, 2016

A note would be great, thanks!

@borisyankov

This comment has been minimized.

Show comment
Hide comment
@borisyankov

borisyankov Aug 2, 2016

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.

borisyankov commented Aug 2, 2016

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.

@ljharb

This comment has been minimized.

Show comment
Hide comment
@ljharb

ljharb Aug 2, 2016

Member

@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.

Member

ljharb commented Aug 2, 2016

@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.

@vzhen

This comment has been minimized.

Show comment
Hide comment
@vzhen

vzhen Oct 12, 2016

So how?
Anywhere to disable react native .js jsx error?

vzhen commented Oct 12, 2016

So how?
Anywhere to disable react native .js jsx error?

@ljharb

This comment has been minimized.

Show comment
Hide comment
@ljharb

ljharb Oct 12, 2016

Member

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

Member

ljharb commented Oct 12, 2016

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

@julesmoretti

This comment has been minimized.

Show comment
Hide comment
@julesmoretti

julesmoretti Dec 6, 2016

@ljharb - Thank you for this, but where should this be inputed? thank you

julesmoretti commented Dec 6, 2016

@ljharb - Thank you for this, but where should this be inputed? thank you

@ljharb

This comment has been minimized.

Show comment
Hide comment
@ljharb

ljharb Dec 7, 2016

Member

@julesmoretti in your .eslintrc file, in the "rules" section. http://eslint.org has all the documentation for eslint.

Member

ljharb commented Dec 7, 2016

@julesmoretti in your .eslintrc file, in the "rules" section. http://eslint.org has all the documentation for eslint.

@sotayamashita

This comment has been minimized.

Show comment
Hide comment
@sotayamashita

sotayamashita Dec 21, 2016

Contributor

@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"] }]
+    }
}
Contributor

sotayamashita commented Dec 21, 2016

@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"] }]
+    }
}
@yordis

This comment has been minimized.

Show comment
Hide comment
@yordis

yordis Jan 31, 2018

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.

yordis commented Jan 31, 2018

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.

@tjbenton

This comment has been minimized.

Show comment
Hide comment
@tjbenton

tjbenton Apr 17, 2018

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

tjbenton commented Apr 17, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment