从项目入口
、公共组件的作用
、引入组件之后组件做了什么
、怎么定义一个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;