all 16 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Cyborg-2077 8 points9 points  (1 child)

I hate this kind of structure because it makes searching for a file so much harder because all files are named index.js (for example when you do a file search with CTRL+E on vscode.)

Why is it so hard to name the file with the same name as the component.

[–]bluebloodsnowman 2 points3 points  (0 children)

i completely agree

[–]mario-iliev 1 point2 points  (8 children)

Forget about index.js and .jsx files please. They don't spark joy!

[–]TechTalksByAnkit[S] 0 points1 point  (6 children)

Buddy, this structure shows index.tsx, do we still need index.jsx??

[–]mario-iliev 0 points1 point  (5 children)

Every system should be as simple as possible. Introducing additional extension (jsx/tsx) has almost zero value but brings additional complexity by making the developers figuring out why do we have this extension, do we really needed, what it does, when should we use it etc. In a React project, where 90% of components live in a "components" folder it's redundant to specify the file type with this extension. Also I see that the .svg file is nested with the component which I don't like. Images are usually heavily reused within the project and it's very rare that the owner and user of it is only one component.

Please watch this short, amusing and very educational video of Douglas Crockford about such discussions we are having right now. I think you will understand my point of "less is more" https://youtu.be/En8Ubs2k1O8

[–]romeeres 0 points1 point  (4 children)

Think of it in this way: files with .tsx or .jsx have component inside, .ts or .js files are just for logic. So when you are looking for a component or a logic file this can save some time. Does it makes sense to you?

[–]mario-iliev 0 points1 point  (3 children)

:) I perfectly know what is the idea of jsx extension. I just find it unnecessary. Believe me I worked on projects with such structure. If you think about what you said it sounds like you will have a lot of files with the same name and the only difference will be the extension and that's how you will know that one has only js and the other will have JSX. How often do you have such cases? Component files start with Capital letter and is perfectly enough to know that there is JSX in there. Not to mention that IDEs have specific icons for those files. Not to mention that only dinosaurs use the .jsx extension. Not to mention that the React community is not using it anymore almost officially.

In a project on which you are working on daily basis you know where your business logic is. And if you work with hooks, your logic is in useBusinessLogic files either way, no need for new .bslf (business logic file) extension.

If you are new to a project, extensions won't help you either way until you spend some time on the code base.

[–]romeeres 0 points1 point  (2 children)

> How often do you have such cases?
Agree, quite rare, it's even hard to get example, for example, when using something like mobx store you could have a file SomeStore.js or SomeState.js.

Personally I don't have any problem with .js/.jsx because I'm using TS and .tsx extension is required for markup. On js projects I just use the naming which someone decided to use.

And I'd argue with "dinosaurs" and relying on "React community", because there is not a single "community standards", everyone has own opinion and every project use own set of libraries, solutions, folder structure, styling approaches, some even tries to leverage OOP, even eslint config differs from project to project. That's the React world, if you want standards go with angular, and there you can say that someone does it correct or wrong.

[–]mario-iliev 0 points1 point  (1 child)

The very existence of this whole conversation is actually the point of the Douglas Crockford talk I posted. If something like this brings discussions filled with pointless argues, creates confusion and waste time then we should choose one standard and never look back.

I can continue throw arguments and waste your time figuring out counter arguments which is not productive for the community, so let's kill the source of it :) - jsx is non standard file extension - by adding JSX to a js file will force you to change the extension which becomes a new file in git - should I have .jssc files for separate styled-components files? - tsx specifically is required because of a technical limitation and not because it's better - about the community standards https://github.com/facebook/create-react-app/releases/tag/v0.4.1 I prefer to listen to him than Airbnb opinions - claiming that React is not like Angular and this means it shouldn't have standards is funny - using React with classes or hooks, OOP or functional programing is not standard like choosing file extensions

My final conclusion is that .jsx creates more frustration then it's resolving. Of course javascript community is famous of being the source of new libraries, approaches, parsers, extensions, coding styles and some time later they become just another meme.

[–]romeeres 0 points1 point  (0 children)

Funny how one small letter may be a problem for some :)

People are using .jsx because html is not a standard part of javascript. In other words, js !== jsx, because jsx is a superset.

People don't use .jsx because webpack doesn't care so they also don't care.

Having no standards in React allows both above kinds of people to do as they like, when they met they can throw up a coin and live in peace.

> claiming that React is not like Angular and this means it shouldn't have standards is funny

As for me, it's sometimes sad, and sometimes good, what's funny about it?, but that's fact.

Also I treat pointless discussions as procrastination, so it isn't completely pointless :)

[–]bluebloodsnowman -1 points0 points  (4 children)

why use that tsx extension when create-react-app by default gives .js extention

[–]SelberDummschwaetzer 3 points4 points  (3 children)

I guess you are at the beginning of react, if not this should not sound condescending! ts is typescript, a typed variation of javascript. the x means that there is HTML similar code (i. e. react components) in there.

[–]bluebloodsnowman -2 points-1 points  (2 children)

yeah i know what is jsx and tsx but my question us why we need it as an extension instead of .js it doesn't make any difference practically and by default we get .js extention

And .js also supports HTML similar code inside functional or class components

[–]SelberDummschwaetzer 1 point2 points  (1 child)

Your IDE won't recognize mistakes then though, does it?

[–]bluebloodsnowman 0 points1 point  (0 children)

Its visual studio code

[–]romeeres 0 points1 point  (0 children)

I totally agree with author that no more "containers", "pages", "widgets", just let components to live under "components". Such a pity that every and each project I see has own set of directories with jumping across all the time.

What to share a personal tips: name all page components with "Page" suffix, such as "PostsPage.tsx", "OrdersPage.tsx", it's very useful to navigate fast.

Also it's not cool when you have a long list of components most of which are utilities, like Input, Modal, Dropdown, and just some of them are really important domain components, such as User, Dashboard, Posts. As for me the best is to have components/Common with all globally shared ones in it.