React hello world.

4 months ago · b232c8d7da
parent 3c19a105b1
commit b232c8d7da
8 changed files with 7120 additions and 3 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+/node_modules/
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,11 +2,30 @@
  "name": "organic_wasm_demo",
  "version": "0.0.0",
  "description": "",
-  "main": "index.js",
+  "main": "index.jsx",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "webpack server"
  },
  "keywords": [],
  "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@wasm-tool/wasm-pack-plugin": "^1.7.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^9.1.3",
+    "html-webpack-plugin": "^5.6.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Organic Wasm Demo</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/src/index.tsx
+++ b/src/index.tsx
@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "outDir": "./dist/",
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "src"
+  ]
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,42 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+  entry: "./src/index.tsx",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "bundle.[hash].js",
+  },
+  devServer: {
+    compress: true,
+    port: 8080,
+    hot: true,
+    static: "./dist",
+    historyApiFallback: true,
+    open: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+        },
+      },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+          use: {loader: 'ts-loader'},
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: __dirname + "/public/index.html",
+      filename: "index.html",
+    }),
+  ],
+  mode: "development",
+  devtool: "inline-source-map",
+};