Giter Site home page Giter Site logo

Comments (8)

zavelevsky avatar zavelevsky commented on March 29, 2024

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.

mxstbr avatar mxstbr commented on March 29, 2024

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.

zavelevsky avatar zavelevsky commented on March 29, 2024

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.

philihp avatar philihp commented on March 29, 2024

I'm a fan of SomeComponent.jsx. I've found that importing them is easier, as mentioned in #27 (comment)

from react-boilerplate.

mateodelnorte avatar mateodelnorte commented on March 29, 2024

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.

mxstbr avatar mxstbr commented on March 29, 2024
  • 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.

jwinn avatar jwinn commented on March 29, 2024

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.

lock avatar lock commented on March 29, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.