已经学会了怎么用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;
之后的结果就成现在这样:
博主渐渐觉得App.js 文件是一个非常重要的文件,是专门用来显示页面的。虽然有index.html文件,但是目前学到现在很少能用到,都是用.js文件来写页面。博主也是刚刚学React,知道的内容也是有限。如果这段话总结,各位看了之后觉得有错误,就欢迎一起来讨论!