Primeiros Passos no Javascript - Configurando o Ambiente - Visual Studio, Node JS

quer começar no Java escrito mas não sabe por onde vem cá Bora configurar aqui o nosso ambiente de desenvolvimento para que a gente consiga aí ter um ponto de partida para os nossos projetos [Música] então para desenvolver aí esse nosso código JavaScript a gente precisa né de um editor de texto tá e de um interpretador um compilador de código então de cara assim nós já temos o navegador né que o navegador se Provavelmente você tá vendo essa vídeo aula em um navegador e o próprio navegador ele por si só ele já tem um interpretador de

código JavaScript no caso do Google Chrome é o V8 né pelo menos até então e Esse interpretador compilador ou ending né que ele chamam foi extraído do Google Chrome e foi criado em cima dessa entre o node JS né que o note JS a gente pode entender ele como o compilador interpretador de código java script mas fora do browser né é feio a gente instala ele no nosso sistema operacional e o sistema operacional vai ali diretamente com nude entender compilar processar o nosso código JavaScript tá então nessa aula aqui a gente vai estar fazendo a

instalação de um editor de código né aqui no caso que vai ser o visual Studio code e também Esse interpretador que vai ser o node JS tá então eu tô aqui com meu navegador aberto tá o Google Chrome e como eu disse né o Google Chrome Ele curte só ele já interpreta JavaScript então se eu inspecionar aqui o a página Web né Clica com o botão direito inspecionar ele vai abrir nessa aba aqui onde a gente pode ver informações do dos elementos que estão nessa página o console né que é a parte aqui onde vai

os logs das nossas aplicações mas aqui no próprio console eu já consigo digitar ou escrever o código script e o navegador já interpreta então por exemplo eu vou declarar aqui uma variável né uma constante a que vai ser igual a um uma constante B que vai ser igual a 2 e se eu faço aqui a + b ele me retorna que três né então ele tá interpretando a gente tá armazenando né definindo variáveis e fazendo aí operações aritméticas em cima dessas variáveis então aqui no Chrome né a gente consegue já fazer aí um certo nível

de programação tá com o javascritch tá certo mas a gente vai querer extrair tirar isso do navegador e passar para a nossa máquina tá certo mas antes disso a gente vai precisar aqui do nosso editor de texto tá que eu instalei aqui o eu uso né e recomendo o uso aqui do visual Studio code Beleza então eu estou aqui já com o meu o visual Studio code e o node eu já fiz o download tá então aqui eu tô na página oficial né do visual Studio code na aba de downloads na verdade não é aqui

né É aqui então eu pesquisei visual Studio vs code download né entrei no site nós temos aqui as opções dos instaladores e da mesma forma eu fiz para o node JS né no JS a gente pesquisa aqui por Eu já entrei direto no site né no JS nós já temos aqui a aba download e eu consigo fazer a o download aqui da versão LTS que a versão mais recente e estável tá então fiz o download desses dois caras aqui e aqui a gente tem a opção tanto para Windows quanto para Linux e Mac tá então

é só fazer o download aqui do Instalador respectivo do seu sistema operacional e com eles instalados com efeito o download né do Instalador é muito simples né como a gente instala qualquer outro programa executar o nosso instalador aí concordar com os termos de ler né todos os termos aqui clicar em next no caso aqui eu não recomendo que a gente desmarque essas opções principalmente essa é de tupf tanto no visual Studio code quanto no node né que isso aqui é basicamente configurar o ambiente né que no caso é o nosso sistema operacional para o nosso

terminal o nosso o CMD né muito famoso aí entender o que que é o no caso do visual Studio entender o que que é code no caso do node ele entender o que que é o node pra gente iniciar essas aplicações via linha de comando a gente vai aos poucos a gente vai explorando mais isso mas eu recomendo deixar essa opção marcada tá marcou isso aqui clicou em next e aqui é só clicar em install ele vai instalar o visual eu não vou clicar Porque eu já tenho instalado tá Vou sair aqui do Instalador e

da mesma forma é o note tá a gente executa que esse instalador e aqui ele vai iniciar aqui o instalador né tá iniciando Beleza já iniciou aqui né Demorou um pouquinho mas enfim normal inicializou aqui instalador a gente clica next o Lê os termos né concorda com eles depois de lido eu mesmo já ali tá Click next de novo aqui ele vai perguntar onde eu quero instalar né o note eu escolho aqui onde eu quero eu costumo deixar o padrão a gente clica next aqui também tem aquelas opções que a gente tinha lá no visual

Studio code só que aqui é um pouco diferente né mas eu recomendo não mexer nisso aqui principalmente no édito pé tá depois disso aqui clique next ele vai perguntar se a gente quer instalar alguns módulos adicionais mas esses módulos adicionais por enquanto a gente não faz o uso deles tá a gente não precisa desses módulos adicionais aqui para para uso node então eu recomendo não marcar essa caixinha aqui pode deixar desmarcada já vem desmarcado a gente pode deixar clique next novamente e clicar em install ele vai instalar aí o node no seu computador tá certo

então eu não vou clicar Porque eu já tenho instalado né e depois disso eu vou fechar aqui o instalador vou fechar isso tudo e agora se eu abro aqui o nosso cm dele famoso terminal e aqui no Windows eu consigo abrir ele clicando aqui no a minha barra de pesquisa né digitando CMD ele já abre para mim ou então a gente busca né a pressão na tecla Windows e digita 100 MD né prompt de comando tá E aqui no cmd eu consigo digitar por exemplo node né se eu pressiono enter ele já vai abrir aqui

o meu o novo de ensino ele vai executar e aqui ele já fica aguardando por comandos igual o meu navegador estava né então o seu digita tem corte a igual a um corte b igual a dois né E se eu faço a mais b + B ele vai me retornar 3 então a gente já consegue né através da linha de comando digitar note e executar esses comandos tá e eu só consigo digitar node aqui porque aquela opção é de tipo adicionar ao PF estava marcada tá e da mesma forma que para sair eu posso pressionar

contra você né ele vai sair pressionar contra você duas vezes ele fechou que o note Eu posso também digitar code é do visual e ele vai abrir aqui o visual Studio code aqui para mim ele me perguntou se eu dou as permissões de administradores né para executar no caso aqui como a gente tá no Windows né é interessante a gente executar o visual Studio code sempre como administrador porque em alguns casos a gente pode ter alguns problemas com o terminal tá aqui o meu terminal a gente vai chegar aqui no terminal tá vamos deixar ele

aqui por enquanto mas a gente por ter essa possibilidade de ter esses problemas eu já recomendo que você venha aqui no caso do Windows né a gente pressiona que a tecla Windows pesquisa por visual Studio code né Clica com o botão direito e aqui a gente pode abrir palha location né a localização desse arquivo e aqui ele abriu para mim essa localização tá que é bem aqui ó um executável né e aqui eu posso clicar com o botão direito é propriedades e Aqui nós temos em compatibilidade eu já posso marcar aqui ó executar esse programa

como administrador e aí sempre que eu for abrir o visual Studio code ele já vai executar como administrador Tá certo então com o visual Studio code aberto né a gente vai nas próximas aulas a gente vai falar mais sobre códigos sobre extensões a gente vai se aprofundando aos poucos né aqui eu vou parar por aqui na verdade a gente vai executar alguns comandos do node aqui né mas agora que a gente viu que a gente tá com o node instalado né aqui no nosso CMD a gente digitou lá o node né e ele executou então

eu vou fechar aqui esse terminal e ele vai fechar também o meu visual fio de code porque eu abri o visual Studio Code pelo terminal tá então agora eu vou pressionar aqui de novo a tecla Windows pesquisar aqui por visual Studio code Abrir né ele vai me pedir as permissões eu vou clicar em sim é provavelmente acho que no vídeo não aparece essa pergunta quando ele pergunta pela permissão de administrador mas aqui com o visual Studio code aberto eu vou fazer o seguinte a gente vai clicar aqui em terminar ó novo terminal no meu aqui

ele já ele tá usando o terminal best e o seu provavelmente ele vai estar usando o Power Shell tá o meu aqui ele tava com problema na fonte a gente vai ver isso nas próximas aulas que a questão da personalização tá eu tava com fonte personalizada aqui ele não carregou direito porque o meu visual Studio code eu meio que reinstalei ele por padrões normais né para vir tudo por causa da aula e aí eu tive esse probleminha aqui na fonte Tá mas nas próximas aulas a gente vai falar mais sobre essa parte de customização Beleza

então quando terminar aberto nós podemos aqui digitar também note né note ele vai abrir lá o node para gente enfim mostrar que a versão a gente tem essa possibilidade de usar o Terminal Integrado do visual Studio coaching tá E no node nós temos uma opção que é o npm tá npm npx nós temos esses caras aqui é o npm ele é o gerenciador de pacote né o note perca de manager que é o que instala pacotes na nossa aplicação a gente vai chegar ainda a falar sobre pacotes enfim entender melhor o que é isso mas

essa ideia de pacote é basicamente um projeto que depende e pode usar outros outros projetos tá um pacote pode usar outros pacotes então num exemplo simples aqui o meu pacote né o meu projeto né que seria um website por exemplo esse website ele vai depender de um outro pacote pacote seria esse pode ser o react tá então o react ele é ele vem para cá como um pacote também e ele é uma dependência do meu projeto tá então o npm ele é usado aí para gerenciar o node em si e falar node é você precisa

de usar talcote de instalar tal pacote e executar Tais comandos né Tais códigos Fontes aí para que tudo funciona tá então no npm é o que a gente usa para instalar pacotes mas aqui a gente tem um comando bem simples que é um npm e Nite tá esse npm Elite ele vai iniciar um novo projeto para gente tá então ele até pergunta aqui ó no caso é pacote né Mas a gente pode pensar com o projeto e o nome desse pacote né que no caso aqui como eu tô dentro da pasta YouTube ele já pegou

o nome YouTube Beleza vou dar entre pergunta qual versão é eu vou dar entre aqui porque eu quero deixar isso pergunta se tem alguma descrição ou não eu vou deixar desse jeito entre Ponte que é o esse projeto ele vai iniciar por qual arquivo né o nome do arquivo aqui index.js vamos deixar assim também comando de teste a gente não vai mexer também repositório de glitch não temos ainda é que o Word também não vamos adicionar autor também não vamos adicionar a licença também vamos deixar essa padrão e aquele Pergunta se está tudo ok eu

vou digitar um Yes aqui para concordar e ele finalizou tá então após isso o que que aconteceu aqui nós temos aqui esse arquivo Packet Jason tá E esse arquivo pack de Jason ele vai estar presente em todos os projetos node tá que aqui ele vai descrever tudo isso que eu falei né vai descrever autor nome versão inscrição e dependências né que é o mais importante então se o meu pacote ele usa outro pacote vai estar listado aqui no patch Jason qual o pacote é e qual versão é também desse pacote Tá certo então para a

gente ver isso aqui melhor eu posso voltar aqui no meu navegador tá aqui no navegador eu vou pesquisar aqui ó pelo site do npn tá E aqui nós temos npm que é esse ponto que é o site do npm né E aqui nós podemos por exemplo pesquisar e que a gente vai encontrar né o projeto o pacote react disponível aí para download Então o que ele tem uma descrição o repositório do home page número de download a versão licença enfim muitas informações que estão aqui na verdade todas né Elas estão presentes lá no pet Jason

que é o arquivo que a gente vai descrever esse pacote tá então se eu abrir aqui por exemplo o repositório desse projeto né do react que a gente não falou sobre Hit em lente não falou sobre repositório ainda mas eu quero mostrar para vocês que aqui nós temos também um Packet Jason olha ele aqui ó o arquivo aqui eu posso abrir ele e dá uma olhada né então a gente pode ver que esse pacote Ele tem muita dependência ele tem muitos comandos muitos clipes tem muita coisa aqui é descritas tá então o que eu quero

deixar claro aqui é que sempre que a gente tá trabalhando com node com JavaScript a gente vai ter aqui o nosso pack Jason no nosso projeto para descrever essas coisas tá certo então a gente não vai e muito além disso aqui tá o que eu quero mostrar para vocês agora aqui no navegador é que nós temos né essa dependência do note nós temos ela para nós precisamos né do node para desenvolver os projetos nosso senhor react a gente precisa também para desenvolver em o get Nate usando ali o Expo e todos esses tópicos aí a

gente a gente vai abordar nas próximas aulas tá nessa aula aqui é basicamente a gente vai ver que a gente vai fazer na instalação Donald tá que é esse ponto de início aí Esse interpretador que a gente sempre precisa ter na nossa máquina para estar desenvolvendo os nossos projetos aí em react Nate que vai ser o foco aqui dessas nossas aulas tá então eu vou deixar para vocês também essas esses links dessas documentações né que são os links que descrevem aí o processo de instalação até a criação de um projeto em react E também o

reaction que a gente vai estar também abordando tudo isso aí nas próximas aulas tá então para essa aula aqui é isso tá eu espero aí que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e aí sim muito obrigado e até a próxima [Música]