Styling React Components

Question 1

What are the 4 approaches to combine CSS and React?

Answer 1

Inline Styling;
CSS-in-JS Libs;
CSS StyleSheets;
CSS modules;

Question 2

What are the 7 common problems of styling with vanilla CSS?

Answer 2

1 - Global namespace;
2 - dependencies;
3 - dead code elimination;
4-  minification;
5 - sharing constants;
6 - non-deterministic resolution;
7 - isolation

Question 3

How can themes be broadcasted to components?

Answer 3

Via contexts. e.g:
const ThemeContext = React.CreateContext({ theme: {} })

Question 4

What are the “magic bits” of webpack? how many of them are necessary?

Answer 4

the loaders. each file type is likely to have one or more loaders.

Question 5

What happens when a specific file type needs more than one loader?what is the precedence?

Answer 5

loaders from right to left will be used.

Question 6

What are the alternatives for webpack?

Answer 6

Rollup and Parcel

Question 7

When Parcel is recommended? Why?

Answer 7

For very simple projects. Because it allows quick setups.