React: Two things I don't like about React.

[FateRiddle]

Do you want to request a feature or report a bug?
feature

1. css. I love react, but can't help notice vue components does this one thing better. writing css the way css looks, same syntax, and more importantly having access to all css properties. It looks elegant and simple,
   just

<style> .... normal css here </style>

and you create module css. Why can't react have such feature? Every solution I knows has invented its own syntax and walk-around.

1. Recently I learned it isn't obvious to bind a event handler with argument, and be performant at the same time.

arr.map(item => <li onClick={() => this.handleClick(item.id, item.isComplete) } />)

Seems to be the most natural way to pass in arguments to event handler, but this way will create a new function every time the component renders, and possibly damage performance. All the alternative I know seems less apparent, as you are supposed to
js arr.map(item => <li onClick={ this.handleClick } />)
bind this way and try to pass the arguments some other ways. Is there a good way to solve this?

[gaearon]

writing css the way css looks, same syntax, and more importantly having access to all css properties.

I'm not sure what you mean. React works fine with regular CSS. Write CSS in a file, and it will work in your component. Are you having any issues with this?

[FateRiddle]

Yes, but facebook sells hard the 'modular css' concept and is somewhat against (or at least think it is not best practice) writing css in one file. That's why we have so many solutions for css in js. My point is none of them looks as natural as what vue does.

[gaearon]

What “modular CSS” concept are you referring to? Facebook makes no references to CSS in the React docs. What in particular do you mean by “sells hard”?

If you mean Create React App, we allow importing CSS files from JS there, but it’s not a “CSS in JS” solution. It’s just a way to split a single CSS files into many files associated with components.

However, those files are pure CSS: there’s no special “modular” extensions being used there. So I’m not sure how this differs from the regular way you write CSS.

[FateRiddle]

<div style={{marginTop:10}}>
Is this not recommended any more?
And correct me if wrong, if you write css for each component, you seem to have to:

import style from 'style.css'
...
<div className={style.appheader} />

Thanks for explanation:D I guess I'm just puzzled with different css solutions out there. What about the other question I asked?

[TrySound]

css-modules is just an option you import regular css

import './style.css';

There's styled-jsx if you like to write css in markup

Inline styles are used in the same way as always for dynamic styling.

[gaearon]

@FateRiddle

<div style={{marginTop:10}}>
Is this not recommended any more?

It was never “recommended”. It’s just a way to add dynamic styles that are calculated from JavaScript (e.g. if a style depends on a prop you can’t know for sure). Some people use it in more places (or even instead of class names) but it’s entirely subjective. Most React users just write <div className='MyDiv' /> and then style .MyDiv in CSS.

And correct me if wrong, if you write css for each component, you seem to have to:

No, this has nothing to do with React either. What you’re describing is a non-standard extension to CSS called “CSS modules”, and it’s neither endorsed by Facebook nor even currently supported in Create React App. You probably saw it in some third party project, but it’s not required for React (and not even recommended officially).

[bjrmatos]

bind this way and try to pass the arguments some other ways. Is there a good way to solve this?

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md#protips

[gaearon]

I hope the above discussion helps!

In general I recommend sticking to examples in official documentation (https://facebook.github.io/react/) and then using Create React App (https://github.com/facebookincubator/create-react-app) which we curate. People use React in different ways so we can’t really say who’s doing what and why. React itself is pretty flexible so indeed you can use normal CSS (which we recommend), CSS modules, inline styles, or even Vue-like solutions like styled-jsx.

As for method binding, I hope the link @bjrmatos provided helps! I would only add that you shouldn't worry about it unless it's actually causing performance issues in your app. There is a lot of misinformation about performance, and I suggest you not to spend time on micro-optimizing things unless you're dealing with a specific problem.

Cheers!

[drcmda]

@FateRiddle

react-csjs does just that

import React from 'react';
import csjs from 'react-csjs';

@csjs`
.button {
  background-color: purple
}
.label {
  color: blue
}`
export default class Button extends React.Component {
  render() {
    return (
      <div className={this.props.classes.button}>
        <span className={this.props.classes.label}>
          {this.props.children}
        </span>
      </div>
    )
  }
}

You have the same flexibity, for instance you can run postcss transforms over it at compile time.

Css is problematic overall and React shouldn't make a pick unless it brings us forward. Vue did it and it inhibits innovation, it's at the sidelines fumbling around with old css and webpack loaders while React is churning out awesome stuff like glamor, styled-components, and so on. One day an idea will come along that will be so good that perhaps traditional css can fall away, just like jsx made html irrelevant. Until then, pick the method that suits you.