Create an application to upload and share pet photos using Webpack, GraphQL, React Hooks, React Router, SEO and PWAs.
- Step 1: We are going to clone the repository from [advamced react Platzi course](https: github.com/midudev/course-platzi-react- advanced) using
git clone URL_DEL_REPO
on our console. - Step 2: We are going to install webpack and webpack-cli as development dependencies with: npm i webpack wepack-cli --save-dev`.
- Step 3: We will create a folder called
src
and inside it a fileindex.js
in which we will only put aconsole.log ('We start the course!')
. - Step 4: We will create in the root of our project a file
webpack.config.js
which will have all the webpack configuration - Step 5: We will install
html-webpack-plugin
with: npm and html-webpack-plugin --save-dev`. - Step 6: We will install
webpack-dev-server
with: npm and webpack-dev-server --save-dev`. - Step 7: We will add a new script called
dev
:"dev": "webpack-dev-server"
.
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
output: {
filename: 'app.bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
In this class we are going to configure React by installing the dependencies npm i react react-dom and Babel to be able to transpile jsx code into JavaScript Vanilla with: npm i @ babel / core @ babel / preset-env babel-loader @ babel / preset-react - -save-dev
Now we will add the following to our webpack.config.js:
// webpack.config.js
{/*...*/}
module.exports = {
{/*...*/}
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
]
}
}
###ย
Notion link