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.

Comece pela seção Overview do tutorial de React vinculado e compare-a com o fluxo proposto para iniciantes. A tarefa estará concluída quando a visão geral explicar componentes, ciclo de vida e renderização nessa ordem, usar o exemplo Hello World sugerido e opcionalmente incluir um link para Thinking in React.