Arquivo App.js sem class extends

Boa noite, Luan! Como vai?

Isso acontece pq o create react app mudou na última atualização para seguir algumas boas práticas do mundo react! Não há necessidade de se preocupar com isso por enquanto!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Entendi. Mas então a função Render ainda é válida? Pq agora essa function é uma "boa pratica"?

O render() é executado por baixo dos panos através do return que é dado dentro da function App()! Em relação à boa prática que eu citei antes, a documentação do React orienta a criar componentes que não tenham estado e comportamento ( por comportamento, eu quero dizer métodos que gerenciem o que o componente faz ) através de funções! Que é exatamente o caso do componente App!

Já em casos onde o componente tem estado e comportamentos, o ideal é continuar utilizando classes.

Sendo assim, vc ainda verá por aí a sintaxe de criação de componentes com classes e agora também verá essa sintaxe de funções!

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Aproveitando a dúvida do colega queria tirar duas dúvidas: 1) você diz que ao usar function o render() é executado por baixo dos panos através do return? Por isso não preciso do render() neste caso?

2) class até então era necessária se eu fosse lidar com estados, mas pelo o que li na documentação do react posso lidar com estados com função usando hooks, certo?

Opa, Afrânio! Tudo certo?

1) você diz que ao usar function o render() é executado por baixo dos panos através do return? Por isso não preciso do render() neste caso?

Isso, o render() é executado por baixo dos panos e utiliza o valor retornado pela função! Inclusive, essa forma de criar componentes apenas com uma função já existia antes mesmo dessa atualização do create react app! Componentes criados dessa forma apenas utilizando uma função se chamam Stateless Components ou Stateless Functional Components! Seguem dois links mostrando a comparação de declaração de componentes usando a sintaxe de classes e de funções!

https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

https://itnext.io/react-component-class-vs-stateless-component-e3797c7d23ab

2) class até então era necessária se eu fosse lidar com estados, mas pelo o que li na documentação do react posso lidar com estados com função usando hooks, certo?

Exatamente! Essa é a ideia dos chamados hooks que são uma adição nova ao React! Como a própria documentação do React diz:

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, pessoal!