DEV Community

Cover image for React Project Architecture

React Project Architecture

Ezran Bayantemur on October 04, 2021

I’ve been developing applications with React for a long time and I’m loving it more and more. React is such an amazing library for creating applica...
Collapse
 
jonrandy profile image
Jon Randy 🎖️

Lucky you, I'm hating it more by the day 🤮

Collapse
 
spock123 profile image
Lars Rye Jeppesen

It's so messy, it feels old

Collapse
 
dhruvindev profile image
Dhruvin

Wait until you try angular

Thread Thread
 
cgatian profile image
Chaz Gatian

You litterally need to pull in so many libraries in order to get a React app off the ground.... Axios, Formik, Yup, a CSS modules lib just to name a few! I wouldn't recommend React for anyone building an app with more than 10 people. Once you go beyond that 10, everyone's opinions start entering into the codebase and you get a hodgepodge of component patterns just littered everywhere.

Thread Thread
 
cgatian profile image
Chaz Gatian

The funny thing is, a lot of the suggestions made in the OP are things Angular has been doing since day one. In fact, I think React needs to adopt even more of the patterns. For example, lets talk naming conventions. Making a component with /MyWidget/index.tsx is undesirable, make it components/my-widget.component.tsx. Also, stop placing hooks in a generic hooks.ts, use my-widget.hooks.ts.

Thread Thread
 
kachidk profile image
Nwanguma Victor • Edited

You don't need formik or yup, to start a react app, for you to talk about axios like that means you don't fully understand what axios does (Axios is a promise based HTTP client for the browser and Node.js. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations. It can be used in plain JavaScript or with a library such as Vue or React.).

The only thing important to start a react app with, is a styling library (css modules, styled components, emotion and styled jsx) which is not so complusory and a routing library (react-router).

If your code base is littered because of different people's opinions it's not because of the flexibility of React (which I enjoy).

It's because you have not established rules in your team guiding how the codebase should be

Collapse
 
dhruvindev profile image
Dhruvin

Why hate?

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Principally - JSX... It's a total abomination. Like being back in the bad old days of PHP all over again

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

Also, the hooks stuff... feels like an ugly hack to patch over bad design

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

I've used Vue and RiotJS also - and they're soooo much nicer to work with - totally intuitive, especially RiotJS which just feels like a natural extension to vanilla HTML/JS

Thread Thread
 
spock123 profile image
Lars Rye Jeppesen

Agree.. Angular (modern) is also amazing.
Built in native support for Observables and Typescript is just amazing.

Thread Thread
 
dhruvindev profile image
Dhruvin

Agreed jsx does feel like php, but it is so quick to prototype and provides so much better project structure as compared to angular where you need to create html + js + cs, uuh so many files to work with.
I have no experience with vuejs, would to recommend to learn it ?

Thread Thread
 
dhruvindev profile image
Dhruvin

ps, by project structure I mean the flexibility to add anything anywhere, there are no strict rules to follow.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Yes, and people frequently do follow no rules... leading to the kind of trash I used to see in PHP that I hoped I'd never see again

Thread Thread
 
dhruvindev profile image
Dhruvin

Great for freelancing, nightmare for bigger companies

Thread Thread
 
cgatian profile image
Chaz Gatian

@dhruvindsddev In Angular you can have your HTML+TS+CSS all in one file. :)
When I open a React component I typically see 100+ lines of just hooks and startup code before getting to something interesting. When you finally make your way to the return sending back some JSX, the block is littered with different styles and opinions on how to structure, which makes it difficult to parse if it's not the style you're used to.

Thread Thread
 
jonrandy profile image
Jon Randy 🎖️

The same with RiotJS - out of the box

Collapse
 
ezranbayantemur profile image
Ezran Bayantemur

And it's updated!

Collapse
 
wagnerjw profile image
Julian W. Wagner

I just read your article on medium the other day, glad you're posting it on here too! Thanks for sharing, as a beginner/intermediate dev this helped me immensely

Collapse
 
ezranbayantemur profile image
Ezran Bayantemur

Thank you so much 🙏🏻

Collapse
 
ezranbayantemur profile image
Ezran Bayantemur

Sorry for the mistake, it's my first blog content on here and updating the content right now ✌️

Collapse
 
akhilgautam profile image
Akhil

Where is the content? You should not drive audience to a different site.

Collapse
 
ezranbayantemur profile image
Ezran Bayantemur

Sorry for the mistake, it's my first blog post and I didn't knew the rules. I updated to post right now

Collapse
 
akhilgautam profile image
Akhil

Thanks for the response. 👍

Collapse
 
guledali profile image
guledali • Edited

What I found so appealing about react.js is everyone uses it and yet everyone uses it so differently and this can almost be meme in itself

Collapse
 
spock123 profile image
Lars Rye Jeppesen

It's like Macdonalds.. it's horrible food but very popular.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Frighteningly, the 'everybody else uses it' line always seems to be the main justification to adopt it. Sadly, most tech decisions in companies boil down to business decisions

Collapse
 
guledali profile image
guledali

Damn🤣 🤣

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Have you ever worked with other more modern frameworks? Let me tell you, in my opinion, React is by far the messiest of them all with regards to file/project structure.

Collapse
 
ezranbayantemur profile image
Ezran Bayantemur

Why do you think like that? I also worked with Vue and Angular but I liked React much more maintainable. We can manage our projects much more easy with it.

Collapse
 
dhruvindev profile image
Dhruvin

Yup same here, I really like working with react.

Collapse
 
kachidk profile image
Nwanguma Victor

That is your opinion, but there is no specific way to structure a project in any library or framework, even in php. Pick what's suits your team or you

Collapse
 
kachidk profile image
Nwanguma Victor

The funny thing is that people are complaining that "react is this react is that" if your code base is littered because of different people's opinions it's not because of the flexibility of React (which I enjoy).

It's because you have not established rules in your team guiding how the codebase should be

Collapse
 
sargalias profile image
Spyros Argalias

Great post, thanks

Collapse
 
mihailgaberov profile image
Mihail Gaberov

Hey Ezran, could this be a typo? "...light some blub on mind :)"

Collapse
 
jenueldev profile image
Jenuel Oras Ganawed

After reading, its similar with vue, but for me vue is better. that is my opinion.

Collapse
 
gummy47 profile image
Gummy

Where is your store?

Collapse
 
ezranbayantemur profile image
Ezran Bayantemur

Sorry Gummy, I update it ✌🏻

Collapse
 
cgatian profile image
Chaz Gatian • Edited

Good post. Thank you for sharing.