Comments (8)
Although not everyone might want to use JSX - it makes a good distinction. And as it is - you have a webpack-based project - so no harm in letting people know JSX is a supported option.
In any case - I don't see any need to add .react
to the file name - it's under the /react/components folder as it is (or as it should be IMO). So the way I see it it should wither be .jsx
or simple .js
.
I'm in favor of .jsx
in my projects - because I use JSX and:
- it clearly states the usage of jsx
- it allows for easier definition of templates in IDEs
- it allows for specific rules in webpack (less strong argument)
- easier to filter search results in larger projects.
from react-boilerplate.
While I tend to agree, @steida made some good points in este/este#125 about using .react.js
. I'll quote him here:
Non elegant .react extension is pretty elegant once you have naming clash between user.react.js and user.js (Record or class). It's also idiomatic Facebook style - https://github.com/facebook/flux/blob/master/examples/flux-chat/js/components/MessageListItem.react.js User should know what is part of view without seeing file source, and custom dirs will not help. .react.is is the most pragmatic.
And on why no .jsx
:
No, because then you have to set up two file extensions. Also, xyz.react.js is very convenient for fuzy file search. Typing "home.r" is faster then typing "home.jsx".
I'll have to think about this a bit more, I'm not convinced switching to .jsx
is the right thing to do.
from react-boilerplate.
Actually I didn't find his arguments very convincing - but I tend to agree because it seems that it's a common practice - so no real reason to go against it here.
Windows users might be pissed because of long path names 😃
from react-boilerplate.
I'm a fan of SomeComponent.jsx
. I've found that importing them is easier, as mentioned in #27 (comment)
from react-boilerplate.
Not using the .jsx extension breaks most IDE's syntax highlighting - you won't get jsx highlighting in Sublime or vim unless you manually change the syntax highlighter - which is a PITA. That alone makes me not want to use this boilerplate.
from react-boilerplate.
-
Sublime Text: Install
babel-sublime
and set it as your default syntax highlighter for all.js
files. Not only do you get correct JSX syntax highlighting, you also get all ES6,7,… features correctly syntax highlighted for free! -
Atom: Install
language-babel
and set it as your default syntax highlighter for all.js
files. Same benefits as above!I'm not a Vim user, so I can't help you there, but I'm sure such a package exists for Vim too! 👍
from react-boilerplate.
Just wanted to add how to get syntax in vim for JSX: vim-jsx
For JSX support in all .js files, add the following to your vimrc
file:
let g:jsx_ext_required = 0
from react-boilerplate.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from react-boilerplate.
Related Issues (20)
- Redux Saga API is being called twice yet the action is dispatched only once HOT 1
- npm setup failed: `Error: could not resolve` HOT 4
- The DLL files are missing. Sit back while we build them for you with "npm run build-dll" HOT 1
- not working on macbook
- Include relative static files from index.html HOT 3
- Migration from old boiler plate to CRA base boiler plate
- updating node 12 to node 16 HOT 1
- micro frontend structer HOT 1
- upgrade package and project HOT 1
- ngrok - platform darwinarm64 is not supported HOT 3
- caniuse-lite is outdated HOT 1
- Not able setup react boilerplate on Windows 10 Home Single Language
- Existence of security vulnerabilities
- opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error'
- Actions calling in different containers HOT 1
- Install New Project
- your website is down
- upgrade the project from react-boilerplate to cra-react-boilerplate
- migrating to react-router-dom v6 HOT 1
- How to migrate from react-boilerplate to react CRA? HOT 1
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 react-boilerplate.