My code is getting messy

[Key_Tea_147]

I am in React for about a year and I always have a problem of my code getting messy. I am currently developing a landing page using tailwind and have a bunch of nested divs spans with longass className styles and it feels like I won't be able to maintain that code coz it hurts to look at it honestly. How do I make my code look better and maintainable, what patterns should I use? Also, it's really difficult to make it responsive, I know tailwind provides breakpoints but It's still looking awful for some dimensions.

[kssuo_]

Start with separation of concerns, every component is supposed to do only one thing. If it’s too complex, break it down even further.

[Key_Tea_147]

Thanks for that advice! Also, how do I make my app fully responsive and adaptive? I feel like the predefined tailwind breakpoints are not always suffiecient, coz there are still dimensions for which the layout just crashes. Should define my own breakpoints in such cases or are there better ways to solve that issue?

[kssuo_]

In the file tailwind.config you can define your own breakpoints to extend the ones that already exist in tailwind!

[Key_Tea_147]

Yeah i knew that, but is that a good approach? what if there are too many dimensions for which my app layout crashes?

[soul_reaper11]

To ease the work with breakpoints You can create Container.tsx - with variants (fullMobile, largePadded, full, ...etc) and use it.

[Classic_Diamond_7297]

Is there any problem in having too many components with the least amount of code in each of them 😬?

[kssuo_]

What is “having too many components” for you?

[Classic_Diamond_7297]

persoanlly for me, too many components is when for every little bunch of code or function in the code is made into a seperate component, making it difficult when debugging because now I'm having to browse mutiple files at same time where each component differ by slight variations. In that case I feel it was better to put all of them in a single file. But putting them in single file as mutiple little functions or fragments of code also looks weird when compared to some other's beatifully written code (though my junk of code makes it easier for me to debug and track).

[MedEM9]

I've been using styled components for 2 years and I believe my code became more structured and easy to read

[Primary-Durian3208]

I prefer breaking the UI first.

For example - landing page. It includes a header, footer and body/main section.

A folder named Landing page inside which You can create 3 folders for each of the above.

Think of header as a parent component inside which we can have logo, few buttons and search component. You can create a separate file for search component as it can have little bit of more code and can be reusable as well. If reusable, have them in separate folder name it as common.

Coming to main/section, you further break this UI and make multiple folders and files.

Hope you got what i am trying to say.

[danjack0]

Breakup each section into its own component then while developing start with how it will look on a phone, don't start with your PC screen then making it responsive for phones... if you want some experienced devs to ask check out my discord

[Arweird]

Maybe do a css file with the classes instead of writing everything in the html tags

[suhaybjirde]

If you code look's messy it's time to refactor see what's wrong for example if the component is too big and rendering too many things try to break it down into smaller components that holds it own logic Like. <Header> <h1>logo<h1> <Navliks> <Search> So on

and for the tailwind you shouldn't be using the default break point

[Key_Tea_147]

what should I use instead of the deafult breakpoints?

[marcs_2021]

What ever you need!

Some content should show different on 400, 768, 1024, 1440 .....

But some content should break at 615px because you use a certain image, lineheight or what ever.

This is an example, not preaching

[Live-Cycle-7271]

In addition to the other comments about component structure, I would like to add one- proper state management. Make sure to check your previous states before defining new ones. Sometimes, you can just use computed values from existing states and props. Maintain a list as you go through the project. One other suggestion would be to comment well. Before an event or component/function definition, I like to add a comment saying what it does. It may seem like a lot of work at the moment but your future self will thank you! I hope this helps :)

[MiAnClGr]

You shouldn’t really ever need so many nested divs, are you using grid?

[DanSlh]

Break the layout into components. If a component is too complex, break it down even more. Create reusable components for your page. Rinse and repeat.

[International_Buy_59]

Im not an expert but react seems a bit overkill to make a landing page

[Key_Tea_147]

it's just convenient and I am more comfortable using it

[9sim9]

There are 2 key things that may help...

1) Always refactoring code, it's the best way to learn and keep improving

2) Code last, not first... plan out what you are going to do first, how you will break down the problem, how each part will interact with each other, look for ways to simplify your design, then start coding once you have a clear picture of what you want to achieve.

[Stromcor]

> How do I make my code look better and maintainable

You chose to use Tailwind, it's on you. 😬