Restructure docs to provide "paths" for guidance?

[bvaughn]

Originally repoted by @markerikson via facebook/react/issues/10991.
Please read the discussion thread on the original issue before beginning work on this one.

Per Dan's recent comments at https://news.ycombinator.com/item?id=15367044 and https://twitter.com/dan_abramov/status/913896989842137091 , a lot of people still seem to have complaints about the way the docs are structured.

It might be worth trying to restructure the docs kind of like a "Choose Your Own Adventure" book, with different "paths" based on what you know so far and what you want to accomplish (suggestions for reference: https://twitter.com/autiomaa/status/913908358662574083 , https://twitter.com/trevorbrindlejs/status/913907697602433025 ).

Hypothetical paths example:

What are you looking for?

• I want to see if I'm ready to learn React - what should I know first?
  • links to a page discussing common JS prerequisite knowledge
• I want to try out React right now , without installing anything:
  • links to a page that points to CodePen, CodeSandbox, and StackBlitz for online playgrounds, and also gives a copy-paste HTML snippet with links to CDN libs that the user can save and edit locally
• I want to learn the basic ideas of React, with nothing "new" involved
  • links to a page that describes components and rendering, with ES5 syntax, without using JSX
• I want to learn the recommended way to use React
  • links to a page that talks about Create-React-App, ES6+, and JSX syntax
• I understand the basics - how do I learn to "think in React" as I build something?
  • probably links to the current tutorial section
• I'm trying to build an application - how do I solve "real-world" problems with React?
  • links to a page that addresses topics like routing, state management, etc, like the guides discussed in #8060
• I'm looking for advanced React usage patterns that can help me reuse code better
  • links to a page that covers topics like HOCs, render props, context, etc

Another related idea would be if the code samples in the docs all had multiple syntax variations that could be viewed by switching tabs or a global option across the site, like "Plain ES5 Syntax" / "ES6 and JSX Syntax" / "ES6+ Syntax".

[lostgirljourney]

@bvaughn hi, I looked at the reference and want to work on this with someone's mentorship and discussion.

[bvaughn]

Hi @lostgirljourney. This issue is pretty old and we should close it. @gaearon and @rachelnabors have been working on a documentation rewrite that addresses this and many other pain points with the old docs. You can check out their work in progress here if you'd like: https://beta.reactjs.org/

Sorry about the confusion! :(

[lostgirljourney]

@bvaughn :D okayy.