Como instalar o React no Windows? O Guia Completo

O ReactJS é uma biblioteca JavaScript gratuita e de código aberto que mudou significativamente as antigas técnicas de desenvolvimento de front-end. Tornado público em 2013, o React era um projeto interno do Facebook. Desde então, o React foi adotado por várias organizações e startups. Os desenvolvedores de front-end com conhecimento suficiente de JavaScript, HTML e CSS podem criar interfaces de usuário interativas para aplicativos da Web e móveis. Uma das maiores vantagens do ReactJS é sua abordagem baseada em componentes. Construir componentes reutilizáveis ​​encapsulados com seu próprio estado independente simplifica as interfaces de usuário complexas.

Curiosamente, tudo o que escrevemos em ReactJS pode parecer HTML, mas não é. É conhecido como JSX, arquivo XML JavaScript. Este JSX produz “elementos” React, que são renderizados no Document Object Model. Em termos leigos, JSX nos permite escrever lógica JavaScript dentro do corpo HTML. Tornando assim o React muito mais simples e fácil de entender.

Para fazer seu uso ideal, vamos nos aprofundar para aprender como instalar o React JS no Windows.

Como instalar o React JS no Windows?

Requisitos do sistema para Windows

Embora o uso do ReactJs seja indolor, o processo de instalação do React JS no Windows pode ser bastante tedioso. Como o ReactJS é um projeto de código aberto, não é tão simples quanto baixar um software da Internet. Em primeiro lugar, existem alguns pré-requisitos para usar o ReactJS no Windows.

1. Versão do Windows: Windows XP, Windows 7 (32/64 bits) ou superior.
2. Mínimo de 4 GB de RAM necessários.
3. Um mínimo de 10 GB de espaço em disco em seu disco rígido.
4. Um navegador de internet como Chrome, Microsoft Edge, Firefox etc.
5. Um editor para depurar e testar código escrito em ReactJS.

Aprenda Cursos de Desenvolvimento de Software online nas melhores universidades do mundo. Ganhe Programas Executivos de PG, Programas de Certificado Avançado ou Programas de Mestrado para acelerar sua carreira.

Baixando e Instalando o Node.js

Node.js é o servidor que ajuda você a executar o código ReactJS em seu sistema. Muito parecido com o ReactJS, também é de código aberto. O instalador do Node.js inclui o NPM (Node Package Manager), que contém vários módulos de nós que os desenvolvedores usam para hospedar e publicar seus próprios módulos em comunidades de código aberto. Assim, o Node funciona lado a lado com o registro NPM, o que facilita a instalação de qualquer pacote usando o NPM CLI. O Node envolve ainda mais o aplicativo ReactJS em um único usando pacotes da web para facilitar a instalação.

Aqui está o procedimento passo a passo para baixar e instalar o Node.js:

1. Para instalar o Node.js, acesse https://nodejs.org/en/ .
2. Dependendo da versão do sistema operacional Windows, você deve escolher um instalador adequado.
3. A página inicial do Node.js recomenda uma versão LTS dependendo do seu sistema operacional. Ao clicar nele, o download será iniciado automaticamente.
4. Você encontrará o instalador na pasta de downloads. Execute o instalador.
5. Um assistente de configuração aparecerá na tela, que solicitará o Contrato de licença do usuário final. Aceite os termos e condições para prosseguir com a instalação.
6. Em seguida, o usuário deve selecionar uma pasta de destino com o caminho padrão do instalador. Clique em próximo para prosseguir.
7. O instalador mostra os recursos que serão instalados e também define as variáveis ​​de caminho do ambiente para o prompt de comando. Clique em próximo para iniciar a instalação.
8. Após a conclusão da instalação, verifique o Node.js em seu sistema usando o prompt de comando.
9. Digite “node -v” no prompt de comando para verificar a versão do Node.js instalada.
10. Digite “npm -v” no prompt de comando para verificar a instalação do npm também.

Instalando o React

Após a instalação do Node.js, podemos instalar o React JS no Windows usando duas técnicas:

• Usando pacote web e Babel

1. Criando Pasta Raiz

Antes de instalar o ReactJS, crie uma pasta raiz com o nome “reactFile” usando os seguintes comandos no prompt de comando.

C:\Users\username\Desktop>mkdir reactFile

C:\Usuários\nome de usuário\Desktop>cd reactFile

Depois de criar o diretório, gere um arquivo package.json usando o seguinte comando no prompt de comando. Um arquivo package.json ajuda a criar módulos.

C:\Users\username\Desktop>reactFile> npm init

O prompt de comando solicita informações sobre o módulo; pule-o selecionando a opção “-y”.

2. Instale React e react-dom

Instale os pacotes React e react-dom usando os seguintes comandos npm e adicione os pacotes ao arquivo package.json usando o comando “-save”.

C:\Users\username\Desktop>reactFile> npm install react –save

C:\Users\username\Desktop>reactFile> npm install react-dom –save

Explore nossos cursos gratuitos de desenvolvimento de software

3. Instale o Webpack

Instale webpack, webpack-dev-server e webpack-cli usando os seguintes comandos.

C:\Users\username\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. Instale Babel

Babel é um transpiler que converte código JavaScript em algo que o navegador entende. Portanto, instalar o Babel e seus seguintes plugins, ou seja, babel-loader, babel-preset-env, babel-preset-react e html-webpack-plugin, é muito importante.

Use o seguinte comando para instalar todos os plugins babel de uma só vez.

C:\Users\username\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. Crie arquivos ReactJS

Para finalizar o processo de instalação, devemos criar manualmente determinados arquivos usando o prompt de comando.

C:\Users\username\Desktop\reactFile>type nul > index.html

C:\Users\username\Desktop\reactFile>type nul > App.js

C:\Users\username\Desktop\reactFile>digite nul > main.js

C:\Users\username\Desktop\reactFile>type nul > webpack.config.js

C:\Users\username\Desktop\reactFile>type nul > .babelrc

6. Compilador de configuração, servidores e carregadores

Depois que esses arquivos ReactJS forem criados dentro da pasta “reactFile”, você pode preparar o servidor de implantação configurando-o na porta 8001 ou qualquer porta que desejar em webpack.-config.js.

Use o seguinte código no arquivo webpack-config.js,

const caminho = require('caminho');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entrada: './main.js',

saída: {

caminho: path.join(__dirname, '/bundle'),

nome do arquivo: 'index_bundle.js'

},

devServer: {

em linha: verdadeiro,

porta: 8001

},

módulo: {

regras: [

{

teste: /\.jsx?$/,

excluir: /node_modules/,

loader: 'babel-loader',

consulta: {

predefinições: ['es2015', 'reagir']

}

}

]

},

plugins:[

novo HtmlWebpackPlugin({

modelo: './index.html'

})

]

}

7. Configurando index.html

Dentro do index.html, escreva um código HTML regular com div id=”app” como o elemento raiz e, em seguida, adicione o script index_bundle.js no corpo do HTML.

Habilidades de desenvolvimento de software sob demanda

8. Configurando App.js e main.js

Escreva o componente React dentro do App.js para renderizar uma classe ou função. Insira o texto que deseja renderizar dentro do componente, que aparecerá no navegador depois de compilado. Em seguida, importe o componente para nosso elemento App raiz dentro do main.js para que os resultados apareçam no navegador.

Crie um arquivo “.babelrc” e insira as seguintes linhas de código,

{

“presets”:[“env”, “reagir”]

}

9. Exibição do conteúdo na página da Web

A configuração está finalmente concluída e o servidor estará funcionando assim que você digitar o seguinte comando no prompt de comando.

C:\Users\username\Desktop\reactFile>npm start

Assim que você pressionar enter, o navegador mostrará a mensagem que você renderizou dentro do componente.

• Usando o comando create-react-app

1. Instale o aplicativo create-react

Abra o prompt de comando e escreva o código a seguir para instalar o aplicativo create-react-app.

C:\Users\username\Desktop>npx create-react-app my-app

Este comando instala todos os arquivos e pastas necessários dentro da pasta “my-app” de sua área de trabalho. Esta linha de código finaliza a instalação do React em seu sistema em poucos minutos.

2. Execute o servidor

Vá para o prompt de comando e digite

C:\Usuários\nome de usuário\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>my-app> npm start

Seu projeto React está funcionando em seu navegador com a ajuda do localhost, que hospeda seu projeto na porta disponível.

Explore nossos cursos populares de engenharia de software

Conclusão

O ReactJS mudou o jogo de desenvolvimento de front-end desde seu lançamento e se tornou uma das bibliotecas JavaScript de código aberto mais populares. Diversas empresas, como Meta, Netflix e Slack, utilizam o ReactJS. Uma das maiores vantagens é a reutilização dos componentes para renderizar alterações na página da web. Vários aplicativos React são implantados no Azure Web App usando o Azure DevOps. Esta é uma das habilidades mais procuradas na indústria de TI agora.

Se você é um desenvolvedor do React, pode aprimorar suas habilidades conhecendo o Azure DevOps por meio do Programa de Certificação Avançada upGrad em DevOps do IIIT Bangalore . O curso oferece mais de 250 horas de módulos de aprendizagem, juntamente com um guia de preparação para entrevistas. Você também poderá participar de sessões de orientação de carreira com especialistas em DevOps, que podem fornecer um roteiro claro do que o setor espera. Você recebe um certificado e o status de ex-aluno do IIITB ao final do curso, tornando-o uma adição excepcional ao seu currículo!