Esqueça o "Create React App"! Crie Projetos React Assim...
HTML-код
- Опубликовано: 21 июн 2023
- 💜 𝗩𝗣𝗦 𝗤𝗨𝗘 𝗨𝗦𝗔𝗠𝗢𝗦 𝗡𝗔 𝗛𝗢𝗦𝗧𝗜𝗡𝗚𝗘𝗥 → codft.me/vpshostinger
🎫 𝗨𝗦𝗘 𝗢 𝗖𝗨𝗣𝗢𝗠: CODIGOFONTE
O Create React App ainda funciona mas não é mais recomendado como ferramenta para começar seu projeto em React. Em 2023 o React ainda reina no desenvolvimento front-end. Apesar de milhares de bibliotecas e ferramentas, começar um projeto do zero não precisa ser confuso. Com a descontinuidade do CRA pelo time do React, nós mostramos na prática as 3 melhores alternativas para ninguém ficar perdido.
📝 𝗟𝗶𝗻𝗸𝘀 𝗖𝗶𝘁𝗮𝗱𝗼𝘀
→ Vite: vitejs.dev/guide/
→ Remix: remix.run/docs/en/main
→ Next.js: nextjs.org/docs/getting-start...
🎙️ Compilado Podcast
→ RUclips: codft.me/canalcompilado
→ Spotify: codft.me/compiladospotify
→ Newsletter: compilado.codigofonte.com.br
🔗 Mais links do Código Fonte TV
→ codigofonte.tv
#JavaScript #FrontEnd #React 
Наука
Agora vocês me conquistaram, já acompanho de longa data mas sempre tive certos problemas com a criação do React, muito bom o conteúdo!
Vocês poderiam fazer um video falando do Yarn e do Npm, quais as diferenças, como usar, a historia dos dois, e como instalar o Yarn e o Npm?
Também tem o pnpm ^^
Yarn antes era melhor porquê era bem mais rápido que o npm, mas atualmente essa diferença de velocidade é bem pequena. E o pnpm funciona uma ram (pior que exemplo possível) , ele usa arquivos que já tem na sua máquina pra agilizar. Óbvio que essas não são as únicas diferenças, mas eram as mais gritantes.
pnpm é bem melhor, só de não usar 2TB só pra criar módulos idênticos, já vence de longe
Quando você aprender a diferença por si só, aí você talvez irá precisar trocar de instalador de pacote, vai por mim
Quando você instalar o NodeJS, o npm virá instalado nele. Se precisar instalar também o Yarn, taca um npm install yarn no teu projeto, ou até o npm install -g yarn (instalação global).
Aproveitar feriadao e começar um projeto guardado a tempos, um PWA bem complexos, vou arriscar o Next, ja que conheço a tempos mas nunca tive a chance de testar. Obg pelas sugestoes e nos atualizar sobre as novidades e rumo que as coisas estao tomando, ja que sobra pouco tempo pra pesquisar e cada video de voces é um alivio na minha vida kkkk. Thanks S2
Só queria disse que vocês me motivam muuito para continuar nessa área e querer aprender cada vez mais, sou backend (python) e mobile (flutter) à 3 anos, estou querendo aprender react já tem um tempo porém sempre que abro um projeto nunca consigo entender muito bem o que esta acontecendo. Toda vez acabo deixando isso para depois, agora com essas novas ferramentas da muito mais ânimo para finalmente aprender o front !!
Bacana, nesse exato momento estou estudando o React e já dei uma fuçada no Next, hoje eu trabalho no back-end mas estudo o front visando migrar pra essa vertente e acabei entrando nesse mundo do front bem no meio dessas mudanças na criação dos projetos.
Muito obrigada pelo vídeo, era exatamente o que eu estava procurando!
Utilizava o CRA, e estava migrando para o NextJS, pois o back era em NodeJS. Mas agora vou estudar essas outras opções. O Vite me pareceu uma boa opção. Obrigado a vocês por me ajudarem mais uma vez no meu desenvolvimento profissional.
estava aguardando há muito tempo esse vídeo! to curtindo o remix!
Ja usei CRA e é como vocês apontaram no video, não acompanhou as mudanças de mercado, lento, limitado e afins. Tive que subir recentemente (8 meses =/-), um novo front na emrpesa (visão admnistrativa) que usei o vite, bem performatico e rápido, e na visão publica (Usuário/Cliente) eu usei o NextJS. Não cheguei a usar o SWC.
Informação inovadora, excelente vídeo.
hmmm, esse vídeo saiu bem na hora que eu estava iniciando meu portfólio kkkk, já estava com npx create-react-app portfolio no terminal kkk
next é coisa linda, sempre atualizando.
Adorei o conteúdo, não sabia desses leques a mais do react boilerplate.
Sério. Eu amo vocês =3
Já uso muito o vite, mas parece Next ajudar muito mais no desenvolvimento.
Sou do react, mas o Vue tem me conquistado. Tô amando, muito bom.
E gostei do vite, to assistindo e fazendo uns testes. Até o momento tô gostando e acho q vou aderir.
O que mais estou gostando é da leveza e performance. Muito rápido.
Ótimo conteúdo, vou explorar todos.
As vezes nossa cabeça parece que vai explodir de tanta informação e tanta "sopa de letrinhas". Mas nesse vídeo a informação é tão precisa e simples, que qualquer iniciante consegue compreender
CRA já pode ser colocado no museu há algum tempo... kkkkk Já usava o Vite há bastante tempo pois com o CRA dava tempo de fazer um cafezinho enquanto ele criava a estrutura inicial do projeto. Pra fazer o build então... nem se fala. Excelente conteúdo! Parabéns pelo trabalho.
Vite é top, amo essa ferramenta
Já uso o Vite no Vue desde o ano passado. É o recomendado na doc oficial. Por isso eu não gosto de fazer nada de cabeça, é sempre bom acompanhar a documentação, nela pode haver novas técnicas e ferramentas melhores do que as que você já está acostumado (na verdade essa foi uma ótima desculpa pro fato de que eu esqueço como se faz as coisas, mas no fim das contas acaba sendo bom kkkkk)
eu fiquei um tempo sem pc a ponto de esquecer ate que tinha que instalar o node mano. to lendo um tempao a doc do react para achar onde começa no negocio. kkk me deparo com esse video salvador.
Coisa de uns 2 ou 3 meses atrás comecei estudar React e já tô estudando com Next. Me parece muito bom (eu nunca estudei nenhum framework de front antes, só tenho conhecimento de JS puro).
ameii o conteúdo!!
Vite+Toolkit+Express =SENSACIONAL
Atualmente quando vou criar algo utilizando React Vanilla utilizo o Vite, já pra aplicações maiores eu utilizo o NextJs
Astro é muuuuuuuito massa! Se puder fazer um vídeo com ele seria ótimo.
gostei do vite + react, sou iniciante nesse campo, eu tinha uma tabela que sempre estava atualizando alguns dados direto no index.html e toda hora tinha que dar f5 na pagina para ver as mudanças, com o vite react rodando quando o html sofre alteração ele ja altera também na pagina do navegador, achei bem bacana 😀
O vite é show, desde o momento que conheci abandonei o cra. Estou gostando muito também do Nextjs.
Tenho Estudado e criando no React.
Vocês podiam falar sobre a nova versão nextjs 13 ?
Atualmente tenho usado o next ou o astro em minnhas aplicações. Acho o Astro mais flexivel e independente de framework, ou podem ser usados até vários diferentes no mesmo projeto como React e Vuejs juntos por exemplo, meu site pessoal foi feito em Astro usando Vanilla.
Esse tipo de conteudo que agente procura.
Já testei o React, Gatsby e o Next. Atualmente apenas o React, mas estou estudando a possibilidade de usar o Next em projetos reais.
Blz 👍👍
Obrigado 🙏
uhu react!
Pra começar a aprender react e qualquer framework na realidade o vite é o melhor
Vou assistir agora, acabou mesmo !! Mudou !
Obrigado vocês são topss
Comecei com o react-native já usei react e estou muito interessado agora em angular
Vocês poderiam abordar também o Expo que tem evoluído bastante principalmente com o Expo-Router
Comecei aprendendo React com Vite e só uso ele, porem ainda uso com JavaScript
Já deixando like.
Estou gostando do Astro
estou começado agora com react!!!
Esse vídeo foi top mesmo. Parabéns!
Muito obrigado 😁
muito bom o video
Boas informações
Gosto do React, mas prefiro o Vue. A forma de trabalhar com ele é beeem mais clara e simples.
Spring initializr é interessante, site único, que você baixa um projeto com as dependências que você escolhe no site, pessoal do React poderia se inspirar
Só usa React quem não Vue o Angular . Video sensacional.
Clean architeture seria uma opção de criação
@Código Fonte poderia trazer no dicionário do programador "Webview"
Já trabalho com o Webflow há um bom tempo, recentemente eles lançaram uma ferramenta chamada DevLink (Meio que uma integração com o react para criação de componentes).
Minha dúvida é: Sera que é mais vantajoso aprender react ou aprender uma plataforma no code para desenvolvimento de web apps?
Único que usei até hoje foi electron. Queria aulas concisas sobre VueJs e angularjs.
Vcs poderiam fazer um video como funciona essas camadas? Tipo o nextjs eh acima do react, acima do ts acima do js. Eu to começando e essas coisas me deixam confuso.
To usando @NX plugins pra gerar apps em monorepos!
Eu queroooooooooooo trabalhar com voces pleasseeeeeeee hahaha me da uma camiseta! Meu sonho!
Gosto muito do Next, mas ainda acho que o fato do Vite ser do mesmo criadores do Vue influenciou bastante no React indicar o Next na frente do Vite
Comecei em programação há poucos meses, até agora vi somente React, vinha usando Create-React-App. Vi um projeto com Vite, achei bem interessante sim.
E já tá estudando react? Deveria pegar a base da vanilla primeiro
nextjs é fodão demais, ponto pro react botar a responsa pra eles, os caras inovam sem medo e só botam features fodonas na parada
Uma dúvida como iniciante :
Cada forma de criar um projeto no React também será uma forma diferente de criar as rotas ?
Que tal um vídeo falando do Rescript?
O vite tem um jeito de fazer as rotas que não vai mudar toda a semana como no Ract Native?
Já utilizei react e AngularJS e Angular da versão mais recente e gosto mais do react e em segundo lugar dessa lista AngularJS
Cadê o create-t3-app? ele é construido em cima do nextjs feito pelo theo, e adiciona várias coisas por padrão como tRPC
Uns 2 meses atrás +- a turma do FB publicou uma documentação oficial do react. Eu chamo de a publicação da treta. Praticamente esconderam a possibilidade de usar react sem ser em framework, depreciou o CRA (corretamente) e ignorou a existência de muitas soluções da comunidade como o vite, que tem grande força na comunidade react. O uso de react sem framework é e continuará sendo importante principalmente para projetos de iniciantes, pequenos projetos de rapida construção e/ou que não necessitam de rodar em um servidor.
Pra quem tá indo pro nextjs pode até tomar algum susto. Porque usar o react é bem mais fácil comparado ao next que introduz bem mais complexidade ao código. Só que como resultado, traz também um desempenho maior.. Cabe ao desenvolvedor escolher se vale a pena pra ele ou nao
Minha preferência é React com NextJS, pois é o mais completo e avançado da atualidade, já gostei de VueJS tbm, mas não vi grandes evoluções nos últimos tempos, então hoje acho que o Angula está melhor que o VueJS na minha opinião
❤❤❤❤
Amo php mais estou aprendendo js e python
👏
Eu tenho um backend com spring boot e tava querendo fazer um front com react. É melhor usar o react com vite ou usar nextjs? Alguém consegue dar uma luz?
Para React-native sem o expo temos alternativa?
Vue s2
um acoisa estranha, aqui pra mim o logo nao gira FICA ESTÁTICO ( parado ) sabem o motivo disso por favor ?
Opa, eu acabei de aprender que o React.Js não é mais reconhecido como Framework no Brasil, e sim uma Lib.. - pelo visto eu agora só posso trabalhar fora do Brasil onde ele ainda é um framework.
Sim, uso react e em breve começo o curso de Angular
Confesso que eu não quero ter que aprender next kakaka
foi tantos meses fazendo projeto em react que parece uma facada ter que aprender next
Nunca consegui roda react native na minha máquina sempre tive problema nesse ambiente de desenvolvimento
Faz outro vídeo sobre
Usei o vite pela primeira vez pelo git-bash, mas por algum motivo ficou super bugado... A seleção das configurações iniciais não funcionou muito bem, mesmo descendo com a seta do teclado, a interface não respondia aos comandos. Alguém sabe dizer o porque?
estou fazendo um curso de desenvolvimento e acabamos de concluir o modulo front e hoje eu soube que fomos a última turma a aprender CRA... as próximas já vão migrar pro Next.... Preciso de um tutorial de Next pra me atualizar, que axar....
O Next realmente será uma mão na roda para projetos maiores e escaláveis, porém como você acabo de aprender com o CRA para aplicações pequenas utiliza o Vite como mostrado no vídeo, ainda mais que você acabo de aprender React você poderia continuar com o mesmo conhecimento e o Vite também é ótimo para projetos pequenos e grandes, lógico que o Next é mais recomendado para projetos maiores, porém nada impede de se usar o Vite, porém por hora recomendo utilizar o Vite pro seu caso por está aprendendo React agora, Next irá ter algumas coisas diferente que poderá te deixar confuso (ou não)
Uso react a 3 anos, mas estou seriamente pensando em migrar para o angular por ter menos concorrencia shdashdsahdahs.
3 anos e 0 vagas
Qual o nome desse terminal usado ?
Vocês podia falar sobre a nova linguagem Mojo, que vai operar como um novo Python.
Conte mais sobre isso
Boa tarde mestres do CDF. Bom, vamos lá... o que eu penso sobre soluções de software... Sei que muita gente aqui pode não concordar mas penso que frameworks não deveriam ser tão intrusivos nas soluções. Para ser mais claro, nossa soluções não deveriam depender de frameworks em suas camadas de negócio. Quando nossa solução depende para funcionar de um ORM ou outra ferramenta de terceiros, quando uma solução tenta ser encaixada num framework, estamos além de aceitando um acoplamento arriscado, apostando em cartas que não estão em nossa mangas. O que tenho visto muito hoje é uma excessiva aposta em Frameworks, assim como ferramentas de terceiros. De nada adianta frameworks se as camadas de negócio da aplicação e das entidades não estiverem bem definidas e protegidas. Um framework, deveria se plugar a nossa aplicação e não ser a RAZÃO DE SER de nossa solução. Não quero dizer com isso, que não devemos usar frameworks mas que eles deveriam apenas tocar as fronteiras de nossa aplicação, seja como atores primários ou secundários. Desta forma, o ciclo de vida do sistema seria mais longevo e o custo do mesmo se pagariam com o tempo (caso cumpra o seu dever de entregar os requisitos do negócio) devido a mudanças mais flexíveis. Mudanças de frameworks ou desusos ( como foi o caso reportado ) seriam contornados na fronteira entre a camada de devices e os use cases. Espero ter contribuído com o canal.
Estou querendo dar os meus primeiros passos na programação, mais confesso que não sei por onde começar. Fiquei desempregado recentemente e quero aproveitar esse momento para poder iniciar nessa área. Se alguém por favor poder me orientar agradeço de coração. Esse casal de canal são tops demais, se puderam me orientar também desde agradeço muito mesmo. Parabéns pelo canal
Tenta começar com o básico, aprenda lógica de programação em alguma linguagem amigável, python por exemplo, depois vai aprendendo o básico do front end, html, css e JavaScript, tenta não pular etapas ou virar desenvolvedor em 3 meses, atropelando todas as etapas, vai se familiarizando com o básico, criando projetos, até o ponto de se sentir confiante a aprender ferramentas novas, tipo react, tailwind, node.js e etc... com o tempo e com muita dedicação vai da tudo certo, espero ter ajudado de alguma forma, e lembre-se da frase mais clichê que já escutei, a pressa é inimiga da perfeição, a cada etapa tente buscar o máximo de conhecimento, pois te ajudará lá na frente
@@rychardryan2816 Muito obrigado de verdade, seu conselho tem peso ⚖️ de ouro. Foi o único até agora a ajudar. Deus te abençoe imensamente valeu.
Vue all the way
pq no vite vcs digitaram "npm create-vite " e no remix "npx create-remix"?
O npm install é usado para instalar dependências permanentemente no seu projeto, enquanto npx é usado para executar pacotes temporariamente, sem a necessidade de instalá-los localmente.
devo deixar as pastas com a extensão js ou jsx ?
As extensões são usadas para os arquivos. Os arquivos JS e JSX são ambos usados para escrever código JavaScript, mas eles são usados de maneiras um pouco diferentes.
Arquivos .js são arquivos JavaScript padrão. Você pode usar qualquer recurso de JavaScript dentro deles, incluindo sintaxe ES6, operações matemáticas, manipulação de array, expressões regulares, etc.
Arquivos .jsx, por outro lado, são usados no React para escrever código que combina JavaScript com HTML. JSX significa JavaScript XML. Esses arquivos permitem que você escreva elementos HTML em seu código JavaScript. Isso torna muito fácil criar e manipular a interface do usuário em seu aplicativo React, pois você pode criar elementos HTML dinamicamente usando JavaScript, mas com uma sintaxe que se parece muito com HTML padrão.
@@codigofontetv
Muito obrigado
A melhor opção para um iniciante deve ser vite ou um framework nextjs ?
Vite com certeza, Nextjs é um framework feito pro React, então é aconselhável aprender bem a base
onde eu compro esse moletom do Código fonte?
Por enquanto não temos ele disponível para venda. Quem sabe se tivermos bastante interessados a gente faz mais. :D
Mas agora...o que usar? React com vite ou react com next? Fiquei com essa duvida.
Depende ...
Minha dor é participar de um BootCamp que ensina com CRA, extremamente desatualizado. Entre outras coisas fora do mercado.
isso é windows 11 com cmder?
🎯
qual é a melhor maneira de ganhar dinheiro com negociação de criptografia?
sempre usei o vite, mil vzs mais rapido que o create react app
e como um júnior, eu estudo qual? 😢
O Vite é mais parecido com o CRA: é pra mim o melhor para fazer essa transição.
Só eu que acho ese "use client" do Next meio zuado? Parece só um texto jogado no código...
Uso de boa, mas é só uam observação.
Crie projetos assim `flutter create`
Prefiro React, mas trabalho com Angular.
Ainda to no velho e cansado create-react-app
eu prefiro Angular, mais consistente.
Aqueles módulos e rotas são de doer...uso ele mas aquilo enche o saco