Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (retired) Stateful Components Understanding State

Mathieu St-Vincent
Mathieu St-Vincent
9,244 Points

Would it be possible to have an update video because stuff is getting deprecated.

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Warning: Counter: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

2 Answers

It's a little dated, but it does force you to read the React docs to find out the new way.

You'll have to install prop-types from NPM, and import it - not sure if you can do that in Treehouse Workspaces, so I recommend following along in your own text editor.

class Counter extends React.Component {
  constructor () {
    super();
    this.state = { score: 0 };
  }
  render () {
    return (
      <div className='counter'>
        <button className='counter-action decrement'>-</button>
        <div className='counter-score'>
          {this.state.score}
        </div>
        <button className='counter-action increment'>+</button>
      </div>
    );
  }
}

function Player (props) {
  return (
    <div className='player'>
      <div className='player-name'>
        {props.name}
      </div>
      <div className='player-sore'>
        <Counter />
      </div>
    </div>
  );
}

Player.propTypes = {
  name: PropTypes.string.isRequired
};
Michael Pacey
Michael Pacey
3,038 Points

Personally, I think to create a whole new video due to prop-types being moved to a separate library would be like hitting a nail with a sledgehammer, I think just adding a teachers note would suffice.

I agree with Michael Pacey , This video course needs a do-over.

Personally, I'm enjoying taking it slow and learning about this History of React and the differences in versions, however, it's not a good look for TeamTreeHouse if a new student looked at this video first.