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.

从链接的 React 教程的 Overview 部分开始，并将其与提议的初学者流程进行比较。完成的标准是：概览按组件、生命周期和渲染的顺序进行说明，使用建议的 Hello World 示例，并可选择链接到 Thinking in React。