Conheça o React, biblioteca para desenvolvimento Web \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 07 Horas 03 Min 26 Seg Tempo restante da oferta: 07 03 26 [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) Conheça o React, biblioteca para desenvolvimento Web [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Conheça o React, biblioteca para desenvolvimento Web Veja neste artigo o que é o React, biblioteca JavaScript para desenvolvimento web. [ Ana Paula de Andrade ](https://www.treinaweb.com.br/blog/autor/ana-paula-andrade) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT.jpg) O React, lançado em 2013, é uma biblioteca JavaScript de código aberto, fundamental para criação de aplicações front-end. Anteriormente denominado React.js ou ReactJS, foi desenvolvido pelo Facebook para criação de elementos de interface reutilizáveis de forma simples, intuitiva e com uma ótima performance. Multiplataforma sobre a licença MIT, diversas são as empresas que o utilizam. Dentre elas podemos citar o próprio Facebook, o Instagram, que também faz parte da empresa Facebook, Twitter, Netflix, Uber, Spotify e muitas outras. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ## Principais características do React O [React](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-no-react-16/ "React") possui diversas características marcantes, o que o torna uma excelente escolha para o desenvolvimento de aplicações, como podemos ver abaixo: - Licença MIT: Apesar de parecer bobagem, o react, hoje, é licenciado sob a MIT, o que tranquiliza os desenvolvedores que utilizam este framework, já que eles não precisam se preocupar com patentes; - Utiliza Javascript: O Javascript é uma das principais linguagens de desenvolvimento do mundo. Por utilizá-lo, o React agrega a maioria das suas vantagens, além de ser grandemente utilizado por diversos desenvolvedores; - Utiliza componentes: O React utiliza a componentização para criação de interfaces, garantindo uma maior flexibilidade e reutilização de interfaces; - Desenvolvimento móvel: Em conjunto com o react native, podemos desenvolver aplicações mobile reutilizando componentes criados com o react. - Amplamente utilizado: [O React é uma das principais tecnologias para desenvolvimento web](https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks "O React é uma das principais tecnologias para desenvolvimento web") (e mobile) do mundo. ## Empresas que utilizam o React Diversas são as empresas que utilizam o React para o desenvolvimento de suas soluções, o que a torna uma tecnologia ainda mais atrativa. Dentre essas empresas, podemos citar: - Twitter: O Twitter, uma das principais redes sociais do mundo, utiliza o react para criação de suas aplicações; - Facebook: Apesar de ter desenvolvido o React, o Facebook também o utiliza para construção de suas aplicações; - Medium: O Medium, uma das principais plataformas de blog do mundo utiliza o React para construção de sua aplicação web; - Airbnb: Uma das principais plataformas de aluguel, o Airbnb utiliza o React em sua aplicação web. ## Quais conhecimentos preciso ter para iniciar com o React? Por utilizar o Javascript como base para sua construção, para iniciar com o React, é essencial que o desenvolvedor possua conhecimento com essa linguagem. Além disso, é de grande importância que o desenvolvedor possua conhecimentos de HTML e CSS para a construção de interfaces. Aqui na TreinaWeb possuímos diversos cursos de JavaScript, que abordarão todos os conceitos essenciais para iniciar com esta tecnologia. [ ![Desenvolvedor Front-end Pleno](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Formação Desenvolvedor Front-end Pleno Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-pleno) ## Sintaxe do React A sintaxe do React é bem simples. Basicamente, os componentes do React implementam um método render() que recebe os dados de entrada e retornam o que deve ser exibido. ```react class Treinaweb extends React.Component { render() { return ( Olá, {this.props.nome}! ); } } ReactDOM.render( , document.getElementById('exemplo') ); ``` Este exemplo usa uma sintaxe parecida com [XML](https://www.treinaweb.com.br/blog/o-que-e-xml/ "XML"), chamada [JSX](https://www.treinaweb.com.br/blog/o-que-e-jsx/ "JSX"). Os dados de entrada que são passados para o componente podem ser acessados no render() via this.props. ## Podemos concluir que… O React é uma excelente biblioteca JavaScript para o desenvolvimento de aplicações web. Muitas empresas o utilizam, o que o torna ainda mais desejada, já que a quantidade de vagas é cada dia maior. Em conjunto com o [React Native](https://www.treinaweb.com.br/blog/o-que-e-o-react-native/ "React Native"), podemos reutilizar diversos componentes desenvolvidos com o React para a construção de aplicações móveis, tornando a solução ainda mais completa. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #react ](https://www.treinaweb.com.br/blog/tag/react) - [ #react native ](https://www.treinaweb.com.br/blog/tag/react-native) Autor ![Ana Paula de Andrade](//secure.gravatar.com/avatar/76297b487187c82ae476e823018dbfc0?d=mm) ## Ana Paula de Andrade Graduanda em Sistemas de Informação pelo Instituto Federal da Bahia. É responsável pelo atendimento ao cliente, gerenciamento de redes sociais e revisão de cursos, além da redação de artigos para o blog da TreinaWeb. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ana-paula-andrade) ## 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/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/2017/11/06145813/react-16-400x280.jpg) [ Padrões de Projeto ](https://www.treinaweb.com.br/blog/categoria/padroes-de-projeto) 4 anos atrás ## [ Boas práticas para o React ](https://www.treinaweb.com.br/blog/boas-praticas-para-o-react) Veja neste artigo algumas das dicas e boas práticas para utilizar em uma aplicação React e tenha um código mais limpo na sua aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/storybook-a-melhor-maneira-de-criar-componentes-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Storybook - A melhor maneira de criar componentes ](https://www.treinaweb.com.br/blog/storybook-a-melhor-maneira-de-criar-componentes) Conheça o Storybook e como ele pode te ajudar a criar componentes da melhor maneira possível, com incríveis benefícios para o seu projeto! 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/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/05/selecionando_cores-1-400x280.png) [ Web Services ](https://www.treinaweb.com.br/blog/categoria/web-services) 10 anos atrás ## [ Você conhece o GraphQL e como ele pode te ajudar? ](https://www.treinaweb.com.br/blog/voce-conhece-o-graphql-e-como-ele-pode-te-ajudar) O GraphQL é uma linguagem de consulta que facilita o nosso trabalho na hora de fazer requisições, basta que indiquemos os campos que queremos sem que nos preocupemos de onde os dados estão vindo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ang_ignore-1-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Perdendo o preconceito com o novo Angular ](https://www.treinaweb.com.br/blog/perdendo-o-preconceito-com-o-novo-angular) Vou citar alguns itens que me desanimavam sobre o novo Angular e o motivo de eu ter mudado de ideia. Quem sabe você considere utilizá-lo em seu próximo projeto? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151422/ARQUITETURA-FLUX-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 8 anos atrás ## [ Flux - descubra o motivo do sucesso dessa arquitetura em grandes empresas ](https://www.treinaweb.com.br/blog/flux-descubra-o-motivo-do-sucesso-dessa-arquitetura-em-grandes-empresas) Conheça a Arquitetura Flux e entenda o motivo dela estar se tornando cada vez mais requisitada no mercado de trabalho ao se desenvolver sistemas. 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/2019/09/05155108/React-Hooks-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ React: Conheça o Poder dos Hooks ](https://www.treinaweb.com.br/blog/react-conheca-o-poder-dos-hooks) Conheça o que os React Hooks podem fazer e como eles vão facilitar o processo de desenvolvimento da sua próxima aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/react-17-conheca-o-que-vai-mudar-no-jsx-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ 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) Veja o que teremos de diferente no JSX a partir do React 17 e como isso irá influenciar suas aplicações daqui para frente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/04133725/novo-painel-treinaweb-ava-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ O que há de novo na plataforma da TreinaWeb? Conheça as novas funcionalidades! ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-na-plataforma-da-treinaweb-conheca-as-novas-funcionalidades) Venha conhecer as novas funcionalidades da nova plataforma de ensino da TreinaWeb e aprenda dicas para aproveitá-la melhor. 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 **07h 03min 26s** - 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