Criando a estrutura do Projeto
Até agora temos a seguinte estrutura de arquivos:
.
|-- node_modules
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock
Até agora tudo o que fizemos faz parte do ambiente de desenvolvimento do React, mas se tiver prestado bastante atenção deve ter notado que não adicionamos o React no nosso projeto. Vamos fazer isso agora. Primeiro, vamos criar uma pasta pra colocar os arquivos de nosso projeto React. Lembra que configuramos como propriedade entry no webpack o valor ./app/index.js? Com isso em mente, vamos criar nossa pasta e os primeiros arquivos do projeto.
Linux/MAC:
$ mkdir app
$ cd app
$ touch index.js
$ touch index.html
$ cd ..
Windows:
> mkdir app
> cd app
> type NUL > index.js
> type NUL > index.html
> cd ..
Agora nossa estrutura de arquivos está assim:
.
|-- app
|-- index.html
|-- index.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock
Precimos testar nosso ambiente. Para isso, vamos começar com algo bem simples para verifica se nossa configuração funciona.
Abra o index.js e adicione:
/*
./app/index.js
é o arquivo de entrada do webpack!
*/
console.log('React: Padawan a mestre Jedi book is awesome!!!');
Atualize também o index.html:
<!--
./app/index.html
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App Setup</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
O arquivo index.html é a página que carrega os nossos componentes React no browser. Vimos antes que precisamos do babel para compilar o nosso código em uma sintaxe suportada pela a maioria dos browsers. Nós codificamos nossos componentes React usando JSX e no nosso caso iremos usar também ES6. A sintaxe destes dois módulos não é suportada pela maioria dos navegadores, portanto, temos que executar este código através dos carregadores babel e, em seguida, o pacote de saída é o que vamos especificar para ser exibido no index.html.
Uma maneira de adicionar o arquivo empacotado ao nosso HTML é inserir uma tag de script e passar a localização do arquivo empacotado para a tag de script. Uma maneira melhor de fazer isto é usar este pacote chamado html-webpack-plugin. Ele fornece uma maneira fácil de ter todo o seu HTML gerado para você. Tudo o que você precisa é o esqueleto HTML padrão e ele cuidará de suas inserções de script com apenas algumas configurações. Vamos fazer isso a seguir.
Html-Webpack-Plugin
Primeiro, vamos instalar o plugin. Garanta que está na pasta raiz do projeto e execute o comando:
$ yarn add html-webpack-plugin
Abra seu arquivo de configuração do webpack webpack.config.js e adicione algumas configurações:
/*
./webpack.config.js
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
...
module: {
loaders: [
...
]
},
// Adicione esta linha
plugins: [HtmlWebpackPluginConfig]
}
Essa configuração é bem auto explicativa. Nós pegamos o html-webpack-plugin e criamos uma nova instância e setamos nosso index.html como template.
filename: É o nome do HTML que o plugin vai gerar.inject: Diz para o plugin para injetar qualquer Javascript logo antes do fechamento da tagbody.
Testando nosso projeto
Estamos quase no fim da criação de um projeto React. Vamos tentar rodar nossa configuração. Precisamos fazer apenas mais uma coisa. Abra o seu package.json e adicione um script de início:
/*
./package.json
*/
{
"name": "hello-world-react",
"version": "1.0.0",
"description": "Projeto teste de configuração ambiente React",
"main": "index.js",
"author": "Valter Júnior",
"license": "MIT",
// adicione essa nova propriedade "script" no package.json
"scripts": {
"start": "webpack-dev-server"
},
"dependencies": {
...
},
"devDependencies": {
...
}
}
Agora podemos ir no terminal e rodar:
$ yarn start
Abra o browser e digite http://localhost:8080/. Se você checar o seu console vai ver a mensagem "React: Padawan a mestre Jedi book is awesome!!!". A razão que usamos localhost:8080é porque o webpack-dev-server serve todos os arquivos na porta 8080. Note também que webpack-dev-server é executado quando iniciamos o nosso script.