完成项目基本结构

package.json

@@ -1,11 +1,13 @@
 {
-  "name": "react-app-model",
+  "name": "in-my-heart",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "cra-template": "1.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-dropzone": "^11.3.4",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3"
   },
   "scripts": {

src/App.js

@@ -1,24 +1,14 @@
-import logo from './logo.svg';
 import './App.css';
+import { HashRouter, Route } from 'react-router-dom';
+import { AppContainer } from './index/index';
+import { UploadContainer } from './upload/upload';
 
 function App() {
   return (
-    <div className="App">
+    <HashRouter>
-      <header className="App-header">
+      <Route path="/" component={AppContainer} />
-        <img src={logo} className="App-logo" alt="logo" />
+      <Route path="/upload" component={UploadContainer} />
-        <p>
+    </HashRouter>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
   );
 }
 

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -10,8 +9,3 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root')
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/index/index.js

@@ -0,0 +1,13 @@
+import { Component } from 'react';
+import './index.css';
+
+// copilot抄来的模板
+export class AppContainer extends Component {
+  render() {
+    return (
+      <div className="App">
+        {this.props.children}
+      </div>
+    );
+  }
+}

src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/upload/upload.js

@@ -0,0 +1,31 @@
+import { Component } from 'react';
+import './upload.css';
+
+// copilot抄来的模板
+export class UploadContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      files: []
+    };
+  }
+
+  handleChange = (e) => {
+    const files = e.target.files;
+    this.setState({ files });
+  };
+
+  render() {
+    return (
+      <div className="upload-container">
+        <input type="file" onChange={this.handleChange} />
+        {this.state.files.map((file, i) => (
+          <div key={i} className="upload-item">
+            <img className="upload-item-img" src={file.preview} />
+            <p className="upload-item-name">{file.name}</p>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}