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 reactAppPara 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 initEste 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 --saveOu você pode instalar todos eles em um único comando como -
C:\Users\username\Desktop\reactApp>npm install react react-dom --saveEtapa 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 --saveOu você pode instalar todos eles em um único comando como -
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --savePasso 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-devOu 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-devEtapa 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 > .babelrcEtapa 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 startEle 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 buildIsso 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-appIsso 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)? yEtapa 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.jsNo 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