Is there a mental model for react js to figure these things quickly. eg: ways to add css in react js. I'm confused of them.
For CSS, You can use plain old CSS, CSS modules, or one of the many CSS-in-JS libraries. The tech you choose will determine where your CSS goes. For plain CSS, I probably wouldn’t have individual CSS files for each component due to the risk of naming collision. For CSS modules, generally I’ll have one CSS file per component in the same directory as the component. Same goes for vanilla-extract. For styled components or Emotion, CSS is generally defined in the same file as the component.
It’s worth having a play with a bunch of different styling solutions to see which one you like best. I prefer CSS Modules but it requires some setup in your build. Emotion has a quick setup and has a few different ways of applying styles (styled api, css prop etc), so it’s an easy way to get styling going in simple React projects.
If you'd like a more opinionated, cookie-cutter approach there are frameworks such as Angular that fit that particular bill.
It's your job as a React developer to figure out these things. When people say React is simple, they usually mean that conceptually it's relatively simple. That doesn't necessarily mean it's easy to use.
That said, there are guidelines and tools like the following that can help you get started with your React projects:
https://reactjs.org/docs/faq-structure.html
https://github.com/alan2207/bulletproof-react/blob/master/do...
https://profy.dev/article/react-folder-structure
Your confusion is perfectly understandable, by the way. Having worked on web applications since the mid-90s I am what you might call a seasoned web developer, and at first I was confused by React, too. So, nothing to worry about.
So a better answer for a beginner must be on https://create-react-app.dev/docs/adding-a-css-modules-style... side. What I’ve learned about teaching is that if you show one way, they’ll move forward and figure out the others eventually. If you show many ways, they either get stuck in which-way anxiety or choose something incompatible or too advanced for their lessons material.
That said, OP, stackoverflow is a better format for questions like these. You can easily find the answer by either searching or by starting typing your question. I find their similar-questions algorithm pretty good at detecting “not even posted yet” duplicates.
Each project can use a different way to style the application (CSS, CSS modules, CSS in JS, Styled Components, Sass, Less, Stylable, Emotion, etc...)
Initially I was also very confused with React, but at some point, the model "clicks" in your head.
But then I discovered Svelte(Kit). It seems to give you the benefits of React while staying closer to plain HTML/CSS/JS. For example, Svelte templates are just HTML with some special syntax added (vs JSX).
There are probably way more job openings for React devs, but the Svelte job openings seem to be slightly higher in quality.