06-React组件

React组件

一、为什么要有组件

React开发的是单页面应用，只能通过组件实现页面跳转。

二、组件是什么

组件就是有一段HTML+数据构成的JSX的内容，不再像之前直接用变量接收，而是由函数或者类来包裹这一段JSX，这样一个函数或者类就称为组件。

三、组件的分类

1. 页面级别的组件（React路由），针对页面跳转
2. 公共组件（普通组件），针对部分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"));

六、结果展示