I want to start developing with react after watching a few beginner tutorial videos and understanding the concepts. My only problem is how I should go about the styling as there are many ways to use CSS in react.
Please experienced react Devs, how do you guys style your react components.? In my opinion I think JS object styling method is the best cos you don't have to leave the file since everything is done in the same file but some blogs said CSS modules are better So please I need answers.
Greatigboman etc

U don't know anything.

But every thread looking for REACT developer u go the drop contact.


Now common to style element u know know

gistray:
U don't know anything.

But every thread looking for REACT developer u go the drop contact.


Now common to style element u know know

Vawulence dey sleep react go wake am.

gistray:
U don't know anything.

But every thread looking for REACT developer u go the drop contact.


Now common to style element u know know

I said I was still learning
If you don't have anything meaningful to contribute kindly buzz off

Also is there a way I can create a react app and install all the node dependencies offline without having to connect to the internet everytime I want to start a react project

Think4Myself:
Also is there a way I can create a react app and install all the node dependencies offline without having to connect to the internet everytime I want to start a react project

Firstly with the styling, you can style your app various ways. You can use the inline style, you can create a css folder for each component, you can use the css frameworks, preferably tailwind, material ui or styled components, you can also use the css-in-js. Go for anyone that you find convenient and fast for you. To your second question, no you can't.

jbreezy:
Firstly with the styling, you can style your app various ways. You can use the inline style, you can create a css folder for each component, you can use the css frameworks, preferably tailwind, material ui or styled components, you can also use the css-in-js. Go for anyone that you find convenient and fast for you. To your second question, no you can't.

Thanks for your reply
To be safer, what type of styling do most companies use also what type do you use the most?

The second question, cant I clone(copy and paste) the whole create react app folder and give it another name so I don't have to be downloading everything everytime?

Think4Myself:
I want to start developing with react after watching a few beginner tutorial videos and understanding the concepts. My only problem is how I should go about the styling as there are many ways to use CSS in react.
Please experienced react Devs, how do you guys style your react components.? In my opinion I think JS object styling method is the best cos you don't have to leave the file since everything is done in the same file but some blogs said CSS modules are better So please I need answers.
Greatigboman etc

Having everything in the same file makes the contents of the file too much especially if you are doing the jsx and also JavaScript code on the same file. I personally prefer my components to be as minimal as possible. It makes it easier to read but that's just me. The world is your oyster especially if it's your own project. But I would recommend trying out every method so you have a good idea how they work. Then you can better make a decision and also build some level of experience with each method so you are better positioned when taking jobs.

Think4Myself:


Thanks for your reply
To be safer, what type of styling do most companies use also what type do you use the most?

The second question, cant I clone(copy and paste) the whole create react app folder and give it another name so I don't have to be downloading everything everytime?

For me, I use all, randomly. But actually, I prefer styled components or css-in-js when building a next js project, tailwindcss or/and material ui for create-react-app and just vanilla css when not using any framework. And for company's part, every company has its own way of styling. That's why you have to have a strong background in css, then a knowledge of multiple css frameworks, not just one. They are easy to learn if you know your css well.

gistray:
U don't know anything.

But every thread looking for REACT developer u go the drop contact.


Now common to style element u know know

The thing shock me ooo

chukwuebuka65:


The thing shock me ooo

MF I said I was still learning

Think4Myself:


The second question, cant I clone(copy and paste) the whole create react app folder and give it another name so I don't have to be downloading everything everytime?

Of course you can.
Just do that and modify things inside package.json and other config files you might have there.

vankaid:

Of course you can.
Just do that and modify things inside package.json and other config files you might have there.

Wow, can you list out the things I need to modify in the JSON file

Think4Myself:

Wow, can you list out the things I need to modify in the JSON file

the json file contains a list dependencies your app needs. for example if you are going to use axios in your app, your json file should contain axios.if u are going to use lodash, ur json file should contain lodash .if you are going to use react icons , ur json file should contain react icons. so it depends on the libraries that u use in ur app. Men , u should go and watch any react crashcourse u can find online as many times as u can.

Tailwind....

If u near React Bootstrap ready to memorize components with jotter...

gistray:
U don't know anything.

But every thread looking for REACT developer u go the drop contact.


Now common to style element u know know

Think4Myself:


MF I said I was still learning

You're learning and your being rude. How do you handle critics? Because it will come from clients ooo! And e dey burn...

niel63:


You're learning and your being rude. How do you handle critics? Because it will come from clients ooo! And e dey burn...

They were rude to me at first please

GREATIGBOMAN:
Tailwind....

I[b] f u near React Bootstrap ready to memorize components with jotter... [/b]

Why's that

Think4Myself:


They were rude to me at first please

I saw that... but na you be the OP.
If you respond to every criticism you might not learn much or get valuable information as to what you posted. Albeit, just take am easy. Peace!

Just use bootstrap or tailwinds and save yourself from CSS headaches

niel63:


I saw that... but na you be the OP.
If you respond to every criticism you might not learn much or get valuable information as to what you posted. Albeit, just take am easy. Peace!

Ok

bularuz:
Just use bootstrap or tailwinds and save yourself from CSS headaches

Ok, thanks, but what if I want something custom, I know bootstrap and it's repetitive, not sure bout tailwind thi

I think people have answered you already but to buttress their points I think the styling method to use in a react app boils down to personal preferences. I'd suggest you try each option and settle for the one that suits you best. Personally, I use styled-components because I enjoy writing plain css and other times I use TailwindCSS or Material UI.

Also every company usually have a style-guide they follow so you don't have to worry too much as long as you know your onions in writing plain CSS.

Think4Myself:



Ok, thanks, but what if I want something custom, I know bootstrap and it's repetitive, not sure bout tailwind thi

Op... I don't think there any form of custom anything apart from a way somebody thinks is nicer than the other.

However we choose to write css, we must know css! I don't know if you understand what I mean.

I've used Tailwind, Chakra UI, MUI, daisyUI, Css module, Styled Component, SCSS, SASS... make I no dey mention utilities like say na better thing.

The point is, you need to know your css well.
So I'll suggest writing in the style you're comfortable with. At the end of it all, ensure your work is beautiful and catchy. That's the work of CSS ba? .

Quite right

Think4Myself:



Ok, thanks, but what if I want something custom, I know bootstrap and it's repetitive, not sure bout tailwind thi

Nothing repetitive there, just like you have been advised before you need to learn as much of CSS you can but you can use a CSS framework during software building in order not to waste time.

Don’t use the inline style object pattern, it will make your code really bloated and hard to read your styles.
The most straight forward way would be to have your styles folder. Where you would have a css file for every component or page then import that file into your react component using relative paths.
Also tailwind is awesome with react and really easy to work with.
The documentation is one of the best I’ve seen as well.

Rgade:
Don’t use the inline style object pattern, it will make your code really bloated and hard to read your styles.
The most straight forward way would be to have your styles folder. Where you would have a css file for every component or page then import that file into your react component using relative paths.
Also tailwind is awesome with react and really easy to work with.
The documentation is one of the best I’ve seen as well.

I guess you are not a tailwindcss fan.

Rgade:
Don’t use the inline style object pattern, it will make your code really bloated and hard to read your styles.
The most straight forward way would be to have your styles folder. Where you would have a css file for every component or page then import that file into your react component using relative paths.
Also tailwind is awesome with react and really easy to work with.
The documentation is one of the best I’ve seen as well.

Thanks for your input

jbreezy:
I guess you are not a tailwindcss fan.

Actually I’m a critic turned big fan, I moved to tailwind recently and I’m loving it.
I guess you’re asking cause I talked against inline styling. But inline styling with short tailwind classes is a lot more readable than putting entire css style objects inline.