4 ms·

Hard time figuring out basic things in reactjs

I've been learning react since 6 days in a bootcamp. 30 mins everyday. And rest of the day I practice myself. I've tough time figuring things out. Like where do I keep my css files, where do I import them. etc. 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.

shortcake27 4y ago
React doesn’t have an opinion about CSS so there isn’t a “React” way. The same goes for most things in React; it’s quite lightweight and leaves a lot of decisions up to the developer. This might be jarring to people who come from frameworks that have everything built in. 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. https://emotion.sh/docs/introduction#react https://emotion.sh/docs/introduction#react
Raed667 4y ago
Look at the code base of some SPAs that are written in React. Your confusion with styling is normal since React itself doesn't tell you how to handle that. 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.
ElTimuro 4y ago
If you want a bit more structure, a more opinionated framework like nextjs or similar could be for you
- deleted 4y ago
  [deleted]
BjoernKW 4y ago
React neither is a framework, nor is it opinionated. When you're using React the time-honoured Perl motto TIMTOWTDI (https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to_do_it https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to... ) applies. 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://reactjs.org/docs/faq-structure.html https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md https://github.com/alan2207/bulletproof-react/blob/master/do... https://profy.dev/article/react-folder-structure https://profy.dev/article/react-folder-structure https://create-react-app.dev/ https://create-react-app.dev/ 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.
- wruza 4y ago
  Right, by reactjs they likely mean create-react-app. Idk how much opinionated it is, but css imports should work out of box there. So a better answer for a beginner must be on https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/ 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.
pHollda 4y ago
Ask ChatGPT whatever questions you have about React.
- mradek 4y ago
  the Future is gonna be weird
Leftium 4y ago
I learned React via https://www.roadtoreact.com/ https://www.roadtoreact.com/ 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.

shortcake27 4y ago

React doesn’t have an opinion about CSS so there isn’t a “React” way. The same goes for most things in React; it’s quite lightweight and leaves a lot of decisions up to the developer. This might be jarring to people who come from frameworks that have everything built in. 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. https://emotion.sh/docs/introduction#react https://emotion.sh/docs/introduction#react

Raed667 4y ago

Look at the code base of some SPAs that are written in React. Your confusion with styling is normal since React itself doesn't tell you how to handle that. 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.

ElTimuro 4y ago

If you want a bit more structure, a more opinionated framework like nextjs or similar could be for you

deleted 4y ago
[deleted]

BjoernKW 4y ago

React neither is a framework, nor is it opinionated. When you're using React the time-honoured Perl motto TIMTOWTDI (https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to_do_it https://en.wikipedia.org/wiki/There%27s_more_than_one_way_to... ) applies. 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://reactjs.org/docs/faq-structure.html https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md https://github.com/alan2207/bulletproof-react/blob/master/do... https://profy.dev/article/react-folder-structure https://profy.dev/article/react-folder-structure https://create-react-app.dev/ https://create-react-app.dev/ 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.

wruza 4y ago
Right, by reactjs they likely mean create-react-app. Idk how much opinionated it is, but css imports should work out of box there. So a better answer for a beginner must be on https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/ 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.

pHollda 4y ago

Ask ChatGPT whatever questions you have about React.

mradek 4y ago
the Future is gonna be weird

Leftium 4y ago

I learned React via https://www.roadtoreact.com/ https://www.roadtoreact.com/ 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.