O React se tornou uma ferramenta essencial para o desenvolvimento moderno da web, e configurá-lo em sua máquina é o primeiro passo para você começar a criar interfaces de usuário incríveis.
É uma biblioteca JavaScript popular para a criação de interfaces de usuário, com foco no desempenho e na reutilização, e revolucionou o desenvolvimento da web ao facilitar a criação de interfaces rápidas, responsivas e de fácil manutenção que realmente funcionam para as pessoas.
Sua arquitetura baseada em componentes e o foco no desempenho em configurações do mundo real, tornaram uma opção atraente para os desenvolvedores que desejam criar aplicativos modernos da web.
Neste guia abrangente, mostraremos processo de instalação do React nos sistemas operacionais Windows, macOS e Linux. Mas, primeiro, vamos discutir a importância do React e como ele pode beneficiar seu fluxo de trabalho de desenvolvimento.
Vamos lá!
O que é React?
React é uma poderosa biblioteca JavaScript projetada especificamente para a criação de interfaces de usuário. Ela foi desenvolvida por Jordan Walke, um engenheiro de software do Facebook, em 2013.
O React se concentra na criação e no gerenciamento de componentes da interface do usuário, que são partes reutilizáveis de código que podem gerenciar seu estado e renderizar elementos da interface do usuário. Sua arquitetura baseada em componentes incentiva os desenvolvedores a criar componentes modulares e reutilizáveis, reduzindo a quantidade de código duplicado e acelerando o tempo de desenvolvimento.
O uso de um DOM virtual no React aprimora a renderização, resultando em um desempenho mais rápido e eficiente em comparação com as técnicas tradicionais de manipulação do DOM. Esse foco no desempenho e na reutilização fez do React uma escolha popular entre os desenvolvedores.
Quem usa React?
React ganhou popularidade entre uma ampla gama de desenvolvedores, pois oferece uma maneira poderosa e flexível de criar interfaces de usuário para aplicativos da web. Veja a seguir algumas das pessoas que normalmente usam React:
- Desenvolvedores Web: Eles usam o React para criar interfaces de usuário envolventes e responsivas para sites e aplicativos da web. A arquitetura baseada em componentes do React permite que eles criem aplicativos modulares que são mais fáceis de manter e atualizar.
- Desenvolvedores Frontend: Esses desenvolvedores usam o React para criar componentes voltados para o usuário que interagem com serviços de backend e APIs. O React simplifica o processo de criação de interfaces de usuário complexas, dividindo em componentes menores e gerenciáveis.
- Desenvolvedores Full-Stack: Os desenvolvedores full-stack usam o React em conjunto com tecnologias de backend, como Node.js, Express e MongoDB, para criar aplicativos da web com recursos completos. A flexibilidade do React facilita a integração com vários sistemas de backend, simplificando o processo de desenvolvimento.
Muitas empresas de destaque no setor de tecnologia também usam o React, demonstrando sua versatilidade e ampla adoção. Alguns exemplos de empresas que usam o React em sua pilha de tecnologia incluem:
- Facebook: Como criador do React, o Facebook o utiliza extensivamente em seus aplicativos da web, incluindo o site principal do Facebook, o Instagram e o WhatsApp.
- Airbnb: Utiliza o React para construir suas interfaces de usuário, permitindo criar uma experiência perfeita e eficaz para seus usuários em diversas plataformas.
- Netflix: Utiliza o React para criar seu aplicativo web, aproveitando as otimizações de desempenho e a arquitetura baseada em componentes para proporcionar uma experiência de usuário tranquila.
- Uber: Utiliza o React para alimentar seus aplicativos da web, facilitando a criação de interfaces intuitivas e responsivas para seus usuários.
- Pinterest: O Pinterest aproveita a arquitetura baseada em componentes do React para criar um aplicativo da web visualmente impressionante e altamente interativo para que os usuários descubram e salvem ideias criativas.
- Reddit: Utiliza o React para desenvolver seu aplicativo web, proporcionando uma experiência de usuário rápida e envolvente para milhões de usuários em toda a plataforma.
- Dropbox: O Dropbox aproveita as otimizações de desempenho e a arquitetura baseada em componentes do React para criar um aplicativo web fácil de usar e eficiente para gerenciar e compartilhar arquivos.
Ao usar o React, essas empresas demonstram o poder e a flexibilidade dessa popular biblioteca JavaScript, tornando uma ferramenta essencial para o desenvolvimento moderno da web.
Vantagens do uso do React
O React oferece várias vantagens que o tornam uma escolha popular para o desenvolvimento moderno da web.
Aqui estão alguns dos principais benefícios:
O design baseado em componentes promove a reutilização
A arquitetura do React permite que os desenvolvedores criem componentes modulares e reutilizáveis, reduzindo a duplicação de código e facilitando a manutenção e a atualização de aplicativos. Essa abordagem promove a consistência e simplifica o processo de desenvolvimento.
DOM virtual para melhorar o desempenho
O React usa um DOM virtual para otimizar a renderização, tornando mais rápida e eficiente do que a manipulação tradicional do DOM. Ao atualizar apenas as partes do DOM que foram alteradas, o React minimiza o tempo gasto na renderização e melhora o desempenho geral do aplicativo.
Forte suporte da comunidade
A comunidade React é grande e muito ativa no desenvolvimento da tecnologia. As pessoas frequentemente compartilham o que sabem em lugares como fóruns on-line, redes sociais e blogs. Esse apoio forte da comunidade faz com que o React continue melhorando e evoluindo. Além disso, oferece um monte de recursos úteis para os desenvolvedores aprenderem e resolverem problemas.
Ampla variedade de bibliotecas e ferramentas de terceiros
O ecossistema React é vasto, com uma infinidade de bibliotecas e ferramentas disponíveis para ajudar os desenvolvedores a criar e otimizar seus aplicativos. Esses recursos podem economizar tempo e esforço, fornecendo soluções pré-construídas e aprimoramentos para tarefas e desafios comuns.
Escolha popular para o desenvolvimento moderno da web
O React ganhou adoção generalizada entre desenvolvedores e empresas, tornando-se uma escolha popular para a construção de aplicativos modernos da web. Essa popularidade significa que desenvolvedores com habilidades em React estão em alta demanda, tornando-se um conjunto de habilidades valioso no mercado de trabalho.
Pré-requisitos do React
Antes de começar a instalar e usar o React, é essencial que você tenha alguns conhecimentos e ferramentas básicos. Aqui estão os pré-requisitos para você começar a usar o React:
- Conhecimento básico de HTML, CSS e JavaScript: Você precisa estar familiarizado com essas tecnologias essenciais da web para entender como criar e estilizar componentes no React.
- Familiaridade com a linha de comando/terminal: O desenvolvimento do React geralmente envolve o uso de ferramentas e interfaces de linha de comando, portanto, é importante que você se sinta à vontade para navegar e executar comandos no terminal ou no prompt de comando do seu sistema.
- Node.js e npm instalados: O React depende do Node.js e do npm (Node Package Manager) para gerenciar dependências e executar scripts de build. Certifique-se de que você tenha ambos instalados em seu sistema antes de prosseguir com a instalação do React.
Requisitos do sistema
Antes de instalar o React, é importante garantir que seu sistema atenda aos requisitos necessários. Aqui está o que você precisa:
- Sistema operacional: Windows 10 ou 11, macOS 10.10 ou Ubuntu 16 são recomendados para que você tenha a melhor compatibilidade e desempenho.
- Hardware: Você precisa de pelo menos 4 GB de RAM e 10 GB de espaço de armazenamento para executar o React e suas ferramentas associadas sem problemas.
- Um navegador da web e acesso à Internet: Um navegador da web moderno (como Google Chrome, Mozilla Firefox ou Microsoft Edge) e acesso à Internet são necessários para que você possa visualizar e testar seus aplicativos React.
- Node.js e npm instalados: Como mencionado anteriormente, o React depende do Node.js e do npm para gerenciar dependências e executar scripts de build. Certifique-se de que você tenha ambos instalados em seu sistema.
Como instalar o React
Cada sistema operacional tem requisitos um pouco diferentes quando se trata de instalar o React. Siga as instruções adequadas abaixo, de acordo com o sistema operacional que você usa.
Como instalar o React no Windows
Nesta seção, vamos guiá-lo pelo processo de instalação do React em uma máquina Windows.
Siga estas etapas para você começar:
- Instale o Node.js e o npm
- Instale o aplicativo Create React
- Crie um novo projeto React
- Vá para o diretório do projeto e inicie o servidor de desenvolvimento
Etapa 1: Instale o Node.js e o npm
Antes de instalar o React, você precisa ter o Node.js e o npm (Node Package Manager) instalados em seu sistema. Se você ainda não os instalou, siga estas etapas:
- Visite a página de download do Node.js em: https://nodejs.org/en/download/
- Faça o download do instalador para o seu sistema Windows (você pode usar a versão LTS ou Current, mas a versão LTS é recomendada para a maioria dos usuários)
- Para instalar o Node.js e o npm, execute o instalador e siga cuidadosamente as instruções fornecidas.
Após a conclusão da instalação, você pode verificar se o Node.js e o npm estão instalados abrindo um prompt de comando e executando os seguintes comandos:
node -v npm -vEsses comandos devem exibir os números de versão do Node.js e do npm, respectivamente.
Etapa 2: instale o aplicativo Create React
O Create React App é uma ferramenta de linha de comando que simplifica o processo de configuração de um novo projeto React com uma estrutura e configuração de projeto recomendadas. Para instalar o Create React App globalmente, abra um prompt de comando e execute o seguinte comando:
npm install -g create-react-appEsse comando instala o Create React App em seu sistema, tornando disponível para uso em qualquer diretório.
Etapa 3: Crie um novo projeto React
Agora que você tem o Create React App instalado, pode usá-lo para criar um novo projeto React. Para fazer isso, abra um prompt de comando, vá para o diretório onde você deseja que o projeto fique e execute o seguinte comando:
create-react-app my-appSubstitua “my-app” pelo nome desejado para seu projeto. O Create React App criará um novo diretório com o nome especificado e gerará um novo projeto React com uma estrutura e configuração de projeto recomendadas.
Etapa 4: Vá para o diretório do projeto e inicie o servidor de desenvolvimento
Depois que o projeto for criado, vá para o diretório do projeto executando o seguinte comando no prompt de comando:
cd my-appSubstitua “my-app” pelo nome do diretório do projeto. Agora, inicie o servidor de desenvolvimento executando o seguinte comando:
npm startEsse comando inicia o servidor de desenvolvimento, que procura alterações nos arquivos do seu projeto e recarrega automaticamente o navegador quando as alterações são detectadas.
Uma nova janela do navegador deve ser aberta com seu aplicativo React em execução em http://localhost:3000/, com a seguinte aparência:
Você está de parabéns! Você instalou o React com êxito em sua máquina Windows e criou um novo projeto React. Agora você pode começar a criar suas interfaces de usuário com o React.
Como instalar o React no macOS
Agora, vamos passar pelo processo de instalar o React em um computador rodando macOS:
- Instale o Node.js e o npm
- Instale o aplicativo Create React em seu macOS
- Crie um novo projeto React
- Vá para o diretório do projeto e inicie o servidor de desenvolvimento
Etapa 1: Instale o Node.js e o npm
Assim como no processo de instalação do Windows, você também precisa ter o Node.js e o npm (Node Package Manager) instalados no sistema macOS. Se você ainda não os instalou, siga estas etapas:
- Visite a página de download do Node.js
- Faça o download do instalador do macOS
- Após o download, clique no arquivo .pkg na pasta Downloads para executar o instalador.
- Siga as instruções que aparecem na tela, incluindo a aceitação do Contrato de licença, a seleção do destino para os arquivos instalados e a seleção do tipo de instalação.
Após a conclusão da instalação, você pode verificar se o Node.js e o npm estão instalados abrindo um terminal e executando os seguintes comandos:
node -vnpm -vEsses comandos devem exibir os números de versão do Node.js e do npm, respectivamente.
Como alternativa, você pode instalar o Node.js e o npm por meio da linha de comando. Para fazer isso, abra o Terminal e insira:
brew install nodeAguarde a conclusão da instalação e, em seguida, verifique sua instalação da mesma forma que acima, digitando:
node -vE depois:
npm -vEtapa 2: Instale o Create React App em seu macOS
Agora, vamos instalar o Create React App no macOS.
O Create React App é uma maneira conveniente de configurar um aplicativo de página única com o mínimo de etapas e sem configuração.
Vamos prosseguir com as etapas de instalação.
Primeiro, abra o terminal e crie uma pasta chamada react-app digitando o seguinte comando:
mkdir react-appEm seguida, navegue até o diretório react-app com este comando:
cd react-appPara verificar se você está no diretório correto, digite o seguinte comando e pressione Enter:
pwdApós confirmar que está no diretório correto, você poderá criar um novo projeto React.
Etapa 3: Crie um novo projeto React
Agora que você tem o Create React App instalado, pode usá-lo para criar um novo projeto React. Digite o comando abaixo:
npx create-react-app my-appnpx é um módulo incluído no npm. As etapas de instalação levarão algum tempo, portanto, seja paciente.
Etapa 4: Vá para o diretório do projeto e inicie o servidor de desenvolvimento
Depois que o comando tiver sido executado com êxito, navegue até o diretório my-app:
cd my-appPor fim, digite:
npm startApós a execução bem-sucedida do comando, seu navegador da web padrão será aberto em
E é isso! Agora o React está instalado e pronto para ser usado em seu macOS.
Como instalar o React no Linux
Se você tiver um sistema baseado em Linux, siga este conjunto de etapas para instalar o React:
Etapa 1: Instale o npm
Faça login no seu servidor como um usuário sudo e execute o seguinte comando:
sudo apt install npmQuando a instalação for concluída, verifique a versão do npm instalada usando o comando:
npm --versionA instalação do npm também instala o Node.js. Confirme a versão do Node instalada usando o comando:
node --versionEtapa 2: Instale o utilitário create-react-app
o create-react-app é um utilitário que permite que você configure todas as ferramentas necessárias para um aplicativo React.
Ele economiza tempo e esforço ao configurar tudo do zero, dando a você uma vantagem inicial.
Para instalar a ferramenta, execute o seguinte comando npm:
sudo npm -g install create-react-appDepois de instalado, confirme a versão do create-react-app executando:
create-react-app --versionEtapa 3: Crie e inicie seu primeiro aplicativo React
Criar um aplicativo React é simples e direto. Vamos criar um aplicativo React chamado my-app da seguinte forma:
create-react-app my-appEsse processo leva cerca de 5 minutos para você instalar todos os pacotes, bibliotecas e ferramentas necessários para o aplicativo. A paciência é fundamental.
Se o aplicativo tiver sido criado com êxito, você receberá uma notificação com os comandos básicos que poderá executar para começar a gerenciar o aplicativo.
Para executar o aplicativo, navegue até o diretório do aplicativo:
cd my-appEm seguida, execute o comando:
npm startVocê verá um resultado mostrando como acessar o aplicativo no navegador.
Abra o navegador e navegue até o endereço IP do servidor:
http://server-ip:3000
E, assim como nos processos de instalação do Windows e do macOS, você deverá ver a logo do React no navegador:
Isso demonstra que o aplicativo React padrão está instalado e em execução.
Agora você instalou com sucesso o React no Linux e criou um aplicativo no React!
Resumo
Esperamos que você tenha achado este guia útil para o processo de instalação do React no Windows, macOS e Linux. Cobrimos os pré-requisitos e requisitos de sistema necessários para configurar um ambiente de desenvolvimento React, bem como a instalação do Node.js e npm. Também mostramos como usar a ferramenta create-react-app para criar um novo projeto React e iniciar um servidor de desenvolvimento.
Agora que você já tem o React instalado no seu computador, é hora de colocar a mão na massa, aprender as melhores práticas com tutoriais e entender como criar interfaces de usuário impressionantes. O design do React, os benefícios de desempenho e o forte suporte da comunidade fazem dele uma excelente escolha para o desenvolvimento moderno da web.
À medida que você avança em sua jornada com o React, talvez queira considerar o uso do Serviço de Hospedagem de Aplicativos da Kinsta para seus projetos React. A Kinsta fornece uma plataforma de hospedagem de alto desempenho, escalável e segura que pode ajudar você a obter o máximo de seus aplicativos React.
Boa sorte!
