4 ms·

React is cool. Switching to React helped me do : 1. Get rid of any jquery-like library. 2. Get rid of my HTML/Handlebars files :) 3. Generate dynamic CSS cla

React is cool. Switching to React helped me do : 1. Get rid of any jquery-like library. 2. Get rid of my HTML/Handlebars files :) 3. Generate dynamic CSS classNames for my components allowed me to get rid of stylesheets naming conventions / strategies ( BEM, etc. ) 4. With the help of Flux ( yahoo's implementation ) I got rid of writing two code-bases ( front-end / back-end ). Now I'm putting everything in one place, this is awesome! ( I did it with server-side rendering, so I didn't loose anything at all )

omouse 11y ago
The light-weight structure that React imposes is what lets you get rid of jquery (and much of the plugins) and Handlebars/Mustache special syntax. React removes a layer of syntax and favours using plain old JavaScript.
doque 11y ago
Can you explain 3.?
s3nnyy 11y ago
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

omouse 11y ago

The light-weight structure that React imposes is what lets you get rid of jquery (and much of the plugins) and Handlebars/Mustache special syntax. React removes a layer of syntax and favours using plain old JavaScript.

doque 11y ago

Can you explain 3.?

s3nnyy 11y ago

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