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 區段開始，並將其與提議的初學者流程進行比較。完成的標準是：概覽依序說明元件、生命週期和 render，使用建議的 Hello World 範例，並可選擇連結到 Thinking in React。