学习React (3) - 如何用Jumbotron

已经学会了怎么用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，知道的内容也是有限。如果这段话总结，各位看了之后觉得有错误，就欢迎一起来讨论！