diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8334119
--- /dev/null
+++ b/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "React-With-Webpack",
+ "version": "1.0.0",
+ "main": "index.jsx",
+ "author": "Arnaud Fauconnet",
+ "license": "MIT",
+ "scripts": {
+ "build": "webpack",
+ "serve": "webpack serve"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.19.3",
+ "@babel/preset-env": "^7.19.3",
+ "@babel/preset-react": "^7.18.6",
+ "babel-loader": "^8.2.5",
+ "css-loader": "^6.7.1",
+ "html-webpack-plugin": "^5.5.0",
+ "mini-css-extract-plugin": "^2.6.1",
+ "sass": "^1.55.0",
+ "sass-loader": "^13.1.0",
+ "style-loader": "^3.3.1",
+ "webpack": "^5.74.0",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.11.1"
+ },
+ "dependencies": {
+ "@types/jest": "^29.1.1",
+ "@types/node": "^18.8.2",
+ "@types/react": "^18.0.21",
+ "@types/react-dom": "^18.0.6",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "ts-loader": "^9.4.1",
+ "typescript": "^4.8.4"
+ }
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..a0b3562
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import "./style.scss"
+
+export default function App() {
+ return (
+
+ React with Webpack
+
+
This box should be centered
(and also this this text)
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/html/template.html b/src/html/template.html
new file mode 100644
index 0000000..d5516ff
--- /dev/null
+++ b/src/html/template.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ React with Webpack
+
+
+
+
+
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..4b77fc7
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from "./App"
+
+createRoot(document.querySelector("#root")).render()
diff --git a/src/style.scss b/src/style.scss
new file mode 100644
index 0000000..b697a9b
--- /dev/null
+++ b/src/style.scss
@@ -0,0 +1,31 @@
+$box-background: blue;
+$container-background: lime;
+$title-color: cyan;
+
+main {
+ h1 {
+ color: $title-color;
+ text-align: center;
+ }
+
+ #container{
+ display: flex;
+ background-color: $container-background;
+ width: 100vw;
+ height: 50vh;
+ align-items: center;
+ justify-content: center;
+
+ #box{
+ width: 50%;
+ height: 50%;
+ background-color: $box-background;
+ display: flex;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..c262bc6
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "compilerOptions": {
+ "outDir": "./dist/",
+ "noImplicitAny": true,
+ "allowSyntheticDefaultImports": true,
+ "module": "es6",
+ "target": "es5",
+ "jsx": "react",
+ "allowJs": true,
+ "moduleResolution": "node"
+ }
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..98b5b79
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,62 @@
+const path = require("path")
+const HtmlWebpackPlugin = require("html-webpack-plugin")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+
+module.exports = {
+ mode: "development",
+ entry: {
+ bundle: path.resolve(__dirname, "src", "index.tsx")
+ },
+ output: {
+ filename: "[name].[contenthash].js",
+ path: path.resolve(__dirname, "dist")
+ },
+ module: {
+ rules: [
+ {
+ test: /\.tsx?/,
+ use: 'ts-loader',
+ exclude: /node_modules/
+ },
+ {
+ test: /\.jsx?$/,
+ include: path.resolve(__dirname, 'src'),
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: [
+ ['@babel/preset-env', { "targets": "defaults" }],
+ '@babel/preset-react'
+ ]
+ }
+ }
+ },
+ {
+ test: /\.s[ac]ss$/i,
+ use: [
+ // Creates `style` nodes from JS strings
+ "style-loader",
+ // Translates CSS into CommonJS
+ "css-loader",
+ // Compiles Sass to CSS
+ "sass-loader",
+ ],
+ },
+ {
+ test: /\.css$/i,
+ use: [MiniCssExtractPlugin.loader, "css-loader"],
+ },
+ ]
+ },
+ resolve: {
+ extensions: [".tsx", ".jsx", ".js"],
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: path.join(__dirname, "src", "html", "template.html"),
+ filename: "index.html",
+ title: "React with Webpack",
+ })
+ ]
+}
\ No newline at end of file