yarn init -y
- Adicionar React:
yarn add react react-dom
- Adicionar Babel e Webpack:
yarn add @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli
yarn add webpack-dev-server -D
- Criar o arquivo babel.config.js:
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
-
Adicionar loaders:
6.1: Babel
yarn add babel-loader
6.2 Styles
yarn add style-loader css-loader
6.3 Images
yarn add file-loader
-
Criar pasta public com um arquivo index.html:
`! + enter` para criar a estrutura inicial html
7.1 Adicionar elemento root e script na tag <body>
```
<div id="app"></div>
<script src="bundle.js"></script>
```
-
Criar pasta src com aquivos App.js e index.js:
8.1 scr/App.js
import React from 'react'; function App() { return ( <h1>My app</h1> ); } export default App;
8.2 src/index.js
import React from 'react'; import {render} from 'react-dom'; import App from './App'; render(<App />, document.getElementById('app'));
-
Criar arquivo webpack.config.js:
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
]
},
{
test: /.*\.(gif|png|jpe?g)$/i,
use: {
loader: 'file-loader',
}
}
]
}
}
- Criar scripts no package.json
"scripts": {
"dev": "webpack serve --mode development",
"build": "webpack --mode production"
},
-
Adicionar plugin para usar async/await:
11.1 Tranform runtime
yarn add @babel/plugin-transform-runtime
11.2 Adicionar no babel.config.js
plugins: [ '@babel/plugin-transform-runtime' ]