这是我参与8月更文挑战的第三天
2. 组件的两种创建方式 2.1 使用函数创建组件
function Hello(){
return(
<div>这是函数组件</div>
)
}
ReactDOM.render(<Hello/>,document.getElementById('root'))
class Hello extends React.Component{
render(){
return <div>Hello class Component!</div>
}
}
ReactDOM.render(<Hlello/>,document.getElementById('root'))
思考:项目中的组件多了后,该如何组织这些组件那? 选择1:将所有组件都写在一个js文件中 选择2:将所有组件都放到单独的js文件中 组件作为一个独立的个体,一般会放到一个单独的js文件中。
hello.js
import React from 'react'
class Hello extends React.Component{
render(){
return(
<div>这是第一个组件</div>
)
}
}
// 导出
export default Hello;
index.js
// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 导入Hello组件
import Hello from './Hello'
ReactDOM.render(<Hello/>,document.getElementById('root'))