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

学习React (3) - 如何用Jumbotron相关推荐

怎样快速学习React
react简单学习路线(实用版) 学习一门新的技术之前有必要了解一下该技术在专业领域的评价,使用的领域,以及整体的学习路线,总之尽可能多的在入坑之前了解相关方面的信息.不要什么都不去查就直接学了,这个 ...
学习react心得及总结
注意学习这个在D盘:小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说 ...
学习react的心路历程（一）
我是react小白,网上的react教程成堆成堆的,我就不在这里写什么教程,巴拉巴拉以下我的学习"心得"! 我是在"技术胖"的带领下学习的react,这个教程是 ...
react学习预备知识_在10分钟内学习React基础知识
react学习预备知识 If you want to learn the basics of React in the time it takes you to drink a cup of coff ...
重新学习 React (二) Diffing 算法
前几天面试问道 react 的相关知识,对我打击比较大,感觉对 react 认识非常肤浅,所以在这里重新梳理一下,想想之前没有仔细思考过的东西. 另外有说的不对的地方还请帮我指正一下,先谢谢各位啦. ...
新手学习 react 迷惑的点(完整版)
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以来讲 ...
【学习react中遇到的坑:内存泄漏报错】
学习react中遇到的坑:内存泄漏报错对就是这个错误 Can't perform a React state update on an unmounted component. This is a ...
通过构建Paint App学习React Hooks
According to people in the know, React Hooks are hot, hot, hot. In this article, we follow Christian ...
如何从零学习 React 技术栈
为什么要学习 React? 首先,React 相较于其他框架,其生态圈发展最为完整成熟,有非常多现成的.完整的解决方案. 其次,它适用于大中型应用的开发,便于团队中多人之间协作,很多大厂都在正式的项目 ...

学习React (3) - 如何用Jumbotron

学习React (3) - 如何用Jumbotron相关推荐

最新文章

热门文章