第一个组件

.eslintcache

@@ -0,0 +1 @@
+[{"/home/blobt/Documents/dev/node/study_react/src/index.js":"1","/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js":"2","/home/blobt/Documents/dev/node/study_react/src/App.js":"3","/home/blobt/Documents/dev/node/study_react/src/Weclome.js":"4","/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js":"5"},{"size":504,"mtime":1608691297173,"results":"6","hashOfConfig":"7"},{"size":362,"mtime":1608686231931,"results":"8","hashOfConfig":"7"},{"size":299,"mtime":1608692378661,"results":"9","hashOfConfig":"7"},{"size":445,"mtime":1608688160052,"results":"10","hashOfConfig":"7"},{"size":690,"mtime":1608692357096,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"1r5rxns",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"21"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/blobt/Documents/dev/node/study_react/src/index.js",[],["24","25"],"/home/blobt/Documents/dev/node/study_react/src/reportWebVitals.js",[],"/home/blobt/Documents/dev/node/study_react/src/App.js",["26"],"/home/blobt/Documents/dev/node/study_react/src/Weclome.js",[],["27","28"],"/home/blobt/Documents/dev/node/study_react/src/components/NameCard.js",[],{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","replacedBy":"32"},{"ruleId":"33","severity":1,"message":"34","line":1,"column":8,"nodeType":"35","messageId":"36","endLine":1,"endColumn":12},{"ruleId":"29","replacedBy":"37"},{"ruleId":"31","replacedBy":"38"},"no-native-reassign",["39"],"no-negated-in-lhs",["40"],"no-unused-vars","'logo' is defined but never used.","Identifier","unusedVar",["39"],["40"],"no-global-assign","no-unsafe-negation"]

package-lock.json

@@ -3580,6 +3580,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
+      "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
+    "bootstrap": "^4.5.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",

src/App.js

@@ -1,23 +1,11 @@
 import logo from './logo.svg';
 import './App.css';
-
+import NameCard from './components/NameCard';
+const tags = ['php','cpp','js'];
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          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>
+      <NameCard name="blobt" number={15920229676} isHuman={1} tags={tags}/>
     </div>
   );
 }

src/Weclome.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+class Welcome extends React.Component {
+    render() {
+        const todoList = ['Momo', 'Dola', 'Sasa'];
+        return (
+            <div>
+                <h1> Hello React </h1>
+                <ul>
+                    {
+                        todoList.map(item => <li key={item}>{item}</li>)
+                    }
+                </ul>
+            </div>
+        )
+    }
+}
+
+export default Welcome

src/components/NameCard.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+class NameCard extends React.Component {
+    render() {
+        //提取属性
+        const { name, number, isHuman, tags} = this.props;
+        return(
+            <div className="alert alert-success">
+                <h4 className="alert-heading">{name}</h4>
+                <ul>
+                    <li>电话：{number}</li>
+                    <li>{isHuman ? '人类' : '外星人'}</li>
+                </ul>
+                <p>{tags.map((tag, index)=>(
+                    <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
+                ))}</p>
+            </div>
+        )
+    }
+}
+
+export default NameCard;

src/index.js

@@ -3,11 +3,10 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <App />,
   document.getElementById('root')
 );