The HTML code for this lesson does not have a <script> tag to include JSXTransformer.js. That was included in the preceding lessons, and I had to add it to get this lesson to work on my machine. Otherwise I just get a blank screen in the browser.

However, I see that on jsbin.com your code for this lesson is working just fine without including JSXTransformer.js. Why do I need to include JSXTransformer.js but you don't?

I cant see any warning when a field is required and i have the same code as the video, why?

What version of react are you using? I believe its not required in the newer versions of react.

I cant see any warning when a field is required and i have the same code as the video, why?

I have the same issue. Having looked on StackOverflow, the reason seems to be that only the development version of React shows the warnings for isRequired violations. The JSbin for this tutorial uses the production version- react.min.js, instead of the development version- react.js.

So, switch this line:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.min.js"></script>

For this line:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.js"></script>

I was pretty confused following along with this lesson having started with the first tutorial video in this series. That video has you set up a React environment and in the main.js file of that app is the line:

ReactDOM.render(<App />, document.getElementById('app'));

That line is apparently at odds with the ReactDOM.render line in the tutorial above. This caused my webpage to show nothing at all.

Unless I missed something in the tutorials after the first one, maybe you guys should make it more clear what to do. But again, I may have missed that.

Good catch. I'll see about updating this lesson, I believe it's the only one that deviates from that pattern. main.js in this case should simply be:

import App from './App';

How are you getting the auto completion from reactTypes?

For anyone else getting a fatal error from propTypes, see this post https://stackoverflow.com/questions/43302963/how-to-fix-react-15-5-3-proptypes-deprecated-warning-when-using-create-react-app

Basically deprecation.

React.PropTypes are deprecated in React 16, this example doesn't work.

Fix: import PropTypes from 'prop-types'; ... txt: PropTypes.string

etc.

React.PropTypes is deprectated.

After react v15.5, instead of accessing PropTypes from main React object ( React.PropTypes ), install prop-types package and import it in your app.

https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes

Worth noting that React.PropTypes have now been removed from React core, so you need to install them as a separate package that doesn't come with create-react-app. The new workflow requires installing PropTypes package with:

$ npm i --save prop-types

And then importing PropTypes with import PropTypes from 'prop-types' and using PropTypes instead of React.PropTypes in your code.

React.PropTypes.string is throwing an error. TypeError: Cannot read property 'string' of undefined

@Joe, The App.propTypes and App.defaultProps does not work. Has this changed in the latest version when you use create-react-app to setup.

Might want to update the lesson or put in a warning. I got the following warning in the console when following along. "React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead."

The content need to be updated as React.PropTypes is deprecated since React 15.5.0, use the npm module prop-types instead react/no-deprecated

The updated code for App.js should be

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component{
  render(){
    let txt = this.props.txt
    return( <h1>{txt}</h1> )
  }
}

App.propTypes = {
  txt: PropTypes.string,
  cat: PropTypes.number.isRequired
}

export default App

Updated Code for App.js

import React from 'react';
import PropTypes from 'prop-types';

class App extends React.Component {
  render() {
    let txt = this.props.txt;
    return (
      <div>
        <h1>{txt}</h1>
      </div>
    );
  }
}

App.propTypes = {
  txt: PropTypes.string,
  cat: PropTypes.number.isRequired
};

App.defaultProps = {
  txt: 'this is the default txt'
};

export default App;