From 640b2fdff359f58edba04bbf2d80c718e62bd302 Mon Sep 17 00:00:00 2001 From: "Begerad, Stefan" Date: Tue, 7 Jun 2022 09:39:54 +0200 Subject: [PATCH] feat(webpack-react): add *.jsx transpiling to *.js for React.js --- webpack-react/.babelrc | 6 ++++++ webpack-react/package.json | 8 ++++++++ webpack-react/public/index.html | 17 +++++++---------- webpack-react/src/components/home.jsx | 7 +++++++ webpack-react/src/index.js | 11 ++++++++++- webpack-react/webpack.config.js | 14 ++++++++++++++ 6 files changed, 52 insertions(+), 11 deletions(-) create mode 100644 webpack-react/.babelrc create mode 100644 webpack-react/src/components/home.jsx 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'),