react: [New Docs] Docs Bugs & Issues

We just completely rewrote docs in #7864. They’re bound to cause some issues, have some mistakes, etc. Let’s keep this issue as an umbrella for all problems we’re discovering after the initial rollout.

  • Old links shouldn’t be 404! Major issue.
  • Topbar points to https://facebook.github.io/react/index.html which is ugly URL
  • We shouldn’t use Number as an identifier https://github.com/facebook/react/issues/8034
  • Remove vars everywhere except ES5 page
  • JSX in depth has weird names like Story1, render2 @lacker
  • JSX in depth shows a failing example with <hello> tag but doesn’t show how to fix it @lacker
  • Localized pages are gone: need to set up a new streamlined localization effort (cc @thejameskyle)
  • Mention in default index.html that it is not production-ready
  • Mark mockComponent as legacy and unnecessary https://github.com/facebook/react/issues/2499#issuecomment-94044857
  • shallowCompare on Addons page should recommend PureComponent instead
  • Figure out what to do with Community section (https://github.com/facebook/react/pull/6099)
  • Mention string refs
  • Forms doc has mistakes
  • Forms doc uses setState for uncontrolled components which is confusing
  • Installation is messy

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 46 (13 by maintainers)

Most upvoted comments

The documentation and source code for reactjs.org now lives in a different repository: reactjs/reactjs.org. (For more info on why we made this move, see issue #11075.)

I’ve moved this issue to the new repo: reactjs/reactjs.org#84

Let’s continue the discussion there!

PRs welcome!

@kkemple go for it!

Tiny (possible?) typo: in reference-react.md, the code for React.Children.count omits React which could be slightly confusing to newcomers.

More feedback: people are used to seeing version number on homepage. Can we add it somewhere and also link to the changelog for good measure?

@gaearon the uncontrolled form example on https://facebook.github.io/react/docs/forms.html#uncontrolled-components is passing value, so it’s actually a controlled example.

The correct example would be something like:

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert("Text field value is: '" + this.textInput.value + "'");
  }

  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="Hello!"
          ref={(input) => this.textInput = input}
        />
        <button onClick={this.handleSubmit}>Submit</button>
      </div>
    );
  }
}

ReactDOM.render(<Form />, document.getElementById('root'));

Great job on new docs all, love the live editor with error handling.

Just curious: Any reason why var is used on all the homepage tutorials? Curious whether there’s a “best practice” on this… would have thought const where possible, otherwise let?

@luqmaan Thanks, fixed. Let us know if you find more broken links.