这两天学习了关于react组件component的相关知识,与之前学习的前端开发不同,之前分成html控制网页的结构css美化网页js实现动画交互之类的效果,而react中用组件化来开发,每个组件中都包含html,css,js的内容,将页面抽成一个个组件,像搭积木一样组成网页。
创建组件的两种方法
1.使用 ES6 的 Class
class MyComponent extens React.Component{
render(){
return(
<div><h1>hello,world</h1></div>
)
}
}
ReactDOM.render(<MyComponent />,document.getElementById('App'))
2.使用 Functional Component
const MyComponent =()=>(
<div>hello,world</div>
)
ReactDOM.render(<MyComponent />
,document.getElementById('App'))
组件的css咋个写?将css全部封装在js代码中
const Styles = {
color: 'blue'
};
ReactDOM.render(
<div style={Styles}>Hello World!</div>
, docume nt.getElementById('app'));