Inputting height and weight

.babelrc

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

App.jsx

@@ -1,11 +1,66 @@
-import React from 'react';
+import React, { useState } from 'react';
+import "./design.css"
 
-class App extends React.Component {
-  render() {
-    return (
-      <div>simon, helloworld!!!</div>
-    );
+const App = () => {
+  const [height, setHeight] = useState('');
+  const [weight, setWeight] = useState('');
+  const [bmi, setBMI] = useState('');
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+
+  const handleHeightChange = event => {
+    setHeight(event.target.value);
+    setError('');
+    setMessage('');
+  }
+
+  const handleWeightChange = event => {
+    setWeight(event.target.value);
+    setError('');
+    setMessage('');
+  }
+
+  const handleCalculateBMI = () => {
+    if (height <= 0 || weight <= 0) {
+      setError('Please enter valid values for height and weight.');
+      setBMI('');
+      return;
+    }
+
+    const bmi = calculateBMI(height, weight);
+    setBMI(bmi);
+
+    if (bmi < 18.5) {
+      setMessage('You are underweight.');
+    } else if (bmi >= 18.5 && bmi <= 24.9) {
+      setMessage('You have a healthy weight.');
+    } else if (bmi >= 25 && bmi <= 29.9) {
+      setMessage('You are overweight.');
+    } else {
+      setMessage('You are obese.');
+    }
   }
+
+  const calculateBMI = (height, weight) => {
+    const heightInMeters = height / 100;
+    const bmi = weight / (heightInMeters * heightInMeters);
+    return bmi.toFixed(2);
+  }
+
+  return (
+    <div className="container">
+      <label htmlFor="height">Enter your height (in cm):</label>
+      <input type="number" id="height" name="height" value={height} onChange={handleHeightChange} />
+      <br />
+      <label htmlFor="weight">Enter your weight (in kg):</label>
+      <input type="number" id="weight" name="weight" value={weight} onChange={handleWeightChange} />
+      <br />
+      <button onClick={handleCalculateBMI}>Calculate BMI</button>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      {message && <p style={{ fontWeight: 'bold' }}>{message}</p>}
+      {bmi && <p>Your BMI is {bmi}</p>}
+    </div>
+  );
 }
 
-export default App;
+export default App;

another.pl

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

design.css

@@ -0,0 +1,47 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+  }
+
+  .container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #4CAF50;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+
+  form label {
+    font-weight: bold;
+  }
+
+  form input[type="number"] {
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+  }
+
+  form button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .error {
+    color: red;
+  }
+
+  .message {
+    font-weight: bold;
+  }
+

dist/index.js.LICENSE.txt

@@ -0,0 +1,32 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

index.html

@@ -6,6 +6,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script src="index.js" charset="utf-8"></script>
+    <script src="./dist/index.js" charset="utf-8"></script>
   </body>
-</html>
+</html>

main.js

@@ -3,4 +3,4 @@ import ReactDOM from 'react-dom';
 
 import App from './App.jsx';
 
-ReactDOM.render(<App />, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));

package.json

@@ -1,22 +1,30 @@
 {
   "name": "helloworld",
   "version": "1.0.0",
-  "description": "",
+  "description": "--- first, you should install node and npm.",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --hot"
+    "start": "webpack serve --mode development --hot"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "babel-core": "^6.9.1",
-    "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.5.0",
-    "react": "^15.1.0",
-    "react-dom": "^15.1.0",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+    "@babel/preset-env": "^7.16.5",
+    "css-loader": "^6.4.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "style-loader": "^3.3.0",
+    "webpack": "^5.64.4",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^9.1.2",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^7.0.0-alpha.1"
   }
 }

webpack.config.js

@@ -1,32 +1,41 @@
+const path = require('path');
+
 var config = {
-  // 打包的入口文件
   entry: './main.js',
-
-  // 配置打包结果，path定义输出文件夹，filename定义打包结果文件的名称
+  mode: 'deployment',
   output: {
-    path: './',
+    path: path.resolve(__dirname, './dist'),
     filename: 'index.js'
   },
 
-  // 设置服务器端口号
   devServer: {
-    inline: true,
-    port: 7777
+    static: {
+      directory: path.join(__dirname, './')
+    },
+    compress: true,
+    liveReload: true,
+    port: 7777,
+    historyApiFallback: true,
   },
 
-  // 配置模块的处理逻辑，用loaders定义加载器
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx?$/,
         exclude: /node_modules/,
-        loader: 'babel',
-        query: {
-          presets: ['es2015', 'react']
+        use: {
+          loader: 'babel-loader',
+          options: {
+            babelrc: true 
+          }
         }
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
       }
     ]
   }
-}
+};
 
 module.exports = config;