本章我们来学习组件的创建,两种组件的形式
一、整理文件
首先进入项目之后把不需要的文件可以删除然后创建在src下新建components文件夹把App文件放到该文件夹下
把引入路径修改一下,把那些删除了的文件引用也删掉
index.js文件
App.js文件
二、创建组件
组件有两种创建形式
一种是函数的形式,一种是类的形式
在components文件夹中创建Hello.js文件作为组件,具体代码如下:
1、函数式组件
import React from 'react';
function Hello() {
return (
<div>
hello word!!
</div>
)
}
export default Hello;
2、类式组件
import React from 'react';
class Hello extends React.Component{
render(){
return <div>hello word!!</div>
}
}
export default Hello;
比较:
1、函数组件是一个纯函数,它返回一个react元素;而类组件需要去继承React.Component并且创建render函数返回react元素。
2、函数组件没有生命周期和状态state,而类组件有。
3、类组件需要this指向
三、引入展现组件内容
在App.js文件中引入Hello组件作为App.js的子组件
App.js文件
import './App.css';
import Hello from './Hello' //引入组件
function App() {
return (
<div className="App">
{/* Hello组件 */}
<Hello></Hello>
</div>
);
}
export default App;
结果