From 97b9bac8dd26e9dd1b4ed51ad122388e9397d554 Mon Sep 17 00:00:00 2001 From: blobt Date: Wed, 23 Dec 2020 11:01:15 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E4=B8=AA=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintcache | 1 + package-lock.json | 5 +++++ package.json | 1 + src/App.js | 18 +++--------------- src/Weclome.js | 19 +++++++++++++++++++ src/components/NameCard.js | 22 ++++++++++++++++++++++ src/index.js | 5 ++--- 7 files changed, 53 insertions(+), 18 deletions(-) create mode 100644 .eslintcache create mode 100755 src/Weclome.js create mode 100755 src/components/NameCard.js diff --git a/.eslintcache b/.eslintcache new file mode 100644 index 0000000..795f551 --- /dev/null +++ b/.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"] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 63c81cb..8fba393 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index b51d511..907e6c0 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 3784575..c457b7b 100644 --- a/src/App.js +++ b/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 (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
); } diff --git a/src/Weclome.js b/src/Weclome.js new file mode 100755 index 0000000..c0b71f6 --- /dev/null +++ b/src/Weclome.js @@ -0,0 +1,19 @@ +import React from 'react' + +class Welcome extends React.Component { + render() { + const todoList = ['Momo', 'Dola', 'Sasa']; + return ( +
+

Hello React

+ +
+ ) + } +} + +export default Welcome \ No newline at end of file diff --git a/src/components/NameCard.js b/src/components/NameCard.js new file mode 100755 index 0000000..ae733b7 --- /dev/null +++ b/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( +
+

{name}

+ +

{tags.map((tag, index)=>( + {tag} + ))}

+
+ ) + } +} + +export default NameCard; \ No newline at end of file diff --git a/src/index.js b/src/index.js index ef2edf8..4b5be51 100644 --- a/src/index.js +++ b/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( - - - , + , document.getElementById('root') );