Comments (20)
The distinction between .js
and .jsx
files was useful before Babel, but it’s not that useful anymore.
There are other syntax extensions (e.g. Flow). What would you call a JS file that uses Flow? .flow.js
? What about JSX file that uses Flow? .flow.jsx
? What about some other experimental syntax? .flow.stage-1.jsx
?
Most editors are configurable so you can tell them to use a JSX-capable syntax scheme for .js
files. Since JSX (or Flow) are strict supersets of JS, I don’t see this as an issue.
Am I missing something?
from create-react-app.
Just wanted to call attention to the Airbnb style guide, they are still recommending .jsx
file extensions. Airbnb most likely have their build tools sorted though.
For vim users, while using vim-javascript & vim-jsx you can add let g:jsx_ext_required = 0
to your .vimrc
to allow for JSX syntax support in .js
files.
EDIT: i'm just now seeing the reference above from airbnb/javascript#985
from create-react-app.
which files can be shared across projects that may not be using babel
Don’t you find the notation inconsistent? For example, you can’t use many ES6 features without Babel if you intend to support older browsers. Even things like destructuring. But it’s weird to call a file using destructuring (or, for example, default arguments) .jsx
because it doesn’t actually use JSX. At some point you may decide to stop supporting those browsers. At this point there is no reasonable explanation for why such file is called .jsx
. By using .js
uniformly you avoid these inconsistencies altogether.
from create-react-app.
@gaearon do you know if there's an easy way to have a clear error message when people try to write a jsx file? Something like "jsx extension is not supported with create-react-app [insert more...]" instead of failing with a cryptic error message as it currently is
from create-react-app.
Out of google magic for this one. But why does createreactapp seem to enforce eslint:react/jsx-filename-extension if JSX files are not reco? #87 (comment)
All our files are .JS even the ones that contain JSX....we're using base createreactapp and unless I have waring IDE settings, it complaining about JSX not allowed in files with extension '.js'
from create-react-app.
Ok I finally got the point.. The way I descibed it, I'd need to make sure that my .js files are actually all written in es5. A tedious task, and a useless one for long-living codebases. (Won't be necessary in near future). Tho it is a bit different with JSX syntax, which probably won't become standard javascript anytime soon, it's much simpler if we embrace it as a transpiler-feature just like destructuring etc.
So.. I guess I too will be changing all my .jsx
files to .js
soon :)
from create-react-app.
Typescript is also a superset and it uses .ts
why JSX is not using his own extension?
from create-react-app.
Most editors are configurable so you can tell them to use a JSX-capable syntax scheme for .js files.
Ok this makes sense.
But does anyone know how to accomplish that f. ex. in VisualStudioCode?
I have found this http://stackoverflow.com/questions/32832264/change-language-to-jsx-in-visual-studio-code
from create-react-app.
I’ll close but if I missed something please let me know and I can reopen.
from create-react-app.
do you know if there's an easy way to have a clear error message when people try to write a jsx file?
Yes, we can totally do it, it’s not hard.
But does anyone know how to accomplish that f. ex. in VisualStudioCode?
Let’s discuss that in #287. 👍
from create-react-app.
Posted more thoughts on it: airbnb/javascript#985 (comment)
from create-react-app.
FYI we support JSX extension since 0.4.1 even though we don’t recommend it.
Read the release notes.
from create-react-app.
I find using a jsx extension useful, while not necessary, to instantly see which files can be shared across projects that may not be using babel or even react for that matter, without looking into the files.
I would never name a file that doesn't contain JSX syntax .jsx
, e.g. utility modules, regular pure functions etc. For the same reasons I would never call a file that contains JSX syntax .js
.
It is just a convention of course, as others may have explained already.
from create-react-app.
I just changed all my .jsx
files to .js
. I like how I'm starting to think of jsx as an extension of JavaScript rather than something separate.
from create-react-app.
I'm glad it now supports .jsx
, but it appears to still be looking for index.js
and not accepting index.jsx
. Can that be fixed too?
from create-react-app.
The only reason I use the .jsx
extension is because without it, Github's syntax highlighting get's red-lines-hightlighted-everywhere diarrhea. I can't stand looking at PR's like that.
from create-react-app.
@qodesmith a bit late, but there's an open issue for that: github-linguist/linguist#3677
from create-react-app.
After pushing some code to bitbucket and seeing that the syntax highlighting was broken, I went to see why Atlassian don't support syntax highlighting of JSX; it turns out they do! But, perhaps naturally, the file extension must be .jsx
(https://jira.atlassian.com/browse/BSERV-10700).
I was then reminded of this discussion, so wanted to chime in. I think it's totally reasonable for a syntax highlighter to not attempt to highlight syntax that isn't standard to language. It seems quite reasonable that if I want syntax to be highlighted as JSX, then the file should have the extension .jsx
.
Thinking about it in this way actually makes me think having jsx syntax inside a .js
file is unreasonable.
from create-react-app.
TypeScript uses TSX - but personally I feel that enforcing JSX creates more overhead for developers. Most tools in the chain work fine with JSX in JS.
Of course, that doesn't mean you couldn't enforce that standard in your own projects @esr360.
from create-react-app.
For future searchers: we support both .js
and .jsx
.
from create-react-app.
Related Issues (20)
- npm error code E404 npm error 404 Not Found - GET https://registry.npmjs.org/creat-react-app - Not found npm error 404 npm error 404 'creat-react-app@*' is not in this registry. npm error 404 npm error 404 Note that you can also install from a npm error 404 tarball, folder, http url, or git url.
- cannot build projects when cwd contains a pathname with ! HOT 1
- Npx create-react-app: 8 vulnerabilities (2 moderate, 6 high) HOT 8
- Create react app HOT 1
- login issue
- my sign in not working
- HMR not working
- [email protected]
- "npx create-react-app" doesn't generate src or public folders HOT 1
- Usage override/workaround/hack with ESLint 9
- Frontend Host doesn't match the current host in the browser, so it's probably incorrect. Links in emails and file downloads from the API will not work. Click here to update. HOT 1
- [https://newsroom.spotify.com/news/](https://deezer.page.link/fCBsxrTRUZvKbLkA8) HOT 3
- react-scripts/v/5.1.0-next.14 contains multiple security vulnerabilities for inner modules
- Issue in creating react app HOT 4
- cra打包路由切换FiberRootNode会新增,webpack打包就不会 HOT 1
- Error -4048 and Error -4058 and ENOENT, HOT 1
- Des erreurs apres installation de mui sur un projet React 18.0.0 ou supérieur HOT 1
- del proyecto
- how i can run react program in vs code HOT 4
- React JS HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-react-app.