學習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，知道的內容也是有限。如果這段話總結，各位看了之後覺得有錯誤，就歡迎一起來討論！