ReactJS - Configuração de ambiente

Neste capítulo, mostraremos como configurar um ambiente para um desenvolvimento React bem-sucedido. Observe que há muitas etapas envolvidas, mas isso ajudará a acelerar o processo de desenvolvimento posteriormente. Nós vamos precisarNodeJS, então, se você não o tiver instalado, verifique o link da tabela a seguir.

Sr. Não.	Software e descrição
1	NodeJS and NPM NodeJS é a plataforma necessária para o desenvolvimento do ReactJS. Verifique nossa configuração de ambiente NodeJS .

Depois de instalar o NodeJS com sucesso, podemos começar a instalar o React nele usando o npm. Você pode instalar o ReactJS de duas maneiras

Usando webpack e babel.
Usando o create-react-app comando.

Instalando ReactJS usando webpack e babel

Webpacké um empacotador de módulos (gerencia e carrega módulos independentes). Ele pega módulos dependentes e os compila em um único pacote (arquivo). Você pode usar este pacote durante o desenvolvimento de aplicativos usando a linha de comando ou configurando-o usando o arquivo webpack.config.

Babel é um compilador e transpilador JavaScript. Ele é usado para converter um código-fonte em outro. Usando isso, você será capaz de usar os novos recursos do ES6 em seu código, onde o babel o converte em um antigo ES5 que pode ser executado em todos os navegadores.

Etapa 1 - Criar a pasta raiz

Crie uma pasta com o nome reactApp na área de trabalho para instalar todos os arquivos necessários, usando o comando mkdir.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Para criar qualquer módulo, é necessário gerar o package.jsonArquivo. Portanto, após criar a pasta, precisamos criar umpackage.jsonArquivo. Para fazer isso, você precisa executar onpm init comando no prompt de comando.

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

Este comando pede informações sobre o módulo, como nome do pacote, descrição, autor, etc., você pode pular esses usando a opção –y.

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Etapa 2 - instalar React e react dom

Já que nossa principal tarefa é instalar o ReactJS, instale-o e seus pacotes dom, usando install react e react-domcomandos do npm respectivamente. Você pode adicionar os pacotes que instalamos, parapackage.json arquivo usando o --save opção.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Ou você pode instalar todos eles em um único comando como -

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

Etapa 3 - Instale o webpack

Uma vez que estamos usando webpack para gerar bundler install webpack, webpack-dev-server e webpack-cli.

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

Ou você pode instalar todos eles em um único comando como -

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

Passo 4 - Instale o babel

Instale o babel e seus plug-ins babel-core, babel-loader, babel-preset-env, babel-preset-react e, html-webpack-plugin

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

Ou você pode instalar todos eles em um único comando como -

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

Etapa 5 - Criar os arquivos

Para completar a instalação, precisamos criar certos arquivos, a saber, index.html, App.js, main.js, webpack.config.js e,.babelrc. Você pode criar esses arquivos manualmente ou, usandocommand prompt.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Etapa 6 - Definir compilador, servidor e carregadores

Abrir webpack-config.jsarquivo e adicione o código a seguir. Estamos configurando o ponto de entrada do webpack como main.js. O caminho de saída é o local onde o aplicativo empacotado será servido. Também estamos configurando o servidor de desenvolvimento para8001porta. Você pode escolher qualquer porta que desejar.

webpack.config.js

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

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Abra o package.json e deletar "test" "echo \"Error: no test specified\" && exit 1" dentro "scripts"objeto. Estamos excluindo esta linha, pois não faremos nenhum teste neste tutorial. Vamos adicionar ostart e build em vez disso.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Etapa 7 - index.html

Este é apenas um HTML normal. Estamos definindodiv id = "app" como um elemento raiz para nosso aplicativo e adicionar index_bundle.js script, que é nosso arquivo de aplicativo empacotado.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Etapa 8 - App.jsx e main.js

Este é o primeiro componente React. Explicaremos os componentes do React em detalhes em um capítulo subsequente. Este componente irá renderizarHello World.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

Precisamos importar este componente e renderizá-lo em nossa raiz App elemento, para que possamos vê-lo no navegador.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Note - Sempre que você quiser usar algo, você precisa importprimeiro. Se você deseja tornar o componente utilizável em outras partes do aplicativo, você precisaexport após a criação e importe-o no arquivo onde deseja utilizá-lo.

Crie um arquivo com o nome .babelrc e copie o seguinte conteúdo para ele.

{
   "presets":["env", "react"]
}

Etapa 9 - Executando o servidor

A configuração está concluída e podemos iniciar o servidor executando o seguinte comando.

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

Ele mostrará a porta que precisamos abrir no navegador. No nosso caso, éhttp://localhost:8001/. Depois de abri-lo, veremos a seguinte saída.

Etapa 10 - Gerando o pacote

Finalmente, para gerar o pacote, você precisa executar o comando build no prompt de comando como -

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

Isso irá gerar o pacote na pasta atual, conforme mostrado abaixo.

Usando o comando create-react-app

Em vez de usar webpack e babel, você pode instalar o ReactJS mais simplesmente instalando create-react-app.

Etapa 1 - instalar create-react-app

Navegue pela área de trabalho e instale o aplicativo Create React usando o prompt de comando conforme mostrado abaixo -

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

Isso criará uma pasta chamada my-app na área de trabalho e instalará todos os arquivos necessários nela.

Etapa 2 - Excluir todos os arquivos de origem

Navegue pela pasta src na pasta my-app gerada e remova todos os arquivos nela conforme mostrado abaixo -

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Etapa 3 - Adicionar arquivos

Adicionar arquivos com nomes index.css e index.js na pasta src como -

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

No arquivo index.js, adicione o seguinte código

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Etapa 4 - Executar o projeto

Finalmente, execute o projeto usando o comando start.

npm start

↰ Previous page Next page ↱