Como instalar e executar o React \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 17 Horas 50 Min 43 Seg Tempo restante da oferta: 17 50 43 [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 executar o React [ React ](https://www.treinaweb.com.br/blog/categoria/react) # 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) [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/EXECUTAR-CODIGO-REACT.jpg) Neste artigo vou falar sobre como instalar e executar o React. Como vimos no artigo: [Conheça o React, biblioteca para desenvolvimento Web](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web "Conheça o React, biblioteca para desenvolvimento Web"), ele é uma biblioteca criada pelo facebook em 2013. É uma ferramenta declarativa, Baseada em componentes e por ter uma sintaxe única você consegue aproveitar todo conhecimento adquirido ao desenvolver aplicações web para o desenvolvimento mobile com [React Native](https://www.treinaweb.com.br/blog/o-que-e-o-react-native "React Native") ## React e ReactDom O React é uma biblioteca, dividida em várias outras bibliotecas para funcionar em diversos ambientes. Então, para criarmos uma aplicação web, nós precisamos basicamente de duas bibliotecas, o React e o ReactDom. ## Instalação via CDN Para utilizar o React, podemos fazer a instalação por [CDN](https://www.treinaweb.com.br/blog/o-que-e-cdn-content-delivery-network "CDN"). Basta utilizar os seguintes links: ```html ``` Com isso, basta adicionar esses dois links ao projeto [HTML](https://www.treinaweb.com.br/blog/o-que-e-html "HTML"). ```html Document ``` Agora podemos criar o primeiro componente React. Para isso, basta criar um script JavaScript, utilizando os objetos do React, com os métodos necessários para criar um componente. ```javascript ReactDOM.render( React.createElement("h1", null, "Olá Mundo"), document.getElementById("APP") ); ``` Vamos detalhar um pouco mais o que faz cada um dos objetos mostrados no exemplo a cima. [ ![React - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-fundamentos) ### ReactDOM O objeto `ReactDOM` tem métodos específicos para o [DOM](https://www.treinaweb.com.br/blog/o-que-e-dom-virtual-dom-e-shadow-dom "DOM") O método utilizado é o `render()`, ele recebe dois parâmetros onde o primeiro é o elemento React que será renderizado na tela, por exemplo, um `h1`. O segundo é onde iremos passar o elemento HTML de referência para adicionar todos os elementos criados pelo React, por exemplo o elemento `div` contendo a propriedade `id`. ```html ``` Então ele irá renderizar os elementos React no DOM, ou seja, irá renderizar os elementos criados com o React no HTML, tudo isso via JavaScript. ### React O objeto `React` contém os métodos para se manipular um componente. O método utilizado é o `createElement()`. Esse método tem três parâmetros onde o primeiro é o tipo do elemento que deve ser renderizado, como uma `div` ou `h1`, o segundo são as propriedades, como um `id` ou `className`, já o terceiro, são os filhos do elemento. ### JSX Nós podemos utilizar o [JSX](https://www.treinaweb.com.br/blog/o-que-e-jsx "JSX") para descrever como sua UI (interface do usuário) deve ser construída. Cada elemento JSX é somente uma alternativa de utilizar o `React.createElement()`. No geral você não vai utilizar os métodos demostrados nos exemplos anteriores, caso esteja utilizando JSX. Para utilizar JSX nós iremos precisar do [Babel](https://www.treinaweb.com.br/blog/o-que-e-babel/ "Babel"), ele vai fazer uma tradução do JSX para o JavaScript Vanilla. Então, no HTML, basta colocar o Babel via CDN e adicionar na tag `script` a propriedade `type="text/babel"`, para que os scripts possam ser transpilados pelo Babel. ```html Document // CDN REACT // CDN BABEL ReactDOM.render( Olá Mundo, document.getElementById("APP")); ``` Com isso feito, podemos executar JSX em vez de JavaScript para criar os componentes. Podemos ver com mais detalhes como o JSX se comporta a partir da versão 17 do React no artigo: [React 17 - Conheça o que vai mudar no JSX](https://www.treinaweb.com.br/blog/react-17-conheca-o-que-vai-mudar-no-jsx#:~:text=Sim!,melhora%20no%20tamanho%20dos%20arquivos.&text=Al%C3%A9m%20disso%2C%20tamb%C3%A9m%20foi%20dito,o%20novo%20formato%20ser%C3%A3o%20poss%C3%ADveis. "React 17 - Conheça o que vai mudar no JSX") ## Instalação via CLI Para começar, teremos que ter instalado o [Node.js](https://www.treinaweb.com.br/blog/node-js-por-que-voce-deve-conhecer-essa-tecnologia "Node") na máquina. O processo de instalação você consegue ver neste artigo: [Instalação do Node.js - Windows, Mac e Linux](https://www.treinaweb.com.br/blog/instalacao-do-node-js-windows-mac-e-linux "Instalação do Node.js - Windows, Mac e Linux") Com o Node.js instalado, basta executar no terminal o seguinte comando: ```text npx create-react-app my-app ``` Esse comando é um pipeline build para front-end. Atrás dos panos será utilizado o Babel e o [webpack](https://webpack.js.org/ "webpack"). Agora basta, pelo terminal, acessar a raiz do projeto criado e executar `npm run start`. Este comando irá iniciar um novo servidor local em `http://localhost:3000`. ![react-web](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/Capturar-1.png) ## Conclusão Vimos que o React é uma biblioteca que envolve muita tecnologia e conseguimos executá-lo tanto em um projeto simples, utilizando HTML, CSS e JavaScript e até utilizando somente JSX para criarmos os nossos primeiros componentes. Veja quais são os tópicos abordados durante o curso de [React Fundamentos](https://www.treinaweb.com.br/curso/react-fundamentos "React Fundamentos"): - Virtual DOM - Estrutura básica de uma aplicação com React - Iniciando um projeto com Create React App - JSX - Criação de componentes reutilizáveis - Estados e Propriedades - Trabalhando com Formulários - Introdução aos React Hooks - Fazer requisições a uma API Web com Axios e SWR - Criação de projeto para fixação - Clone do Twitter - [ #react ](https://www.treinaweb.com.br/blog/tag/react) - [ #Como instalar React ](https://www.treinaweb.com.br/blog/tag/como-instalar-react) - [ #React CDN ](https://www.treinaweb.com.br/blog/tag/react-cdn) - [ #React Linha de comando ](https://www.treinaweb.com.br/blog/tag/react-linha-de-comando) Autor ![Ariel Sardinha](//secure.gravatar.com/avatar/d0b89ee09026eb2b9e26f286c04eba03?d=mm) ## Ariel Sardinha Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. [arielsardinha](https://www.linkedin.com/in/ariel-sardinha/) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) ## 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/2021/09/TYPESCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Como instalar o TypeScript ](https://www.treinaweb.com.br/blog/como-instalar-o-typescript) Neste artigo veremos como instalar o TypeScript, conhecer o arquivo tsconfig, executar nosso primeiro código no Node.js e no navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/REACT-ROUTER-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Gerenciamento de Rotas no React com React Router ](https://www.treinaweb.com.br/blog/gerenciamento-de-rotas-no-react-com-react-router) Neste artigo vamos abordar um conceito importante dentro de aplicações com o React, O gerenciamento de Rotas no React com React Router. 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) 4 anos atrás ## [ Como realizar upload de arquivos locais no NestJS ](https://www.treinaweb.com.br/blog/como-realizar-upload-de-arquivos-locais-no-nestjs) Neste artigo vamos aprender a utilizar o recurso de upload de arquivos locais com o NestJS utilizando a biblioteca Multer do Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/vs-code-melhores-extensoes-para-front-end-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ VS Code - Melhores extensões para Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/vs-code-melhores-extensoes-para-front-end-parte-1) Conheça as melhores extensões disponíveis do VS Code para Front-End e melhore a eficiência dos seus trabalhos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/CSS-IN-JS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ CSS in JS ](https://www.treinaweb.com.br/blog/css-in-js) Veja neste artigo o CSS in JS, a técnica que permite escrever estilos CSS no JavaScript, deixando a aplicação flexível e modularizada. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/Plop.js-Automatize-a-criação-de-arquivos-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ Plop.js - Automatize a criação de arquivos ](https://www.treinaweb.com.br/blog/plop-js-automatize-a-criacao-de-arquivos) O Plop.js facilita a criação de arquivos em seus projetos, evitando que você tenha sempre que escrever código repetido para iniciar uma estrutura. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01133925/javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que se pode fazer com JavaScript hoje em dia? ](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia) Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12132017/introducao-swoole-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Trabalhando com corrotinas, canais e explorando um pouco mais o scheduler de corrotinas do Swoole ](https://www.treinaweb.com.br/blog/trabalhando-com-corrotinas-canais-e-explorando-um-pouco-mais-o-scheduler-de-corrotinas-do-swoole) Neste artigo trabalharemos com os conceitos fundamentais de corrotinas, canais, defer etc, também exploraremos algumas opções do scheduler como, por exemplo, fazê-lo operar de forma preemptiva. 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/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 - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/como-instalar-o-dart-e-executar-seu-primeiro-exemplo-400x280.png) [ Dart ](https://www.treinaweb.com.br/blog/categoria/dart) 6 anos atrás ## [ Como instalar o Dart e executar seu primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-o-dart-e-executar-seu-primeiro-exemplo) Neste artigo veremos como instalar o Dart nos sistemas Windows, Linux e MacOS e executar nosso primeiro programa com a linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/como-instalar-o-java-e-nosso-primeiro-exemplo-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Como instalar o Java e nosso primeiro exemplo ](https://www.treinaweb.com.br/blog/como-instalar-o-java-e-nosso-primeiro-exemplo) Neste artigo veremos como instalar o Java nos sistemas Windows, Linux e MacOS, além disso vamos ver como escrever e executar nosso primeiro programa com a linguagem Java. 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 **17h 50min 43s** - 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