已经学会了怎么用React来写Hello World, 那么下一步就开始学习React那些组件。现在就先讲讲Jumbotron.
这个Jumbotron 大部分用在bootstrap里面的,采用官方的解释什么是Jumbotron: A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.
就直接上代码:
还是同一个道理,在src文件夹里创建一个js文件,博主就先命名为Testjumbotron.js 文件,在里面得写上
// Testjumbotron.js 文件
import React from 'react';
// 调用react-bootstrap组件中的Jumbotron
import Jumbotron from 'react-bootstrap/Jumbotron';
const Testjumbotron = (props) => {
return(
<Jumbotron>
<h1>Hello, World!</h1>
<p>
A lightweight, flexible component that can optionally extend the
entire viewport to showcase key content on your site.
</p>
</Jumbotron>
);
};
export default Testjumbotron;
之后在 App.js里调用这个js文件:
// App.js 文件
import React from 'react';
import Testjumbotron from './Testjumbotron';
function App() {
return (
<div className="App">
<Testjumbotron/>
</div>
);
}
export default App;
为了调用react-bootstrap的,还得在index.js文件里调用,加上一行:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// 加上这一行
import 'bootstrap/dist/css/bootstrap.css';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
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();
之后的结果就成现在这样:
博主渐渐觉得App.js 文件是一个非常重要的文件,是专门用来显示页面的。虽然有index.html文件,但是目前学到现在很少能用到,都是用.js文件来写页面。博主也是刚刚学React,知道的内容也是有限。如果这段话总结,各位看了之后觉得有错误,就欢迎一起来讨论!