一:index.js 里直接引入css。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import Welcome from './Welcome';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css'
ReactDOM.render(<App/>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
二:自定义名片组件:
1、新建文件夹components .新建NameCard.js
组件写法:
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? '人类':'waixingsheng'}</li>
<hr/>
<p>
{ tags.map((tag,index)=> (
<span key={index} className="badge badge-pill badge-primary">{tag}</span>
))}
</p>
</ul>
</div>
)
}
}
export default NameCard
2 函数写法;
import React from 'react'
const NameCard=(props)=>{
const {name,number,isHuman,tags}=props;
return (
<div className="alert alert-success">
<h4 className="alert-heading">{name}</h4>
<ul>
<li>电话:{number}</li>
<li>{isHuman? '人类':'waixingsheng'}</li>
<hr/>
<p>
{ tags.map((tag,index)=> (
<span key={index} className="badge badge-pill badge-primary">{tag}</span>
))}
</p>
</ul>
</div>
)
}
三、在App.js 使用
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard';
const tags=['男神']
class App extends Component {
render() {
return (
<div className="App">
<div className={"App-header"}>
<img src={logo} className={"App-logo"} alt={"logo"}/>
<h2>欢迎来到矿洞程序员</h2>
<NameCard name="chenxiaoyang" number={123456} isHuman tags={tags} />
</div>
</div>
);
}
}
export default App;
四:查看浏览器效果