diff --git a/webpack-react/.babelrc b/webpack-react/.babelrc
new file mode 100644
index 0000000..4f06b0c
--- /dev/null
+++ b/webpack-react/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ]
+}
diff --git a/webpack-react/package.json b/webpack-react/package.json
index 1e6dd8a..b4e3c74 100644
--- a/webpack-react/package.json
+++ b/webpack-react/package.json
@@ -17,8 +17,16 @@
"start": "webpack serve --config ./webpack.config.js --mode development"
},
"devDependencies": {
+ "@babel/core": "^7.18.2",
+ "@babel/preset-env": "^7.18.2",
+ "@babel/preset-react": "^7.17.12",
+ "babel-loader": "^8.2.5",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.2"
+ },
+ "dependencies": {
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0"
}
}
diff --git a/webpack-react/public/index.html b/webpack-react/public/index.html
index dab22fc..fe28c43 100644
--- a/webpack-react/public/index.html
+++ b/webpack-react/public/index.html
@@ -1,13 +1,10 @@
-
-
-
- React with webpack
-
-
-
-
Hello Webpack
-
+
+
+ Hello React
+
+
+
-
+
diff --git a/webpack-react/src/components/home.jsx b/webpack-react/src/components/home.jsx
new file mode 100644
index 0000000..7432700
--- /dev/null
+++ b/webpack-react/src/components/home.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Home = () => {
+return React.js Lambda Function Component
+}
+
+export default Home
diff --git a/webpack-react/src/index.js b/webpack-react/src/index.js
index eb171b6..cced3f0 100644
--- a/webpack-react/src/index.js
+++ b/webpack-react/src/index.js
@@ -1 +1,10 @@
-console.log("Hello World")
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Home from './components/home';
+
+//since react 18
+import { createRoot } from 'react-dom/client';
+//create root container
+const root = createRoot(document.getElementById("root"));
+//render root app
+root.render();
diff --git a/webpack-react/webpack.config.js b/webpack-react/webpack.config.js
index f6f548c..eda630f 100644
--- a/webpack-react/webpack.config.js
+++ b/webpack-react/webpack.config.js
@@ -4,6 +4,20 @@ const path = require('path');
module.exports = {
//bundle *.js from this entry point
entry: path.resolve(__dirname, './src/index.js'),
+ module: {
+ rules: [
+ {
+ //test all *.js using babel-loader
+ //test all *.jsx (e.g. React.js) using babel-loader
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: ['babel-loader'],
+ }
+ ]
+ },
+ resolve: {
+ extensions: ['*', '.js', '.jsx'],
+ },
//create output file to be linked to index.html
output: {
path: path.resolve(__dirname, './public'),