Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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.