JavaScript React Basics (retired) Thinking in Components PropTypes and DefaultProps

React.PropTypes is deprecated as of React v15.5, This video (+ links, and the related quizz question) should be updated.

I don't think Treehouse is great at updating videos when things change in frameworks :P

Tommy Gebru
Tommy Gebru
30,148 Points

Perhaps this should be in the Teachers Notes... :star:

2 Answers

PropTypes are still a thing, they are just not a part of the core React library anymore (sort of like React breaking out ReactDOM into its own library).

You just need to install it manually:

npm install --save prop-types

or

yarn add prop-types

Then import it and call PropTypes directly instead of React.PropTypes:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Application extends Component {
  ...
}

Application.propTypes = {
  title: PropTypes.string.isRequired
};

export default Application;
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

This is what I did in order to get the type errors to work correctly as indicated in the video. Use React.development & React-dom.development version instead of production. Also include prop-types.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.js"></script>
<script type="text/babel" src="./app.jsx"></script>
Application.propTypes = {
    title: PropTypes.string.isRequired,
};

// Warning: Failed prop type: The prop `title` is marked as required in `Application`, but its value is `undefined`.
//    in Application

ReactDOM.render(<Application type={7} />, document.getElementById('container'));