Daksh Kulshrestha Thank you. The code for the app is Open Source . The logic for downloading is present here .

Savio Martin Thank you.

Dinys Monvoisin I use Screenshot Mockup for these things. This is an Open Source application which I had built a few months ago. The code is available on Github .

Here's a few things that I'd do: Take five pages from your current website and note the total size of all the styles. Now, develop those pages using TailwindCSS and measure the difference. There is a very good chance that the total size of all the styles would be much lesser. You might need to configure TailwindCSS to include only the styles that you need. If you're already using React or any component-based system (library or framework) for your website, you can develop a few components using TailwindCSS. You can measure the amount the duplicate styles that would be removed due to the utility classes that TailwindCSS provides. Also, if you can measure the time needed to develop a few components, you'd notice that the time necessary to develop components will be much lesser since you don't have to write any custom CSS.

There is no problem with it . If you feel that you're writing too much HTML in a single file, consider splitting that bigger file into multiple smaller components. You can also consider the fact that you might be able to re-use some of these smaller components in some other components as well. Generally, the best way to do this would be to create a folder called ComponentA . Consider splitting the big index.js file inside it into multiple smaller components like dropdown.js , input.js , etc. You can put all these components inside the same folder (ComponentA) or you can put these smaller components in a separate folder so that you can re-use them in some other components. The other option through while you can reduce the amount of HTML that you're writing in a single file is by using some css frameworks ported for use with ReactJS ( react-bootstrap , react-semantic-ui , ant-design , etc). In these type of frameworks, you re-use the components provided by them and just pass props to them. As a result, the amount of HTML in your files should reduce a lot. Hope this helps!

Short answer: You might not need Redux but you should understand the concepts. Long answer: Consider you are building an application and you want other developers to understand the logic without your help. Also, as you application becomes bigger, maintaining the states will becomes a nightmare as setting the state gets out of hands very quickly. You maintain internal states inside the components and then send those states as props to other components which needs those. Now, after a good one year, you come back to your application to fix some issues. At this point, chances are you won't even remember the code and it becomes very difficult to understand which state is modifying a certain prop (to another component) which caused the bug. Have a predictable state container like Redux will help you in this aspect. It will becomes very much clear to you which component is modifying which thing as you can use the time-travel debugger among other stuffs. Hope this helps!

How can I do that when my .map() is inside the return statement?

Sorry but I didn't get it how this can solve my problem? What I understood from these is that they help in fetching the data. But, my problem is how can I fetch data from the render() method.

The code which I wrote in the question seems hacky to me since if I had to check for 2 variable like that, it would become a mess. The code which you wrote is much better!

What I basically meant here is how can I structure my initialState to make it scalable (since forums, groups should have a similar state structure).