React - Toda jornada começa com um simples passo

Name: React - Toda jornada começa com um simples passo
Rating: 4.5 (3 reviews)

Para iniciantes e pessoas que estejam iniciando como programador

Created byMatheus Sacramento de Lima

Last updated 5/2024

Portuguese

What you'll learn

Como criar sites usando o framework mais popular do mercado: React
Como componentizar suas aplicação de forma simples e fácil usando React
Os primeiros passos para você começar no mundo da programação usando o framework mais famoso do momento: React
Sempre mencionaram que programar é algo difícil, complicado e chato. Estou aqui para mostrar que tudo pode ser mais simples com React

Course content

7 sections • 8 lectures • 11h 57m total length

Como funciona a internet? O que preciso entender?1:19:31
O que é a internet?
É uma rede mundial de computadores interligados enviando e recebendo informações.
Como você consegue acessar o conteúdo de algum site?
Você consegue acessar o conteúdo do site porque essas informações estão armazenadas em algum computador ou servidor localizado em algum lugar do mundo contendo os arquivos do determinado site.
O que eu preciso para hospedar um site?
1) Preciso registrar o nome (domínio) do meu site, assim garanto que aquele nome é meu. Para registrar sites brasileiros: registro BR
2) Preciso contratar algum empresa de hospedagem que garanta que os arquivos do meu site ficarão disponíveis na internet 24 horas por dia.
Empresas de hospedagem: vercel, locaweb, digitalocean, hostgator, heroku, amazon
Antigamente x Hoje em dia
Antigamente tudo era feito na mão. Ainda não existiam os frameworks que começaram a surgir em 2010. O primeiro framework a surgir foi o Angular em 2010. O Angular foi criado pela equipe do google e foi uma mudança de paradigma, transformou a forma de se desenvolver sites na época. As empresas competem entre si nesse mundo de desenvolvimento de websites, então o Facebook lançou o seu framework em 2013 nomeando de React e tendo a mesma proposta do Angular do Google, facilitar o desenvolvimento de sites. Ainda em 2013 o google também lançou um framework para desenvolvimento de aplicativos seguindo a mesma ideia do Angular, que tinha sido criado por eles para desenvolvimento de sites, contudo o Ionic serviria para o desenvolvimento de aplicativos para Android e iOs. Em 2015 o facebook lança o React Native, que viria a ser o seu framework para desenvolvimento de aplicativos para Android e iOs, que competiria com o Ionic do Google. Nessa corrida surgiram outros frameworks como vueJS (em 2014) para criação de sites e Flutter (dezembro de 2018) para desenvolvimento de aplicativos para Android e iOs. VueJS foi criado e é mantido por desenvolvedores, possuindo código aberto. Flutter foi criado em 2018 pelo próprio Google. O início do desenvolvimento do Flutter se deu em 2015, quando o Google percebeu que o React Native do Facebook era melhor do que o seu framework Ionic, então logo iniciaram a tarefa de buscar algum framework que estivesse a altura do concorrente.
Antigamente nós precisávamos digitar todo o código na mão, salvar com a extensão (.html) e então abrir o arquivo no browser (chrome, firefox, internet explorer, edger, safari, etc...). Cada vez que tivesse alteração em algum arquivo era necessário fazer um refresh (atualização) na página para que refletissem as mudanças.
Hoje em dia
Hoje em dia tudo é automatizado. Usamos os frameworks que já resolvem inúmeros problemas que existiam antigamente e ainda facilitam a componentização e melhor organização do código.
npx create-react-app my-app ===> Comando que cria o aplicativo novo. my-app é o nome que você escolhe. cd my-app ===> Comando para acessar a pasta my-app que foi gerada no comando anterior
npm start ===> Comando para iniciar a aplicação, automaticamente abre o browser e exibe a página inicial

Como criar uma aplicação? O que é semântica? Componentes1:53:52
Como criar um aplicativo?
Na última aula nós criamos um projeto inicial de site por linha de comando.
Como poderíamos fazer algo semelhante para criar um aplicativo?
Usando a CLI do React Native nós conseguimos fazer o mesmo processo e gerar um projeto inicial para desenvolver algum aplicativo. CLI significa Command Line Interface ou interface de linha de comando, que é justamente uma ferramenta que permite que você crie algo apenas executando um comando dentro do terminal.
npm install -g react-native => Instala as ferramentas que tornam possível o desenvolvimento de apps npx react-native init Projeto2 => Cria um projeto de aplicativo novo com o nome Projeto2

Apenas siga as instruções do terminal
Hoje em dia as instruções nos mostram bem detalhadamente o que fazer.
cd "/Users/theocode/Aulas/Aula 02/Projeto2" && npx react-native run-android => Acessa a pasta que foi criada para o projeto de nome Projeto2 e roda o comando que inicializa o projeto no iphone para visualizar a versão do iOs.
cd "/Users/theocode/Aulas/Aula 02/Projeto2" && npx react-native run-ios => Acessa a pasta que foi criada para o projeto de nome Projeto2 e roda o comando que inicializa o projeto no iphone para visualizar a versão do iOs.

Repare: existe uma mensagem de alerta para o Android Have an Android emulator running
(quickest way to get started), or a device connected.
Tenha um emulador Android em execução (maneira mais rápida de começar) ou um dispositivo conectado.

Erro do Android
O Android precisa que exista algum emulador rodando ou que esteja conectado algum celular na porta USB do computador para que ele faça a instalação nesse ambiente e assim abra a versão de projeto inicial criada pelo framework.
Você precisa baixar o Android Studio. Instalar o programa no seu computador.
Pesquise developer android no google
Configurar um emulador, abrir este mesmo emulador que foi configurado e deixá-lo em execução para o comando funcione.

Observação: Se o seu computador é windows, então você apenas conseguirá desenvolver para o Sistema Operacional Android, não sendo possível desenvolver para iOs, tendo em vista que apenas é possível desenvolver para Apple através do Sistema Operacional iOs, ou seja, de um Mac.

Rodando no iOS
Para rodar no iOs basta rodar
yarn ios

Rodando no Android
Para rodar no Android basta rodar
yarn android

O que é semântica?
A semântica é um campo de estudo da linguística e da filosofia que se dedica à compreensão do significado das palavras, frases e expressões. É a disciplina que investiga como as palavras e as estruturas linguísticas são utilizadas para transmitir informações e como essas informações são interpretadas pelos falantes.
O que é semântica no desenvolvimento de websites?
A semântica no desenvolvimento de websites refere-se ao uso adequado de elementos HTML e atributos para representar corretamente o significado e a estrutura do conteúdo web. É uma prática que visa criar códigos HTML bem estruturados e significativos, facilitando a compreensão por parte dos navegadores, mecanismos de busca e desenvolvedores.
Ao usar a semântica no desenvolvimento de websites, os elementos HTML devem ser escolhidos com base no significado semântico do conteúdo, em vez de apenas na aparência visual. Por exemplo, em vez de usar uma tag <div> genérica para agrupar elementos, é preferível usar tags semânticas específicas, como <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, entre outros, para indicar a estrutura do documento de forma mais clara.
Além disso, a semântica também envolve o uso apropriado de atributos HTML para fornecer informações adicionais sobre o conteúdo. Por exemplo, o uso do atributo alt em imagens para descrever o seu conteúdo, o atributo title para fornecer informações contextuais, ou o atributo aria-label para melhorar a acessibilidade de elementos interativos.
Meus primeiros componentes
É preciso identificar o padrão dos componentes, separar todos eles em grupos, identificar as semelhanças e as diferenças. Assim você consegue trabalhar melhor para a criação da sua página.
Button
Text
Card
Menu
Photo Progress Bar

Requirements

Você precisará de um computador e muita força de vontade, nada além disso. Nos utilizaremos do framework React que facilita muito o desenvolvimento, tornando tudo mais fácil e prazeroso.

Description

O curso foi ministrado para 26 pessoas que não possuem nenhum conhecimento ou familiaridade com programação, visando trazer problemas e dificuldade que sejam comuns para qualquer pessoa que nunca tenha tido experiência com programação. O objetivo é criar um curso fácil e simples, acessível para todos que acham a área da programação muito difícil e complicada, desmistificando e quebrando essa má impressão. Mostrando que programação é fácil e possível para qualquer pessoa, independente de idade ou familiaridade com o tema.

Descubra os segredos para construir um site de forma fácil e eficaz! Nosso curso é a porta de entrada para desvendar os mistérios por trás do desenvolvimento web. Com o poderoso framework React como nosso guia, você será conduzido por um mundo de possibilidades e facilidades que tornarão sua jornada de aprendizado incrivelmente empolgante.

Imagine-se navegando pelos novos recursos, IDEs modernas e aproveitando o poder da inteligência artificial, tudo isso enquanto se aventura no universo da programação. Nosso curso é projetado para fornecer os caminhos certos, levando-o a entender profundamente como criar um site do zero.

Prepare-se para dominar habilidades essenciais e mergulhar em um ambiente de aprendizado dinâmico. De conceitos fundamentais a técnicas avançadas, você explorará cada etapa do processo de construção de um site de maneira prática e envolvente.

Junte-se a nós e transforme sua curiosidade em habilidades tangíveis. Seja parte de uma comunidade de aprendizado apaixonada e descubra como o React pode revolucionar sua jornada como programador.

Está pronto para começar a criar o futuro da web? Então, não espere mais! Inscreva-se agora e dê o primeiro passo rumo a uma carreira emocionante no mundo da programação web.

Who this course is for:

Esse curso é destinado para pessoas que nunca programaram antes ou desenvolvedores iniciantes.

React - Toda jornada começa com um simples passo

What you'll learn

Explore related topics

Course content

Aula 01: Como funciona a internet? O que preciso entender?1 lecture • 1hr 20min

Aula 02: Como criar uma aplicação? O que é semântica? Meus primeiros componentes1 lecture • 1hr 54min

Aula 03: NPM e criação de componentes seguindo o layout1 lecture • 2hr 17min

Aula 4: Resolvendo problemas comuns de alunos1 lecture • 1hr 38min

Aula 05 - Reforçando a importância da Semântica2 lectures • 2hr 22min

Aula 07 - Seguindo na construção do layout1 lecture • 1hr 23min

Aula 08: Mão na massa, construindo mais componentes1 lecture • 1hr 3min

Requirements

Description

Who this course is for: