Show how to use React props and state in the examples

[andrewliebchen]

For me, the ability to make use of React.Component's props and state is the real value of this work; though don't get me wrong, the JSX is great too. Even if its over the heads of most Framer users, this could be a game changer for some of us.

[dabbott]

You're definitely right about props and state being the real value here. I do show these in the color picker example:

State: https://github.com/dabbott/react-framer/blob/master/example/app.js#L119-L123 Props: https://github.com/dabbott/react-framer/blob/master/example/app.js#L74-L83

I also show a text prop in the snippet in the README.

If there's another snippet/example you have in mind I'm happy to add it. Although currently this project is a proof-of-concept for people who know React already, so I don't want to start explaining how these work.

[andrewliebchen]

Does React's state work when it's defined outside of the component's constructor, ie can I still call setState in your example component above?

So is this...

class Example extends React.Component {
  this.state = { bar: true }
}

the same as this?

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { foo: true };
  }
}

I know enough to be dangerous, but sometimes I don't understand patterns I don't recognize. 😉