Intro to react for BEGINNERS revision

An exchange of tweets with super friendly @gaearon lead me to convert one of my replies into this ticket. To improve what is on the overview section for beginners here: https://reactjs.org/tutorial/tutorial.html

I suggest the "Overview" section is dedicated to the following and flows like this:

• Explain what a component is (type, class) and that ES6 syntax which for someone with little JS experience looks like a normal JS syntax but it is not. With that hint outline what each term mean.

• Explain a component's lifecycle briefly before touching on render and constructor methods. I think React lifecycle is inspired/affected by iOS/Android lifecycles so why not touch on those, for people like me who came from mobile world. Learning by association is one of the learning methods (I think).

• Now feel free to explain what render is and why it must return something (including null).

• Now is time to show Hello World not a shopping list:

class HelloWorld extends React.Component {
  render() { //compulsory React method/fucntion
    return (
      <p className="cssclass"> // a <p> element is also a component, className is a property
         Hello World!
      </p>
    );
  }
} 

• (Optional) link to Thinking in React early on and that coloured component hierarchy of the stock list.

Its not easy to think like a beginner once you are a pro. Hope this is an improvement suggestion and not a cause for confusion.

Start with the Overview section of the linked React tutorial and compare it with the proposed beginner flow. Done means the overview explains components, lifecycle, and render in that order, uses the suggested Hello World example, and optionally links to Thinking in React.