React组件
一、为什么要有组件
React开发的是单页面应用,只能通过组件实现页面跳转。
二、组件是什么
组件就是有一段HTML+数据构成的JSX的内容,不再像之前直接用变量接收,而是由函数或者类来包裹这一段JSX,这样一个函数或者类就称为组件。
三、组件的分类
- 页面级别的组件(React路由),针对页面跳转
- 公共组件(普通组件),针对部分HTML重用的封装
四、组件的用法
1.函数组件
- 组件名称必须以大写字母开头:React 会将以小写字母开头的组件视为原生 DOM 标签。例如,
<div />
代表 HTML 的 div 标签,而<Welcome />
则代表一个组件,并且需在作用域内使用Welcome
。 - ReactDOM.render( 组件名,容器);这里面的组件名是一个根组件,在同一个容器中,有且只有一个根组件
五、示例代码
1.引入React和babel
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
2.HTML 代码结构
<div id="main"></div>
3.配置JS类型
<script type="text/babel"></script>
4.JS 代码
function Welcome() {
return (
<div className="wel">
<h3>这是函数组件Welcome</h3>
<Main></Main>
<Com></Com>
</div>
);
}
function Main() {
return (
<div className="wel">
<h3>这是函数组件Main</h3>
<Com></Com>
</div>
);
}
function Com() {
return (
<div className="com">
<h3>这是公共导航条</h3>
</div>
);
}
// 这里只能写一个组件,作为根组件
ReactDOM.render(<Welcome></Welcome>, document.getElementById("main"));