Criando um aplicativo completo com React Native 👌🤯
HTML-код
- Опубликовано: 30 сен 2024
- Nesse vídeo você irá aprender criar seu primeiro aplicativo com React Native e JavaScript passo a passo completo! 🔥
👉 Comando para criar projeto:
npx create-expo-app nomeapp -t
Ali nomeapp coloca o nome do app
👉 E ai na lista de template só selecionar: (SELECIONE a opção Blank)
-- Blank ✅
🏆 (INSCRIÇÃO ABERTA) Se você quer levar a sua carreira ao próximo nível, criar aplicativos, sites do zero a projetos profissionais e sair pronto para o mercado, então não perde essa oportunidade:
✅ Nova turma Fabrica de Aplicativos (VAGAS LIMITADAS):
bit.ly/fabricad...
- Link aula configurando EXPO do zero: • Configurando React Nat...
- Link do layout: bit.ly/layout-...
- Link da logo: bit.ly/3EAvTc5
SEJA MEMBRO:
/ @sujeitoprogramador
![Cody Johnson - I'm Gonna Love You (with Carrie Underwood) [Official Music Video]](http://i.ytimg.com/vi/yy9PuYMU29g/mqdefault.jpg)
Mat, ta muito show esse conteúdo! Só uma dica para as próximas vezes, deixa o vídeo com os frames de cada parte. Exemplo: Iniciando projeto, Explicando pastas, Estilizando Aplicativo... As vezes as pessoas querem voltar e tem q ficar caçando na timeline do vídeo.
O vídeo está sensacional. Objetivo e muito bem explicado! Meus parabéns!
Galera pediu, e eu fiz usando IA. Segue os "Key Points" do vídeos:
00:01 Criando uma aplicação completa com React Native
01:42 Criando um aplicativo React Native usando o Expo
05:15 Compreensão da estrutura de pastas do projeto e sua configuração
07:03 Criando um componente react chamado app
10:50 Passando estilos inline e organizados para o View em React Native
12:44 Centralizando conteúdos usando Flex Box no React Native
16:19 Instalando e executando o projeto no React Native
18:01 Estilizando a área principal do aplicativo, incluindo margens, largura, cor de fundo e raio da borda
21:32 Criando um aplicativo completo com React Native
23:11 Criando um projeto dinâmico com React Native
26:28 Vinculando o valor do slider ao estado
27:57 O valor do slider é passado dinamicamente para o estado de nossa aplicação.
31:06 O código gera uma senha selecionando caracteres aleatórios de uma string fornecida
33:01 Gerando uma senha segura usando React Native
36:13 Criando um novo componente de modal no React Native
37:57 Criando um aplicativo completo usando React Native
41:15 Criando um aplicativo React Native completo com estilização
43:08 Criar um botão ao redor do campo de senha usando o componente TouchableWithoutFeedback
46:40 Usando Flex Box e CSS, podemos posicionar itens lado a lado e dividir o espaço igualmente.
48:26 Criando um aplicativo React Native completo
51:50 Implementando funcionalidade de fechamento de modal e geração de senhas
53:28 Instalando Expo Clipboard e React Navigation
56:40 Criando um aplicativo React Native completo
58:25 Gerar uma senha e copiá-la usando React Native
1:02:00 Criar uma configuração de rota com uma guia.
1:03:54 Criando um aplicativo completo com React Native.
1:07:33 Adicionando ícones à tela de senhas no aplicativo React Native usando a biblioteca expo/vector-icons
1:09:10 Criando funcionalidade para salvar senhas usando Hulk
1:12:44 Criando um aplicativo React Native completo
1:14:19 Adicionando e removendo itens de uma lista no React Native
1:17:44 Salvando senha gerada na loja
1:19:33 Construindo um aplicativo completo com React Native
1:23:14 Criando uma funcionalidade de foco de tela no React Native
1:24:57 Corrigindo a funcionalidade de salvar
1:28:12 Criar um aplicativo React Native completo
1:29:54 Criando um aplicativo React Native completo
1:33:29 Criando uma aplicação completa com React Native
1:35:14 O aplicativo usa armazenamento local para dados, permitindo aos usuários fechar e reabrir o aplicativo facilmente.
Como c fez? Rsrs
@@saulotarsobc Extensão chamada "Merlin AI"
So não aprende quem não quer
Parabéns pelo vídeo. Mas estou com um problema. O meu projeto está sendo criado com TypeScript e não JavaScript. Como faço para criar com JavaScript?!
Confere na descrição do vídeo 🤟🔥
Monstro demais, minha ideia de TCC para o curso de Desenvolvimento de Sistemas de Etec era um banco de senhas igual o Bitwarden, e estava perdido em como fazer um em React Native, e seu video apareceu na hora certa kkkkkk vlw mano
Alguém também o app buga quando mexe no slider, usando o apk em dispositivo físico?
Top demais mano, vou deixar salvo aqui pra assistir hj a noite
Boraaa 🔥
Não encontrei o link do vídeo de configuração, pode me enviar ?
Em 28:46 uma dica para passar o slider de 1 em 1 também pode usar:
step={1} // Define o incremento para 1
ou ajuste para um valor de sua preferência.
show de projeto fiz até o final! testei e funcionou tudo usando o Expo. Agora gerei um apk e instalei no celular, más quando clico no botao slider para diminuir ou aumentar a senha dá falha e fecha o app. Se nao clicar no slider , tudo funciona normal.
Alguem teve o mesmo problema? Quando eu gerei o apk, o app cracha quando eu uso o slider pra escolher o tamanho da senha.
quando crio o projeto não vem o arquivo app.js, como corrigir?
@@hugomeyer6035 confere o comando para criar o projeto que coloquei na descrição 👌🔥
O expo teve atualização, para fazer um novo aplicativo é com expo init ainda?
Tô fazendo esse tutorial em 07/2024, e quando eu crio o app ele usa o typescript por padrão, alguém sabe como muda pra javascript?
@@FelipeSoares-t1f opa o comando para criar com Javascript está na descrição do vídeo 🔥
@@Sujeitoprogramador Obrigado pela atenção😅
Eu tentei usar para cria um socket para uma comunicação UDP em broadcast e não consegui no expo de jeito nenhum, mesmo com o expo prebuild, com a lib react-native-udp, que pelo expo install ela é instalada, qual o macete para integrar essas libs, no caso qual configuração que devo mexer? é no app.json? se alguém puder ajudar agradeço.
Por que tem de ter o QR code ? Só complica para as pessoas que não entendem muito de "dança de clicks"....
Sou iniciante na area e quero criar um app, tudo deu certo ate chegar no vs code, onde não consigo editar usando aspas no App.js :( tentei tudo, pode me ajudar por favor?? Aprendo mais com seus videos do que com a faculdade :(
Conseguiu resolver?
@@Politicadebar consegui sim 🙏🥰
CARA QUE LEGALLL. ja posso dizer que sou desenvolvedor mobile. :) obs sou dev react.
O meu ta criando em typescript, sem app.js 😥
Opa beleza? Tem o comando na descrição do video para criar como usamos :)
Ganhou mais um inscrito! no próximo projeto bora criar um Tinder kkkk
Matheus, o meu Slider não tá funcionando. Aquele input que usamos para alterar o numero de caracteres não funciona. O que pode ser?
hope matheus, sdds projetinho pae.
Awesome! rererererere... Parabéns! a escolha desse projeto foi excelente haja visto que ele aborda várias e diferentes funcionalidades que podem ser aplicadas no dia a dia! Parabéns, mesmo!
Muito bom seu video, me ajudou a começar a desenvolver. Obrigado
1:16:17 no caso do Filter, ele não irá acumular dados na array? mesmo que seja filtrado, eles não continuarão existindo? Não seria melhor usar uma função de deletar o item da array?
Muito boa aula, seria legal vc disponibilizar o código para que possamos fazer a comparação e consolidar o conhecimento, gratidão....
Galera o meu não tá aparecendo o App.js, apenas uma pasta app com 3 arquivos react, o que faço?
Professor, me diga, por favor, qual fonte está usando no vscode?
quando eu crio o aplicativo, simplesmente o App.js não é criado na pasta
Show, didática foda. Eu sei que o mobile é seu forte mas seria massa uma versão web com react js 😁
Temos projeto com React JS web e também no curso tem toda parte web também 🔥
Quando eu gerei o app pela linha de comando nao apareceu app.js e sim index.tsx , tem alguma diferenca?
ensina a colocar splash no lugar adaptiveIcon quando abro com expo aparece a imagme legal quando abro no android aparece uma imagem pequena
faz da erro no app
Ao abrir o projetp no vscode nao encontrei o arquivo "App.js"
Olá Matheus joia?
Consigo criar um app com React Native conectando ao banco mysql ?
Você pode conectar mas via requisições http, você ter um backend com banco de dados e ai conectar via requisições http com essa api no app
Vamo ver se agora eu aprendo
Hahha tamo junto 🔥
Mano vc me inspira demais a aprender cada vez mais.Você é muito fera!!!!
Fui fazer esse tuto agora, mas o expo/react native está todo em typescript, nao funcionam os códigos, daria pra atualizar Mateus ? Pq seu tutorial ficou top
Na verdade não teve atualização eles apenas incluiram mais um template inicial para começar mas ai só criar o template default:
npx create-expo-app nomeapp -t
Ali nomeapp coloca o nome do app
E ai na lista de template só selecionar: (SELECIONE a opção Blank)
>> Blank
@@Sujeitoprogramador Ah, entendi, valeu mesmo por esclarecer. Outra coisa, onde acho o link dos teus cursos pfv ?
@@Sujeitoprogramador Mateus, testei aqui oq vc falou, deu certinho, agora posso fazer seu tuto, super obrigado
Muito legal! Primeiro contato com react native. Aprendi bastante.
30:19 eu
O meu não está aparecendo mais esses App.js entre outros... está tudo diferente oq faço?
baixei umas imagens do google pra testar a importação, mas sempre elas ficam muito grandes
show de bola!
uma feature nova pra aprimorar os estudos além de mostrar/esconder a senha é adicionar o firebase.
vrdd mas o osso é que tem que criar um atela de login tambem pra o firabase buscar os dados so pra o usuario altenticado mas vou bem fazr isso mesmo
Muito bacana, adquiri seu curso em outra plataforma, sua didática é muito boa! parabens. Este curso é o mesmo que ta na U***? ou é mais atualizado?
Com backend e deploy na play store?
Aprendo mais no youtube do que na faculdade kkkkkk
Parabens voce e um excellent professor obrigado !!
Muito obrigado amigo esta me ajudando muito!
❤
Matheussssss, que thema é esse?
Uso o tema Dracula
Nesse projeto poderia usar o typescript invés do js?
Estou sofrendo para aprender essa materia na faculdade .
mano, ele manja muito, vale a pena comprar o curso dele
Didática dele é Excelente!!! Super recomendo 😊
Tamo junto e bora pra cima 🔥
Ele é muito bom
Achei muito interessante o projeto e a explicação.
Por não ser muito conhecedor do React-Native tenho algumas dúvidas:
1) Percebi que o uso do ";" (ponto e virgula) não foi , ao longo do projeto, padronizado. Ora foi utilizado ora não. Por quê?
2) Em se tratando de componentes, o nome do arquivo não deveria conter o nome do componente com a inicial em maisúscula como se faz em React? Por quê razão usar "index.js"?
Obrigado.
nao sou expert, mas em js o ';' não é obrigatório na linguagem, ficando opcional para o desenvolvedor escolher utilizar ou não para padronização. em linguagens fortemente tipadas c#, java a IDE não deixa ficar sem.
Sensacional, valeu!!!
MUITO BOM ! Parabéns por sua capacidade de ensinar, pelo conhecimento demonstrado e pelo carinho que mostra ao "descer" ao entendimento dos aprendizes ! BOM professor ! É um FESTIVAL... de sabedoria ! Fiquei grudado nesse assunto e vou tentar fazer uma app qualquer, para ver se consigo pôr em prática os conhecimentos adquiridos com você ! Até já tenho uma ideia: uma app RESIDENTE no meu celular, com uma grelha com 4 colunas e 3 linhas (para armazenar... "Gasto em GASOLINA", "Gasto em RESTAURANTES", "Gasto em SEGUROS", "Gasto em TABACO". Com TITULOS na 1ª linha. TOTAL de cada COLUNA, a apresentar na 2ª linha. Despesa no dia(se houver... senão apresenta a ULTIMA), na 3ª linha Até pode ser que haja alguma aplicação que faça isso (ou melhor), mas QUERO VER se chego ao fim deste projeto. Graças a você ! Como ainda nem comecei... PARECE que vai ser fácil.
Voce é incrivel como professor, muito obrigado pelo seu conteudo
No meu não aparece o app.js
O que você acha melhor, TypeScript ou JSDoc anotações ?
Entre as duas typescript
@@Sujeitoprogramador Por que? 🤔 Estou confuso, você só usa js no seu canal, então pensei que você escolheria JSDoc, também não sei como configurar o JSDoc 😅😅😅😅
@@arozendojr questão de praticidade, mas para projetos maiores, complexos ou com mais pessoas ai typescript ajuda bastante, até no curso mostramos isso com os projetos maiores usando typescript
Se quiserem projeto com typescript aqui no canal posso trazer também 🔥🔥
@@Sujeitoprogramador Usando TypeScript já usar TDD já no início, seria muito bom. Maioria dos cursos, só falam de teste no final do curso, 🤔🤔🤔 ai vem na cabeça como aplicar no código já passado, além das vezes o código mostrado precisa de modificações que complicam os teste, ai a gente que acompanha o curso fica com aquela cara 😅😅😅😅😅😅
@@Sujeitoprogramador Faz com TS sim, faz igual o cabeludo falou, usa teste unitários já de inicio
links não funcionam mais
Parabéns! Ótimo conteúdo! Gostei da velocidade tbm, direto ao ponto!
Ainda não terminei mas já gostei. Excelente didática.
Vídeo muito bom. Bem didático! Parabéns. Eu tenho uma dúvida, com relação a subformulários, ou nested form. Algum exemplo/tutorial a indicar? Obrigado, querido!
Sensacional! Algumas coisas estão diferentes, provavelmente por versão nova do Expo, porém a base está aí!
A sua didática é muito boa! Obrigado por compartilhar.
tem a aula anterior a essa
muito bom o vídeo
Caramba mt bom o video! Cai de paraquedas pq o youtube recomendou, normalmente vejo construção de sites com react ou so com html css js msm, nao sabia que para criar um app de cel tinha se usa varios atributos parecidos com o desenvolvimento web kk
Otima aula! Tem algum video com dicas de bibliotecas mais usadas para facilitar desenvolvimento? Plugins tbm
@@skyla___ temos sim aqui no canal 👌👌
por algum motivo o meu aplicativo ficou em typescript ao inves de java script e nao tem o app.js somendo um index.tsx... tem algum problema? como eu faco pra ficar igual o seu?
então mano, eu tive esse problema tbm, mas a solução é o seguinte, no react podemos criar aplicações usando templates, o matheus esqueceu de avisar isso no video, então vc vai usar o seguinte comando: npx create-expo-app -t blank. O "-t" significa que vc quer selecionar um template e o "balnk" é o template mais basico (usado no video)
Top!
Mesmo utilizando a versão lts do nodejs, utilizei o mesmo comando e mostrou vários arquivos "deprecated". É normal isto?
Excelente vídeo, aprendi muito! Obrigado!!
Mais um conteúdo top, futuramente poderia trazer um app de controle de finanças
No curso dele tem!
Vídeo God canal sempre bom
Tamo junto 🔥
Parabéns por sua dedicação e paciência na construção desse conteúdo de ensino.
Uma dúvida...
Caso eu queira gerar uma senha aleatória sem repetir os caracteres, como seria?
Forte abraço.
muito bom... este mesmo codigo consigo gerar tanto app pra mobile, smart tv e website ? isto é o multiplataforma nao sei se existe esta possibilidade com mesmo codigo ReactNative fazer web, mobile e tv? ou indica outras tecnologias?
Top Top Top, comprei o curso e só tenho a agradecer mesmo !!!!
Matheus Fraga sabe muito
Seja bem vindo a turma e bora com tudo evoluir ⚡️⚡️🔥
que aula sensacional, incrível!!
Excelente! muito bom!!
O curso criando aplicativo do zero ao avançado na Udemy tá atualizado? Queria comprar o seu próprio curso, mas por enquanto tô sem dinheiro só consigo comprar o da Udemy
uma duvida, sempre que vc estabelece o tamanho de algo, esse tamanho esta definido por padrao em pixels? pq em css sempre é colocado a grandeza e nesse caso não.
Mat, como eu faço para rodar a aplicação do Expo usando um PC cabeado (sem wifi)?
Show mano muito primeiro APP que faço e já é muito show de bola
Professor em 1:07:07 acho que o senhor fez um corte, e tirou como foi feito App.js. Ao menos nao to conseguindo achar no video a continuacao dele.
me salvou!!!
Como que exporta isso pelo amor de deus homem? quero publicar na playstore e n consigo tirar meu app do vs code
Tem video aqui no canal gerando o arquivo
Matheus, sou aluno, deixo aqui registrado meus parabéns! Explica muito bem, de forma clara e objetiva, além de disponibilizar muitos conteúdos grátis! 👊🤝👍
Não tem como reutilizar um estilo de um componente para outros componentes, como se fosse uma classe no CSS?
pessoal se o programa de voces estiverem dando erro como foi meu caso, tentem mudar no Routes.js o import home apenas tirando o { } dele, o meu estava dando erro e consegui arrumar assim
ola otima aula , voce teria alguma aula explicando como solicitar no react native a mesma senha de abertura padrao do celular a mesma quando liga , agradeço ou o caminho da pedras kkk
]
Mano o jeito que você ensina é foda DEMAIS. Continua assim que vc vai longe mano :)
valeu pelo projeto man!!
Conteúdo muito top e didático. Aprendi bastante =D
Gostei muito boa aula, de todas que apanhei nenhuma foi tao directa como sua
para mim fala que tem q escrever npm run reset-project, mas nao sei aonde devo escrever isso
no terminal, vai no vscode e usa o atalho ctrl + shift + ' se tiver no windows
cara quando eu instalo um apk gera pelo expo no meu celular ele instala normal ai quando abro, ele logo sair em seguida o que pode ser ajudar ai por favor
Kd a aula de configuração kk não achei o link
@@rud_arttattoo link na descrição do video
Como que faz pra cofigurar a splashscreen?
Powershell hoje em dia com autocomplete embutido e o cara usando ms-dos puro kkkk corajoso esse ae
Cara, foi muito bom. Primeiro app e tudo funcionando direitinho, me deu várias noções de um monte de coisa. Obrigado