axios: copied and adapted app axios from app config-tutorial

This commit is contained in:
Begerad, Stefan 2021-09-10 14:11:36 -04:00 committed by Begerad, Stefan
parent 1565cd0f4f
commit ab99e6cddc
11 changed files with 159 additions and 0 deletions

6
axios/.babelrc Normal file
View File

@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

13
axios/.eslintrc Normal file
View File

@ -0,0 +1,13 @@
{
"parser": "babel-eslint",
"extends": "react",
"env": {
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}

5
axios/.prettierrc Normal file
View File

@ -0,0 +1,5 @@
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}

1
axios/README.md Normal file
View File

@ -0,0 +1 @@
source: branch main

10
axios/index.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>axios</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

39
axios/package.json Normal file
View File

@ -0,0 +1,39 @@
{
"name": "axios",
"version": "1.0.0",
"description": "axios example",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development",
"test": "echo \"Error: no test specified\" && exit 1",
"format": "prettier --write \"src/**/*.js\"",
"eslint-fix": "eslint --fix \"src/**/*.js\"",
"build": "webpack --mode production"
},
"author": "Stefan Begerad",
"license": "GPL-3.0-or-later",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.4",
"@babel/preset-react": "^7.14.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"eslint": "^7.32.0",
"eslint-config-react": "^1.1.7",
"eslint-loader": "^4.0.2",
"eslint-plugin-react": "^7.25.1",
"html-webpack-plugin": "^5.3.2",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"prettier": "2.4.0",
"style-loader": "^3.2.1",
"webpack": "^5.52.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.1.1"
}
}

5
axios/src/index.js Normal file
View File

@ -0,0 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './main';
ReactDOM.render(<Main />, document.getElementById('root'));

23
axios/src/main.js Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
import './style/main.less';
function axiosGet () {
console.log('axiosGet() this: ', this);
}
/*
*component Main
*using class syntax from ES6
*Webpack needs Babel to process ES6 into ES5 syntaxes in order for this class to work
*/
class Main extends React.Component {
render () {
return (
<div>
<p>main</p>
<button onClick={axiosGet}>axios</button>
</div>
);
}
}
export default Main;

View File

@ -0,0 +1,3 @@
.header {
background-color: #3d3d;
}

View File

@ -0,0 +1,5 @@
@import "header.less";
@color: #f5adad;
body {
background-color: @color;
}

49
axios/webpack.config.js Normal file
View File

@ -0,0 +1,49 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//tell Webpack to generate src maps
devtool: 'inline-source-map',
//entry point of app
entry: './src/index.js',
//put the output of the bundling process at this place
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
static: {
//tell server to serve from this place
directory: path.join(__dirname, '/build'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
//use babel-loader to transpile these file types
'babel-loader',
//use esling-loader to hook JavaScript linter ESLint into Webpack
'eslint-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
],
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./index.html'),
}),
]
};