1. 组件名称必须是大学开头。例如：App

2. 组件必须继承 Component ，或者 React.Component 

3. 组件必须导出之后，在其他页面才能导入。

   1. 例如：export default App;   

   2. import App from './App';

   3. 导出和导入是成对出现的。

4. 组件中必须有一个 render 函数。（老版本的语法）
   

组件就是网页上的一个标签/所有大写字母开头的都是组件

组件是网页上的一部分，可以是一整块，或一个输入框，或一个按钮，或一个显示的区域

React 中以大写开头的都是一个组件。

import React from 'react' 表示引入react语法。

引入的'react-dom' 别名ReactDOM 去加载APP这个组件。

创建一个组件，继承Componect，注意import React, { Component } from 'react'; 

还要注意Export 表示导出组件。

或这样写，但继承变成：React.Component 组件。

什么是组件

    从网页的角度理解

        组件是网页组成的一部分

    React是一个基于组件开发的框架

        组件用大写字母开头

        react-dom 用于挂载DOM

        ｜ ReactDOM.createRoot(document.getElementById('root'))

        ｜ #root 的div在 public/index.html 中

    App.js 是一个组件

        组件中必须有一个 render()

            里面必须有 return 

        export和import 配对使用

React基于组件开发

用户定义的组件必须以大写字母开头

以小写字母开头的元素代表一个 HTML 内置组件
比如 <div> 或者 <span> 会生成相应的字符串 'div'或者 'span' 传递给 React.createElement（作为参数）。

ReactDOM将组件挂载到页面dom节点上，渲染dom

ReactDOM.render(<App />,document.getElementById('root'));

定义React组件

class 组件名  extends  Component{
    render(){                       //必有函数，负责要显示的内容
        return(
             //要显示的内容
         ）； 
     }}

新版

function App() {
  return (
  
  );
}
export default App;

组件：网页的一部分

App.js 定义react组件（定义组件的语法看一下）

index.js 项目入口文件 引入组件，通过ReactDOM库把组件渲染到index.html上

import ReactDOM from 'react-dom';

ReactDom库 将组件挂载到页面的一个节点上

比如，将App组件渲染到public/index.html文件（项目的html文件）的root节点里

public/index.html：项目的html文件

从项目入口、公共组件的作用、引入组件之后组件做了什么、怎么定义一个React组件，这四部了解整个项目的过程
1.项目入口在public/index.html

2.src/index.js中引入的组件库的作用（React、ReactDOM）
React：识别组件
ReactDOM：渲染组件

3.首先我们声明一个App组件（首字母大写）使得React库识别到我们声明的是一个组件；
使用  ReactDOM自带的函数render使得组件能够渲染到页面中

注意：这里有个观点：（点、面）

页面中的每个元素都可以是个组件（也可以理解成点）；

整个页面的形式是一个个点的累积而形成的面
render函数可以携带两个参数(a,b)

a：目标组件
b：目标DOM节点

4.定义组件的方式：

第一种：class类继承的方式
列子：
import React ,{ Component } from 'react'
// 声明组件 继承React.Component类 或者可以写成class App extends React.Component{}

class App extends Component{
    render(){

        return {

                //    组件内容
            }

    }

}
export default App; //导出组件，如果不导出 外部无法使用

第二种：函数声明

function App() {

  return (

      //  组件内容

  );

}

export default App;

1:reactDom 引入可以渲染内容 必须包含（render）
2：组件显示内容由render 导入， app导出

React中 大写字母开头的 都是 组件

react中，大写字母开头的都是组件，如import App from '***'

定义一个React组件：class componentName extends React.Component {}

组件中必须要有一个render()函数来挂载组件显示的dom

什么是组件： 可复用的代码模块，其实也就是可复用的代码片段。

组件允许我们将应用的UI拆分成独立的、可复用的模块，其实也就是可复用的代码片段。React应用程序就是由组件来构建的，也就是说React应用的基石！

只要是页面上的一部分我们都可以把它理解成一个组件

组件就是网页上的有部分

在react中以大写字母开头的都是组件

ReactDOM就是为了便于我们把组件挂载(渲染)到dom元素上

组件就是类

自定义的一个组件必须要继承react的组件 即React.Component 才能变成react的一个组件

render负责的就是当前组件要显示的内容

组件定义完成之后要导出出去，便于其他组件导入引用

export 和 import 是配对使用

React是一個基於組件開發的框架。

組件指的是網頁上的一部分，只要是頁面上的一部分，都可以理解為組件。如網頁整體上是一個大的組件，Logo可以拆分成一個小組件，搜索區也是一個組件（裡面還可以拆分成一個輸入框組件和一個按鈕組件）。

App就是最外層的一個組件，在React中，以大寫字母開頭的都是組件

index.js是一個入口文件：

引入了react庫，在於可以了解React的語法

引入了react-dom，在於讓組件可以掛載到頁面上一個document節點上，把一個組件渲染到dom上。

引入了App.js，App.js裡面的代碼一定是在定義一個React組件。它是一個類，必須要繼承在React庫裡面引入的一個Component的類。React一個組件裡面，必須有一個render函數，負責這個組件要顯示的內容。export default app將其導出。

render(){

    return(

        <div>

            hello,i am dell

        </div>

);

}

ReactDOM起到渲染作用

什么是组件呢，组件就是网页上面的一部分

首先，index.js他是一个入口，首先他引入了react，帮助我们去理解app开头的组件，又引入了reactdom，帮助我们将组件渲染到一个root节点上。结尾的export default app是将其导出，这样，在index.js中才能将他再导入进去，导出和导入是配对使用的。

而app就是一个组件，她在app.js当中定义，首先，需要定义一个APP的类，她继承react.component.

当一个类集成了react.componet后他就是react中的一个组件，react 组件中必须有一个函数叫做render，这个函数负责这个组件要显示的内容，并且这个函数会return一个内容，他return回去的内容就是这个组件要 显示的内容

用户定义的组件必须以大写字母开头

以小写字母开头的元素代表一个 HTML 内置组件
比如 <div> 或者 <span> 会生成相应的字符串 'div'或者 'span' 传递给 React.createElement（作为参数）。

大写字母开头的元素则对应着在 JavaScript 引入或自定义的组件
如 <Foo /> 会编译为 React.createElement(Foo)。
我们建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件，则在 JSX 中使用它之前，必须将它赋值给一个大写字母开头的变量。

定义一个react组件

react中大写字母开头的都是组件

index.js 是入口，引入React帮助我们理解语法，ReactDOM可以帮我们把组建渲染到组件上,App是一个组件，App.js就是一个组件

定义组件:class 名称 extends React.Component   显示的内容是render函数里面的return的内容 

export default 名称 是导出  这样子其他地方才可以导入

React

1. 大写字母开头的名称都是组件  

2. 引入react为了理解组件的相关语法

3. 引入reactdom为了让组件渲染到HTML文件的标签中 

4. 组件的的创建：

     class 组件名  extends  Component{

       render(){                       //必有函数，负责要显示的内容

           return(

                要显示的内容

            ）； }}

5. index.js是入口；App.js是组件的定义
   

首先，index.js他是一个入口，首先他引入了react，帮助我们去理解app开头的组件，又引入了reactdom，帮助我们将组件渲染到一个root节点上。结尾的export default app是将其导出，这样，在index.js中才能将他再导入进去，导出和导入是配对使用的。

而app就是一个组件，她在app.js当中定义，首先，需要定义一个APP的类，她继承react.component.

当一个类集成了react.componet后他就是react中的一个组件，react 组件中必须有一个函数叫做render，这个函数负责这个组件要显示的内容，并且这个函数会return一个内容，他return回去的内容就是这个组件要 显示的内容

react组件封装

1. 自定义类继承React.Component

2. render函数 return 出dom结构

3. export default 导出才能被外部index.js文件import引入
   

index.js为react项目入口文件， 

import React from 'react' --》识别 import App from './App'
语法

import ReactDOM from 'react-dom'
        --> 帮助将组件渲染到dom节点(root)上
ReactDOM.render(<App />, documnet.getElementByUd('root'))

react中以大写字母开头一般为组件

定义一个React组件。

• import {Component} from 'react'

• 多个包逗号分隔开
  

• extends Component

• 也可以写做class clsName extends React.Component,同时去掉import {Component}

• 实现render()函数，当然也存在不同的事件可以实现。