3 ms·

Can you please elaborate on 3.?

• Callmenorm 11y ago
  I think he's talking about css modules. Postcss or something like that. Webpack can generate unique names for you when you use that loader. I think it's more about webpack for #3 than react.
  • drinchev 11y ago
    Yes it is. But those tools usually rely on your Javascriptified HTML, which is something that React does. So React is a prerequsite on that.
• drinchev 11y ago
  Yes. Since your HTML is all Javascript now, there are people that went a bit further and created libraries for modularising your CSS files, based on that components [1][2]. The basic idea is that, since you are using ReactJS and you are compiling your JSX files to normal JS files, for which you are using a tool like "browserify" or "webpack". These tools are so powerful that can capture your `require` statements and convert your "non-javascript" required modules to something that javascript can use. In a similar way I'm using webpack & css-loader. My JSX file looks like this : // Component.jsx var styles = require('./Component.css'); // Component.css is a normal css file that has a .component class inside class Component extends React.Component { render() { return ( <div className={ styles.component }></div> ) } } Now your webpack / browserify tools captures those require files, parses their class names and outputs a concatenated "stylesheets.css" file that has all the class names with a hash prefix. And the final Html/Css look like this : <div class="_12az2X"></div> with stylesheets file ._12az2X { color: red; } [1] https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules [2] https://github.com/webpack/css-loader https://github.com/webpack/css-loader