Executando verificação de segurança...
2

React, Existe uma maneira verdadeiramente eficiente para se aprender em 2023 ?

Sou Programador Angular/Ruby, tenho focado e trabalho com essa tecnologias nos ultimos 3 anos. Gostaria de expandir meus conhecimentos e ir para o React, porem tive uma dificuldade de encontrar material gratuito, atualizado.. Ex, hoje para angular qualquer um pode ver os cursos da loiane no youtube e conseguirá entender todo o framework sem dificuldade. Existe algo semelhante para react ? Existe algum roadmap ?

Carregando publicação patrocinada...
1

Documentação oficial: A documentação oficial do React é uma excelente fonte de informações atualizadas e abrangentes. O site oficial do React (https://reactjs.org/) contém tutoriais, guias e exemplos que podem ajudar você a entender os conceitos fundamentais e aprofundar seu conhecimento.

1

Então, eu passei por lá, fiz alguns tutoriais basicos etc... O que fiz foi eu iniciar pelo tópico LEARN REACT > INSTALLATION > Start a New React Project. Eu desejo criar um site completo com react, e a documentação nesse ponto já me sugere fazer uso do NextJs/Remix, por exemplo. Se eu decidir seguir com NextJS, eu sou redirecionado para o site do next.js e assim inicio todos os tutoriais por lá... o que me parece errado.

A minha preocupacão é em como estão a maioria dos códigos em produção hoje, maioria dos projetos já são usam next, remix ou gatsby ? Exemplo de duvidas que não encontrei respostas claras ainda. Como as empresas estão trabalhando com roteamento, guards e organizando a estrutura do projeto?

1

Eu fiquei meio confuso também, pois antigamente o pessoal iniciante criava um projeto usando create-react-app, mas ele foi descontinuado por ser lento/desatualizado e agora a documentação recomenda iniciar um projeto já com um framework, como next ou remix, como você já disse. Por outro lado, é bem difícil ter que aprender React e mais um framework ao mesmo tempo (já disse que o Next.js mudou radicalmente com a atual versão 13?).

Se você não quiser usar esses frameworks por enquanto, você ainda pode usar o create-react-app para focar só no react, só não vai ser a melhor maneira de colocar em produção.

O React é apenas uma biblioteca e só tem o essencial para gerenciar estados dos componentes e aplicar as mudanças no DOM de uma maneira eficiente, ele não tem um gerenciador de rotas, não te faz organizar a estrutura do projeto, tudo isso você só consegue instalando módulos ou usando um framework como Next.js ou Remix. Então não vai dar para escapar deles.

1
1
1

Não se perca, você ainda consegue criar aplicativos react com o vitejs. Depois que você se sentir confortável com react, pode escolher um framework.

1

Eu diria que as terminologias (apesar de bem discutíveis) de framweork e biblioteca talvez responda sua pergunta.

O Angular tem uma forma 'oficial' de lidar com quase tudo. Então, por exemplo, rotas, estrutura de pastas e testes tem a 'forma Angular' de resolver. Já o react não tem e, portanto, voce vai encontrar pessoas e empresas lidando com rotas, estrutura de pastas, testes e etc de forma bem diferentes.

Já o next tem a 'forma next' de resolver essas coisas como estrutura de pasta, rotas e etc.

Da para encontrar roadmaps de react como o roadmap.sh que tem um especifico de react. Mas eu concordo com o Pedro que ja respondeu aqui que a documentação do react cumpre muito bem seu papel e tomaria cuidado com cursos, roadmaps ou o que seja que dizem que são o jeito certo de lidar com coisas mais abrangentes.

1

Hoje a melhor linha a seguir se quer trabalhar com React é o NextJS. Como já foi dito aqui, o React não é "opionionated", o que significa que ele não te diz como deve estruturar teu projeto, não fala muito em boas práticas de organização e padrão de código. As sugestões do manual são na maioria das vezes sugestões para evitar bugs relacionados a detecção de mudanças e ciclo de vida do componente.

O NextJS já é levemente mais "opionionated", mas ainda te dá ZERO ferramentas de UI. A partir daí você tem que escolher um UI Kit pra usar, e muitos deles NÃO não prontos para uso no react, por exemplo o atual tão famoso tailwind (que na minha opinião não é um UI kit, e sim um CSS kit, pois não há uma classe "button" por exemplo para estilizar um botão. Ao invés disso, em cada botão você precisa colocar uma série de classes:

<button
      type="button"
      className="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
>
    Edit
</button>

Isso acaba te obrigando a criar um componente Button que comporta o estilo do botão na tua aplicação.

Isso foi o que mais me afastou do React até hoje. Eu sempre preferi usar o Angular e Angular Material por oferecer essa simplicidade (embora haja contrapartidas como a maior complexidade interna).

Mas voltando para sua pergunta:

Aprenda React puro para entender os conceitos de state, hooks e etc. Depois escolha um framework para estudar, como disse, NextJS é um bom caminho. Sobre o UI kit, depende muito do seu gosto, eu gosto do MUI pois fornece muitos componentes bem funcionais.

Você em algum momento vai se deparar com a necessidade de lidar com formularios, algo que não tem pronto nem no React nem no NextJS. Eu recomendo estudar e usar o React Hook Form embora ache a curva de aprendizado bem lenta. Para usar com o MUI, existe o react-hook-form-mui.

Espero ter ajduado, e boa sorte no aprendizado!

1

É, vou seguir esse caminho mesmo... entender bem o ciclo de vida e estados dos componentes e depois escolher um framework.
obrigado

1
1
1

É esse tipo de coisa que me deixou confuso. esse curso tem 2 anos, de fora, eu diria que esta desatualizado janque react mudou muito...

1

Tive essa mesma dúvida algum tempo atrás, e depois de tentar vários caminhos cheguei nesse livro aqui:
https://www.amazon.com/Road-learn-React-pragmatic-React-js-ebook/dp/B077HJFCQX

O autor atualiza constantemente, e se você comprar a versão impressa ganha também acesso à versão online, basta enviar um email para ele.
Eu particularmente prefiro livros físicos, por isso comprei a versão impressa. O legal é que tem muito espaço para fazer anotações.

Até o momento não vi didática melhor.

1
1
1

vou dar uma olhada. estou pensando em fazer isso mesmo. começar com framework pra der mais divertido, e ir aprofundando em algumas questoes com o tempo.

1

Cara, dado o seu nível (programador Angular), você já não conseguiria dar seus passos através da documentação oficial não?

Eu acho que sim.

Algum curso ou tutorial entraria apenas como auxliar (até o GPT pode ajudar nisso), mas acho que você consegue se virar "sozinho" com a documentação.

1

Isso, perguntei aqui sobre isso pois a documentação me levou para o NextJs, eu sempre aprendi criando projetos, e direto eu já bati na questao de rotas e formularios. Pesquisando encontrei varies format de se resolver esses problemas, por isso vim consultar a galera atualizada.

1

Cara tive essa mesma dúvida no inicio do ano, fiz até um post aqui perguntando pro pessoal o que seria melhor React ou Angular, pessoal me ajudou pra caramba, inicialmente comecei estudando React puro e me vi muito travado sem evoluir, foi aí que comecei a ler a documentação do NextJs e comecei a desenvolver alguns projetos, não tenho muita experiência pra servir de base mas o NextJS me ajudou pra caramba a me desenvolver no React.

1
1
1

Gratuito não conheço. Mas pago tem o Ignite da rocketseat, é uma especialização de typescript que inclui react, react native, node e elixir. VOcê escolhe uma das quatro trilhas e foca seus estudos nela.

Comecei a fazer em desembro e dei um salto, até recebi promoção em abril e ainda nem cheguei na metade da trilha de react. É caro mas o curso já se pagou, vale cada centavo, ultima atualizaçào dos conteúdos foi em 2022, e eles ainda tão gravando novos projetos para lançar lá.