React Native na Prática: Apps para iOS e Android [2023]

Nessa aula vamos criar nosso projeto.

Nessa aula vamos instalar nosso aplicativo no emulador do Android.

Nessa aula vamos instalar o nosso aplicativo em um aparelho físico Android.

Nessa aula vamos instalar o aplicativo no emulador do iOS

Nessa aula vamos criar o nosso App.tsx e remover o que vem no nosso projeto.

Nessa aula vamos configurar o Eslint, Prettier e o pre-commit.

Comando para instalar as bibliotecas:

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-simple-import-sort pre-commit prettier

Código para configurar quando salvar o arquivo:

{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": [ "javascript" ] }

Github: https://github.com/juliossena/vendas-online-app
Commit: https://github.com/juliossena/vendas-online-app/commit/f4596e37d272cafbfe8eda0e2a8ef14937c47e77

Nesta aula vamos fazer a instalação do styled-components.

Nesta seção, vamos explorar os Props e Hooks básicos do React, que são fundamentais para o desenvolvimento de aplicações web modernas.

Mas, antes de começarmos, vamos entender o que são Props e Hooks.

Props, ou propriedades, são uma forma de passar dados de um componente pai para um componente filho no React. Eles permitem que os componentes sejam personalizados e reutilizados de maneira fácil e eficiente.

Hooks, por sua vez, são funções especiais que permitem que você use recursos do React, como estado e ciclo de vida, em componentes funcionais. Eles são uma forma de adicionar recursos de classe a componentes funcionais, tornando-os mais poderosos e flexíveis.

Neste vídeo de introdução, vamos dar uma visão geral dos conceitos de Props e Hooks e explicar por que são importantes para o desenvolvimento de aplicações React. Então, junte-se a nós nesta jornada de aprendizado sobre React!

Neste vídeo, vamos explorar o conceito de Props no React e como utilizá-los para criar componentes reutilizáveis e personalizáveis.

Props, ou propriedades, são um dos recursos mais importantes do React. Eles permitem que você passe dados de um componente pai para um componente filho, de forma que o filho possa ser personalizado e reutilizado em diferentes contextos.

Durante este vídeo, vamos começar definindo o que são Props e como eles funcionam no React. Em seguida, vamos mostrar exemplos práticos de como criar e passar Props para componentes.

Você vai aprender como passar Props como parâmetros para componentes, como acessar e utilizar Props dentro de um componente e como definir a tipagem das props para garantir que os dados passados são do tipo correto.

Também vamos mostrar como utilizar Props para criar componentes reutilizáveis que podem ser personalizados para diferentes contextos, tornando seu código mais modular e fácil de manter.

Ao final do vídeo, você terá uma compreensão completa de como usar Props no React e como eles podem ser utilizados para criar componentes flexíveis e personalizáveis. Então, junte-se a nós nesta jornada de aprendizado sobre Props no React!

Bem-vindo(a) a este vídeo que vai te ensinar sobre o useState no React!

O useState é um dos Hooks mais utilizados no React e é responsável por gerenciar o estado de um componente. Ele permite que você crie e manipule estados dentro de um componente funcional, sem precisar transformá-lo em uma classe.

Durante este vídeo, vamos explicar o que é o useState, como utilizá-lo e qual é sua sintaxe. Vamos começar mostrando um exemplo básico de como criar um estado e atualizá-lo utilizando o useState.

Durante todo o vídeo, vamos explicar o que está acontecendo no código, para que você possa entender como o useState funciona em cada exemplo. E vamos mostrar como o useState pode ser uma ferramenta poderosa para gerenciar o estado de um componente funcional e criar interfaces interativas.

Ao final do vídeo, você terá uma compreensão completa do useState no React e como utilizá-lo em seus projetos. Então, junte-se a nós nesta jornada de aprendizado sobre o useState!

Neste vídeo, vamos explorar como utilizar o useCallback em nossos projetos React para melhorar o desempenho dos nossos componentes.

Primeiramente, vamos explicar o que é o useCallback e por que é importante utilizá-lo em nossos projetos. Em seguida, vamos mostrar exemplos práticos de como a função pode ser utilizada para otimizar componentes que utilizam estados e propriedades.

Durante o vídeo, vamos explicar como a função useCallback funciona e quais são as vantagens de utilizá-la em nossos projetos. Além disso, vamos compartilhar dicas úteis para identificar quais componentes podem se beneficiar do uso do useCallback em nosso código.

Ao longo do vídeo, vamos discutir casos reais de projetos em que utilizamos o useCallback e compartilhar nossa experiência em relação aos resultados obtidos. Também vamos abordar como utilizar o useCallback de forma eficiente, evitando problemas comuns que podem surgir na implementação.

Por fim, vamos fazer uma revisão dos principais pontos apresentados e mostrar como implementar o useCallback em nossos projetos React de forma fácil e eficiente. Este vídeo é indicado para desenvolvedores que desejam melhorar o desempenho de seus projetos React e estão interessados em aprender mais sobre essa função essencial do React.

Neste vídeo, vamos explorar como utilizar o useMemo em nossos projetos React para melhorar o desempenho dos nossos componentes.

Primeiramente, vamos explicar o que é o useMemo e por que é importante utilizá-lo em nossos projetos. Em seguida, vamos mostrar exemplos práticos de como a função pode ser utilizada para otimizar componentes que fazem cálculos ou processamentos pesados.

Durante o vídeo, vamos explicar como o useMemo funciona e quais são as vantagens de utilizá-lo em nossos projetos. Além disso, vamos compartilhar dicas úteis para identificar quais componentes podem se beneficiar do uso do useMemo em nosso código.

Ao longo do vídeo, vamos discutir casos reais de projetos em que utilizamos o useMemo e compartilhar nossa experiência em relação aos resultados obtidos. Também vamos abordar como utilizar o useMemo de forma eficiente, evitando problemas comuns que podem surgir na implementação.

Por fim, vamos fazer uma revisão dos principais pontos apresentados e mostrar como implementar o useMemo em nossos projetos React de forma fácil e eficiente. Este vídeo é indicado para desenvolvedores que desejam melhorar o desempenho de seus projetos React e estão interessados em aprender mais sobre essa função essencial do React.

Nesta aula vamos criar nossa estrutura de pastas do projeto e já começar a criar o componente de login.

Nesta aula vamos criar nosso primeiro componente global o TextInput, com esse componente poderemos inserir o nosso Input com o layout já pré-definido.

Nesta aula vamos criar nosso botão global que poderá ser utilizado em qualquer parte do sistema.

Nesta aula vamos criar nosso texto global que poderá ser utilizado em qualquer parte do sistema.

Nesta aula vamos inserir no projeto novas fontes externas.

Nesta aula vamos criar alguns tipos de textos padronizados.

Nesta aula vamos criar dois tipos de botões padronizados.

Nesta aula vamos inserir a opção de loading e disabled no botão

Nesta aula vamos inserir a font Poppins Semi-bold no nosso projeto.

Comando utilizado:
npm install react-native-vector-icons

Nesta aula vamos utilizar o componente Image para inserir nossa logo na tela de login.

Nesta aula vamos aprender como rodar o backend e instalar o axios no projeto.

Nesta aula vamos efetuar a comunicação com o backend enviando o usuário e a senha para validar o login na aplicação.