Create React WebPack Babel Structure App Manually 1/2
npx create-react-app my_react_app_name
Is the command to create an app with all his file structure, but if we need to do a personalized structure of project we neet to do the steps one by one.
Requisites:
- node js
- Git
- Visual Code Studio to edit the project files
1. Create a directory where our project of React will be installed, in this case react-webpack.
2. initialize the node project (can be added -y to say yes to all the options)
>npm init -y
this create the package.json file.
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Now install webpack and webpack-cli
$ npm install webpack webpack-cli --save-dev
Then a directory with files called node_modules will be created and package.json update their dependencies including webpack
Create the webpack configuration file webpack.config.js as indicated in the documentation of webpack
const path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js',
},
};
Create the file and directory /src/index.js with console message just to test the configuration
console.log('Config Webpack OK!');
Adjust the webpack.config.js file
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
};
Modify the package.json file to add the script to excecte the webpack command
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
}
}
In git command line execute the command
npm run build
$ npm run build
> react-webpack@1.0.0 build D:\Descargas\Tutorial2021\ReactCrashCourse2021\react-webpack
> webpack --watch
asset bundle.js 1.22 KiB [emitted] (name: main)
./src/index.js 34 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 72 ms
> react-webpack@1.0.0 build D:\Descargas\Tutorial2021\ReactCrashCourse2021\react-webpack
> webpack --watch
asset bundle.js 1.22 KiB [emitted] (name: main)
./src/index.js 34 bytes [built] [code generated]
webpack 5.51.1 compiled successfully in 72 ms
To call the bundle.js created, create the file /public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
Open the index.html in the browser and open the inspection menu (F12) and open the console, the message will be displayed
Config Webpack OK!
Stop the npm command from terminal with ctrl+C.
Install React
In the terminal (VCS or command line) type
npm install react react-dom
npm install react react-dom
npm WARN react-webpack@1.0.0 No description
npm WARN react-webpack@1.0.0 No repository field.
+ react@17.0.2
+ react-dom@17.0.2
added 6 packages from 3 contributors and audited 127 packages in 2.32s
17 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
In package.json we can see the dependencies updated with react
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
Install Babel in order to work with EcmaScript6 and above.
In Babel webpage documentation tell us that we need install for webpack, babel-loader and @babel/core https://babeljs.io/setup#installation
npm install --save-dev babel-loader @babel/coreconst path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env","@babel/preset-react"]
}
}
}
]
}
};
Now, configure babel creating the configuration babel file
babel.config.json and install
npm install @babel/preset-env --save-devnpm install --save-dev @babel/preset-reactAlso add this preset for react in babel.config.js
{
"presets" ["@babel/preset-env","@babel/preset-react"]
}
Update the index.js in order to execute react instructions.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Test React Webpack Babel configuration.</h1>,
document.getElementById('root'));
console.log('Config Webpack OK!');
To test run in terminal npm run build
We need to install also
npm install --save-dev babel-loader @babel/coreRerun the npm run build, if no error then the browser will show
Test React Webpack Babel configuration.
and the console message: Config Webpack OK!
eot
No hay comentarios:
Publicar un comentario