Components as ES6 classes

[mirkodrummer]

Does everybody really wants support for ES6 classes for react components? What about Object.create?

[guidone]

:+1:

[liquid1982]

:+1:

[openmosix]

:+1:

[tejo]

:+1:

[maur8ino]

:+1:

[andreacfm]

:+1:

[syranide]

You're free to use whichever you like, what is the question?

[mirkodrummer]

I don't want to use whatever I like, I like React, I like javascript as first-class Function language, functional programming capabilities, prototypal inheritance and so on... At first the React manifesto was about "Composition over inheritance", what I see here is something that will bring to a different route

Sorry, i would like to explain better my point here: -- First things first -- https://www.youtube.com/watch?v=PSGEjv3Tqo0&feature=youtu.be&t=5m8s

Then I would like to discuss more about some decisions, according to this post from React Blog http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html what I see here is Marketing:

1) "Plain JavaScript Classes!!" targeting Javaist people 2) About this example code:

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

• Autobinding broken
• getInitialState dropped out, hey what about "Components life cycle?" IMO defining a method to represent the initial state of a component is more idiomatic than putting a "state" property everywhere in the constructor, also having getInitialState help me to understand fast if a component has an own state instead of searching it in the constructor
• Defining propTypes defaultProps outside the class...c'mon... and: A promise to have a more declarative syntax in "ES7+ Property Initializers"

3) Mixins broken 4) "Other Languages!" (http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages)

• Coffescript targeting Rubyist people (We have a really strong new shiny ES6 specification and we want still use coffeescript? )

Finally the best example code i've seen:

function MyComponent(initialProps) {
  return {
    state: { value: initialProps.initialValue },
    render: function() {
      return <span className={this.state.value} />
    }
  };
}

[syranide]

@mirkodrummer React.createClass is still there and with these new changes you're free to tweak it however you like. This change is effectively making React un-opinionated about how you construct your classes, just as it should be, it has not taken anything away it has simply stepped back from enforcing from React.createClass.

[mirkodrummer]

@syranide "React.createClass is still there" yes still...for now

[syranide]

@mirkodrummer It will always be. It might not be actively maintained by the React team for all forseeable future, but the idea is in no way deprecated and you're free to use/write your own (better) replacement.

[mirkodrummer]

Anyway I think there we didn't get the point: Javascript Classes, something that sounds as continuing doing the errors of the past. IMO The unique reason to use Class is to get more developers

[syranide]

Anyway I think there we didn't get the point: Javascript Classes, something that sounds as continuing doing the errors of the past.

@mirkodrummer That makes no sense to me. React has stepped back from being unnecessarily opinionated, how is that bad? It's an incredible improvement from the current state of every JS framework in existance having invented their own consistently flawed concept of classes which are never compatible with any other classes.

[mirkodrummer]

Ok let's say that I could see your point about "opinionated" things and bla bla bla, but anyway you're not cover the real problem, Javascript is a beautiful prototypal language, you don't know JS if you want Class construct. How many of us actually wants Class constructs to make React components? I couldn't see any valuable pro here.

@syranide do you want class system? it's ok, I just want to know more from everybody.

[syranide]

@mirkodrummer If you want to use class or not that's your choice, it's just syntax sugar anyway so I don't see a point in setting up the prototype manually, it's just more mork. I'm using traditional prototypes for my react-swf for simplicity as widespread native class syntax is far far away, but I'm using ES6 class syntax in all my professional work.

[mirkodrummer]

As you mentioned swf in the name of "proud old ugly web" I don't want to waste time anymore with you @syranide ... waiting for other guys opinion, anyway thanks...

[ghost]

@mirkodrummer you can always make fork of React and move the project (fork) to the side that you prefer... And also keep calm, man, don't be angry with people :)

[mirkodrummer]

@vanesyan give me a reason for classes in Javascript and React please

[acdlite]

Have you guys seen this proposal: https://github.com/reactjs/react-future/blob/master/09%20-%20Reduce%20State/01%20-%20Declarative%20Component%20Module.js

Looks like the future to me.

[mattwondra]

@mirkodrummer I'm afraid you're having this argument in the wrong place... In the very same article you posted:

We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.

Isn't it reasonable for a library (especially a relatively young one) to want to make sure they're evolving with the language? ES6 classes may not be JS 101 right yet, but it looks like things are headed in that direction.

I personally have mixed feelings about ES6 classes, but I can't begrudge React for moving with the language. If you want to voice complaint about classes in JavaScript, I'm sure there are more productive places to do so...

[ghost]

First to be native, also code elegancy, consistency, sometimes it's very useful to extends properties by component from another component. For you there're no reasons to use it, but for other people like me there are. Anyway as @syranide said above React.addClass({}) will be exists for long time, no reasons to be so nervous.

[iamdustan]

This is not the place to argue or discuss reasons for why there is a class keyword in ES6. Classes exist in ES6. They are not “real” classes, but still use the same prototypical inheritance JS always has.

It’s ironic how React.createClass is okay (proprietary class-like syntax), but not ES6’s extends React.Component.

@mirkodrummer I am unsure if it was intentional or not, but the way you replied to @syranide appears to have turned the discussion from a language construct into a personal issue. “I disagree with you, move on.”

[mirkodrummer]

Is reasonable that React evolves along with ES6. IMO class is not the best one, ANYWAY I'm not here to discuss about why there is a class keyword in ES6, I'm here to hear from people if they really want Class system in React Components, it turns out that class system over the time will embrace a wrong approach against composition

React.createClassis a factory function ES6's extends is intended to do inheritance

[mirkodrummer]

@vanesyan said:"sometimes it's very useful to extends properties by component from another component" yeah! that's the point inheritance over composition ;)

[Kureev]

:+1: Yes, I want React to support ES6 features including classes

[bjrmatos]

For react components i prefer/love React.createClass over ES6's class, also i prefer composition over inheritance, i hope the react team dont deprecate React.createClass

[syranide]

i hope the react team dont deprecate React.createClass

@bjrmatos They "can't", they might stop supporting it at some point, but it's not tied to core so there's no reason the community can't take over long before that happens and most likely will. It's nothing more than a utility.

[ghost]

@mirkodrummer I meant extending by one part of component of another inside ONE component. Yeah, components should be isolated from each other.

[bjrmatos]

@syranide My only concern is that react core does not couple to a class system, if the core is so flexible to support class and React.createClass, that is awesome, but IMHO any approach for components creation would be better that a class system.

[mirkodrummer]

:+1:

[syranide]

@bjrmatos Any classes that can be instantiated with new MyObject and have a render-method are compatible, regardless of how it was built, that's all React knows and cares about. Even if React wanted to discriminate it couldn't. There's nothing to worry about. :)

[emmagamma]

@syranide :+1:

All this bitching and moaning is pointless lol, if you like class use it, if not, use something else. simple.

[sophiebits]

We're not trying to encourage inheritance; we prefer composition in general and continue to try to make it more feasible. Encouraging composition is one reason we've been promoting building higher-level components instead of using mixins when doing so is possible. You may also be interested in Sebastian's comment here: https://github.com/facebook/react/issues/613#issuecomment-76621639.