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 Creating a Component Class

Bill Hinostroza
Bill Hinostroza
19,273 Points
Posted by Bill Hinostroza
Bill Hinostroza
19,273 Points

createClass is Deprecated since React vs. 15.5.0

The video should be updated to include changes to the current recommended way of declaring classes.

On the console log you get that this method is deprecated.

I found an article detailing on how to change it to the current recommended way using ES6.

https://daveceddia.com/convert-createclass-to-es6-class/

travisgrossman
travisgrossman
4,312 Points

Agreed

Carlos Lantigua
Carlos Lantigua
5,938 Points
Carlos Lantigua
Carlos Lantigua
5,938 Points

cool, thanks for the heads up Bill.

Gbemi Ojo
Gbemi Ojo
735 Points
Gbemi Ojo
Gbemi Ojo
735 Points

Thanks a lot, this was super helpful!

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

Yes... if not updated video, then update the Teacher's note.

4 Answers

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

I'm using new react compared to the one in the video, so following the steps didn't work. Here's what I did, using React 16.4.1

<!--- React Script Files --->

<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.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>

Creating a class with new React.

class Counter extends React.Component {
    render() {
        return (
            <div className="counter">
                <button className="counter-action decrement"> - </button>
                <div className="counter-score"> {this.props.score} </div>
                <button className="counter-action increment"> + </button>
            </div>
        );
    }
};

Counter.propTypes = {
    score: PropTypes.number.isRequired,
}
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

Also, for the second part when adding the propTypes, this is how it's handled, instead of the one one in the video.

    static propTypes = {
        score: PropTypes.number.isRequired,
    }
Josh McKenzie
Josh McKenzie
8,648 Points
Josh McKenzie
Josh McKenzie
8,648 Points

Almost one year since the depreciation and Treehouse still has this video unmodified.

Not Cool.

Julian French
Julian French
3,257 Points
Julian French
Julian French
3,257 Points

Yes, I agree that this video should be updated. All the other tutorials I've seen online use the ES6 syntax.