Como instalar e utilizar o Bootstrap via npm \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 10 Horas 32 Min 21 Seg Tempo restante da oferta: 10 32 21 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Como instalar e utilizar o Bootstrap via npm [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Como instalar e utilizar o Bootstrap via npm Instalar Bootstrap via npm e alterar suas variáveis, é mais simples do que imagina. Hoje iremos juntos fazer o download do Bootstrap 5. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 5 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/Como_instalar_e_utilizar_o_Bootstrap_via_npm.png) Instalar Bootstrap via npm e alterar suas variáveis é mais simples do que você imagina. Nesse artigo você veremos como é feita a instalação, configuração e sobrescrita das variáveis do Bootstrap via npm. Vamos aprender como deixar seu documento mais leve e organizado, “trazendo” apenas o necessário do Bootstrap. [ ![Node.js - Templates com PUG](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/node-js.svg) Curso Node.js - Templates com PUG Conhecer o curso ](https://www.treinaweb.com.br/curso/nodejs-templates-com-pug) ### Porque fazer o download é melhor? Ao fazer download do Bootstrap teremos mais liberdade na hora de utilizar seus componentes e também nos possibilita alterar as variáveis da maneira que for necessário, além disso, a página fica mais leve trazendo apenas os componentes que forem utilizados, fazendo assim com que sua página fique mais rápida. ### Como será o exemplo Então vamos colocar a mão na massa! A imagem abaixo mostra o que vamos fazer. Eu peguei alguns componentes do próprio site do Bootstrap que vamos utilizar apenas como exemplo para conseguirmos aplicar as alterações personalizadas que vamos fazer, você pode escolher qualquer componente do site, eu escolhi: `navbar`, `button` e `alert`. Ao longo desse artigo vamos escrever o código necessário para que a página fica desta maneira: ![exemplo utilizado bootstrap via npm](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/exemplo_utilizado_bootstrap_via_npm-1024x535.png) Lembrando que todo o código fonte deste projeto está disponível em um [repositorio no GitHub](https://github.com/treinaweb/exemplo-instalacao-bootstrap-via-npm-e-personalizacao). ### Instalando as dependências Para fazer isso você irá precisar do Node.js instalado na sua máquina, ele é uma ferramenta gratuita e bem simples de fazer o download, temos um artigo explicando passo a passo como é feita a [instalação do Node.js](https://www.treinaweb.com.br/blog/instalacao-do-node-js-windows-mac-e-linux "node.js"). Após a instalação do Node.js crie uma pasta onde preferir e abra com o [editor de código fonte](https://www.treinaweb.com.br/blog/principais-editores-de-codigo-para-desenvolvimento) ou [IDE](https://www.treinaweb.com.br/blog/o-que-e-uma-ide-ambiente-de-desenvolvimento-integrado) de sua preferência, eu irei utilizar o [Visual Studio Code](https://www.treinaweb.com.br/blog/instalacao-do-vs-code-no-windows-linux-e-macos "Visual Studio Code"). #### Iniciando package.json Vamos iniciar criando um arquivo `package.json` para salvarmos nossas dependências conforme vamos instalando o que for preciso, para isso vamos executar o seguinte comando no terminal: ```shell npm init -y ``` O comando `npm init` serve para iniciarmos o `package.json`, já a flag `-y` é usada para criar o arquivo de forma padrão. #### Instalação node-sass e Bootstrap A partir de agora tudo que instalarmos ficará salvo no arquivo `package.json`. Agora vamos instalar primeiro o Sass e em seguida Bootstrap com os seguintes comandos: ```shell npm install node-sass npm install bootstrap ``` Feito isso suas pastas devem ficar dessa forma: ![exemplo pastas após instalação bootstrap](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/exemplo_pastas_apos_instalacao_bootstrap-1.png) Automaticamente é criada uma pasta chamada `node_modules`, nessa pasta é onde ficam os pacotes instalados localmente via npm, sempre que for instalado um pacote no seu projeto essa pasta será criada, dentro dessa dela é onde estão os pacotes que acabamos de instalar, `node-sass` e `Bootstrap`, não vamos alterar nada na `node_modules` não se preocupe, ela irá servir apenas para importação de nossos arquivos, você irá entender melhor mais à frente. ### Iniciando HTML Agora vamos criar um arquivo HTML, vamos chama-lo de `index.html`, nele vamos adicionar os componentes do Bootstrap: ```html Bootstrap + npm Navbar Home Link Disabled Search Primary Secondary Success Danger Warning Info Light Dark A simple primary alert—check it out! A simple secondary alert—check it out! A simple success alert—check it out! A simple danger alert—check it out! A simple warning alert—check it out! A simple info alert—check it out! A simple dark alert—check it out! ``` ### Organizando pastas Para manter a organização criaremos uma pasta onde ficará o código de estilização, alteração de variáveis e as impostações necessárias do Bootstrap, para esta pasta vamos dar o nome de `src`. Dentro dessa pasta, vamos criar três arquivos:` _components.scss`, `_import.scss` e `style.scss`. Para manter a organização e a sepração das responsabilidades de cada arquivo, queremos que apenas um arquivo gere o `style.css` principal, o **underscore** na frente dos arquivos ` _components.scss` e `_import.scss` serve para informar ao Sass que não deve ser gerado um arquivo CSS a partir desses arquivos, ou seja, eles servirão apenas para serem importados dentro do nosso arquivo principal que é o `style.scss`. ![exemplo pasta para organização](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/exemplo_pasta_para_organizacao-1.png) ### Importando componentes O que faremos com esses arquivos é o seguinte, no `_components.scss` vamos trazer apenas os componentes necessários para o funcionamento da página. No nosso exemplo temos três componentes do Bootstrap: `navbar`, `button` e `alert`. Para trazer esses componentes para nossa aplicação utilizaremos o comando `@import` da seguinte maneira `@import “caminho-do-arquivo";`. Agora coloque as importações necessárias no arquivo `_components.scss` como no exemplo abaixo: ```css @import "../node_modules/bootstrap/scss/navbar"; @import "../node_modules/bootstrap/scss/buttons"; @import "../node_modules/bootstrap/scss/alert"; ``` Já no arquivo `_import.scss` chamamos os componentes fundamentais do Bootstrap que necessitam estar presentes para o funcionamento correto do framework, desta forma: ```css // 1. Incluir funções primeiro (para conseguir manipular cor, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; // 2. Sobrescreva variáveis aqui // 3. Incluir o restante das estilizações do Bootstrap necessários para o funcionamento @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; // 4. Inclua os estilos conforme o necessário @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; // 5. Opcional, inclua a API de utilitários por último para gerar classes com base no mapa Sass em `_utilities.scss` @import "../node_modules/bootstrap/scss/utilities/api"; ``` No `style.scss` é onde iremos centralizar tudo, então nele iremos realizar a importação dos arquivos `_components.scss` e `_import.scss`. Essa separação é para nos dar mais organização e facilidade na hora da manutenção no código. Então, o arquivo `style.scss` irá ficar da seguinte maneira: ```css @import "import.scss"; @import "components"; ``` > Uma observação: tenha sempre bastante cuidado na hora de fazer o imports do Bootstrap para sua aplicação, pois ele necessita estar nesta ordem que aparece nos códigos, caso contrário seu código dará erro. Tudo isso se encontra na [documentação oficial do Bootstrap](https://getbootstrap.com/docs/5.1/customize/sass/ "documentação oficial do Bootstrap"). Agora ao abrir o arquivo `index.html` no navegador a seguinte página será exibida: ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/exemplo_html_sem_estilizacao.png) Veja que a página se encontra ainda sem as estilizações do Bootstrap, isso acontece porque ainda não linkamos o Bootstrap na nossa página, até porque ainda não temos o arquivo CSS gerado a partir de nossos arquivos Sass. Lembra quando falamos que apenas um arquivo irá gerar o CSS principal? Vamos ver como gerar esse arquivo. ### Gerando CSS Este arquivo CSS será gerado automaticamente ao executarmos o seguinte comando no terminal: ```shell node-sass src/style.scss src/style.css ``` Esse comando faz com que seu arquivo `style.scss` dentro da pasta `src` gere um arquivo `style.css` dentro da pasta `src`, bem tranquilo. É esse arquivo CSS gerado que iremos usar em nosso HTML. ```html ``` > Lembre-se sempre de colocar o caminho correto, assim evitamos erros em nosso projeto. Se você seguiu todos os passos corretamente, ao salvar as atualizações já conseguimos ver nossa página do jeito que queríamos inicialmente. [ ![CSS - Sass](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/sass.svg) Curso CSS - Sass Conhecer o curso ](https://www.treinaweb.com.br/curso/css-sass-avancado) ## Automatizando Sass Toda alteração feita em nossos estilos teremos que rodar novamente o comando `node-sass src/style.scss src/style.css`, isso se tornaria muito cansativo e completamente improdutivo quando queremos fazer várias alterações. Mas podemos automatizar esse script colocando a flag `--watch` no comando, isso irá deixar o Sass complilar as alterações de forma automática. Basta fazer dessa forma. ```shell node-sass --watch src/style.scss src/style.css ``` ### Alterando variáveis do Bootstrap Agora vamos alterar as variáveis! Para isso precisamos nos atentar novamente ao que a documentação do Bootstrap pede, precisamos colocar em um local específico nossas alterações, essas alterações serão feitas no arquivo `_import.scss`, logo abaixo da importação das funções e antes das importações de estilizações padrões do Bootstrap, inclusive eu já deixei um comentário informando exatamente onde as nossas variáveis devem ser adicionadas. Suponha que você queira mudar a cor primária do Bootstrap para vermelho, é bem simples! Basta no local correto definir que a váriavel `primary` irá receber o valor `red`, da seguinte maneira: ```sass // 1. Incluir funções primeiro (para conseguir manipular cor, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; // Insira as Alterações Aqui ! $primary: red; // alterando cor primária para vermelho // 3. Incluir o restante das estilizações do Bootstrap necessários para o funcionamento @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; // 4. Inclua os estilos conforme o necessário @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; // 5. Opcional, inclua a API de utilitários por último para gerar classes com base no mapa Sass em `_utilities.scss` @import "../node_modules/bootstrap/scss/utilities/api"; ``` Salve as alterações e olhe novamente sua página, tudo que estava com cor primária padrão do Bootstrap (azul) agora está com a cor que declaramos. Assim temos mais liberdade para criarmos layouts do nosso jeito. Outro exemplo são os tamanhos das margens que vão de 1 ao 5 como padrão. Podemos adicionar nova medidas como 6, 7, 8. Isso serve para medidas como `padding`, `border`, `text-size`, vai depender da sua necessidade, vou acrescentar o valor de margem `6` e aplicar em todos os botões, vamos ver como fica. Para isso vamos novamente editar o arquivo `_import.scss` com o seguinte código: ```sass // 1. Incluir funções primeiro (para conseguir manipular cor, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; // Insira as Alterações Aqui ! $primary: red; $spacer: 1rem; $spacers: ( 0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, 6: $spacer * 5, /*estilo adicional da margem*/ ); // 3. Incluir o restante das estilizações do Bootstrap necessários para o funcionamento @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; // 4. Inclua os estilos conforme o necessário @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; // 5. Opcional, inclua a API de utilitários por último para gerar classes com base no mapa Sass em `_utilities.scss` @import "../node_modules/bootstrap/scss/utilities/api"; ``` Agora que já temos a nossa nova medida podemos aplicá-la em nossa página: ```html Primary Secondary Success Danger Warning Info Light Dark ``` Ao salvar as alterações e então atualizar a nossa página no navegador veremos o seguinte resultado: ![exemplo alterado cor e margem](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/exemplo_alterado_cor_e_margem-1024x502.png) > Aqui vai mais uma dica. Para saber o que vamos alterar de forma correta e evitando erros, basta olhar as variáveis do Bootstrap, que estão no caminho `node_modules/bootstrap/scss/_variables.scss` ### Organizando Arquivos Como falamos anteriormente o foco aqui também é deixar o nosso projeto organizado, podemos fazer isso criando um arquivo apenas para as alterações personalizadas. Para fazer isso é simples, na pasta `src` criaremos um arquivo chamado `_meusEstilos.scss`, você pode dar o nome que quiser, desde que esteja com **underscore** na frente, e dentro desse arquivo colocaremos a estilização personalizada que fizemos. ```sass $primary: red; $spacer: 1rem; $spacers: ( 0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, 6: $spacer * 5, ); ``` Agora precisamos importar esse novo arquivo dentro do nosso arquivo `_import.scss`, assim como no exemplo abaixo: ```sass // 1. Incluir funções primeiro (para conseguir manipular cor, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; // Insira as Alterações Aqui ! @import "meusEstilos"; // Arquivo de estilização // 3. Incluir o restante das estilizações do Bootstrap necessários para o funcionamento @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; // 4. Inclua os estilos conforme o necessário @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; // 5. Opcional, inclua a API de utilitários por último para gerar classes com base no mapa Sass em `_utilities.scss` @import "../node_modules/bootstrap/scss/utilities/api"; ``` Agora qualquer personalização que fizermos no nosso arquivo `_meusEstilos.scss` será importada no local correto. Facilitando assim a manutenção e estilização da página. Dessa forma a página possui apenas os componentes que estão sendo utilizados, dessa maneira a mesma ficará bem mais leve e consequentemente carregará muito mais rápido. [ ![Bootstrap - Primeiros passos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/bootstrap-5.svg) Curso Bootstrap - Primeiros passos Conhecer o curso ](https://www.treinaweb.com.br/curso/bootstrap-primeiros-passos) ## Considerações finais Vimos nesse artigo a instalação e configuração do Bootstrap via npm, instalamos todas as dependências necessárias com poucos comandos. Aprendemos a parte de organização dos arquivos e das pastas que facilitam muito o entendimento do código e sua manutenção. Conseguimos alterar e até mesmo criar variáveis novas, fazer com que o Sass compile automaticamente, tudo isso de forma bem simples e principalmente da maneira correta, porém se quiser aprender mais sobre esse tema, temos um direto ao ponto aqui na plataforma, o [Bootstrap - Personalização e Modos de Uso](https://www.treinaweb.com.br/direto-ao-ponto/bootstrap-personalizacao-e-modos-de-uso "Bootstrap - Personalização e Modos de Uso") - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #bootstrap ](https://www.treinaweb.com.br/blog/tag/bootstrap) - [ #NPM ](https://www.treinaweb.com.br/blog/tag/npm) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #Node.js ](https://www.treinaweb.com.br/blog/tag/node-js) - [ #sass ](https://www.treinaweb.com.br/blog/tag/sass) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/Formas_de_se_trabalhar_com_o_Bootstrap_5-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Formas de se trabalhar com Bootstrap 5 ](https://www.treinaweb.com.br/blog/formas-de-se-trabalhar-com-bootstrap-5) Existem algumas maneiras diferentes de se trabalhar com Bootstrap em nossos projetos, vamos descobrir todas as formas do uso do framework. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/TAILWIND-NPM-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme ](https://www.treinaweb.com.br/blog/instalando-tailwind-css-via-npm-e-alterando-suas-propriedades-css-com-theme) Neste artigo, veremos como instalar e utilizar a tecnologia Tailwind CSS via NPM. Também iremos alterar suas propriedades CSS com theme. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Guia do framework NestJS ](https://www.treinaweb.com.br/blog/guia-do-framework-nestjs) Neste guia do framework NestJS vamos fazer um compilado de tópicos úteis sobre o framework, desde criar um projeto básico até autenticação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/TAILWIND-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é Tailwind CSS e como instalar via CDN? ](https://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn) Neste artigo aprenderemos a criar um navbar usando Tailwind CSS, e entender melhor como funciona seus componentes de estilização. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151507/TRUQUES-NPM-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ O que é NPM e como usar uma biblioteca instalada por ele ](https://www.treinaweb.com.br/blog/o-que-e-npm-e-como-usar-uma-biblioteca-instalada-por-ele) Saiba o que é o NPM (Node Package Manager), como utilizar um pacote, framework ou biblioteca instalada por ele e sobre o package.json. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/NEST-JS-CLASS-VALIDATOR-CLASS-TRANSFORMER-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como enviar emails com NestJS e Nodemailer ](https://www.treinaweb.com.br/blog/como-enviar-emails-com-nestjs-e-nodemailer) Neste artigo vamos aprender como enviar emails utilizando o NestJS e o Nodemailer, um dos módulos mais utilizados do ecossistema NodeJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/o-que-e-o-composer-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 5 anos atrás ## [ Como instalar um pacote com Composer e utilizá-lo em seu projeto PHP ](https://www.treinaweb.com.br/blog/como-instalar-um-pacote-com-composer-e-utiliza-lo-em-seu-projeto-php) Aprenda a instalar e utilizar o gerenciador de dependências Composer e dê o próximo passo rumo a se tornar um desenvolvedor PHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/11105139/PHP-WINDOWS-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Como instalar o PHP e Xdebug no Windows ](https://www.treinaweb.com.br/blog/como-instalar-o-php-e-xdebug-no-windows) Aprenda como instalar o PHP e a extensão Xdebug no Windows. Ensinaremos os detalhes que você precisa observar na hora de escolher a versão do PHP e todo o processo de instalação e configuração. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/EXECUTAR-CODIGO-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Como instalar e executar o React ](https://www.treinaweb.com.br/blog/como-instalar-e-executar-o-react) Veja neste artigo como instalar e executar o React, então confira neste artigo como instalar o React por CDN (Link) e CLI (Linha de comando) Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/07152007/AWS-CLI-400x280.png) [ Amazon ](https://www.treinaweb.com.br/blog/categoria/amazon) 7 anos atrás ## [ Como instalar e configurar o AWS CLI ](https://www.treinaweb.com.br/blog/como-instalar-e-configurar-o-aws-cli) O AWS CLI é uma ferramenta em linha de comando capaz de gerenciar recursos na AWS. Com ela é possível listar todas as EC2 no seu ambiente, ou até mesmo criar um novo banco de dados com RDS com poucos comandos, tudo isso sem precisar acessar o console da AWS. Nesse artigo vamos acompanhar como é o processo de instalação e configuração do AWS CLI. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como instalar a Golang e executar nosso primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-a-golang-e-executar-nosso-primeiro-exemplo) Neste artigo iremos aprender como instalar a Golang nos sistemas Windows, Linux e macOS e como executar nosso primeiro exemplo. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **10h 32min 21s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58