React声明组件

react声明组件有两种方式：函数式组件和类组件

函数式组件

函数式组件也是无状态组件，
无状态组件是属于一个函数没有继承功能;也没有生命周期,它的动态数据都是通过父组件传值子组件通过props接收渲染,针对一些简单的逻辑判断等等,选 用无状态组件。组件名首字母必须大写。

import React from 'react'
import ReactDOM from 'react-dom'
/*
const 组件名(首字母大写)=（props）=>{
	return jsx表达式             
}
*/
const App = (props) => {
    return (
    	<h1>欢迎进入{props.name}的世界</h1>
    )
}

ReactDOM.render(
  // React组件的调用方式
  <App name={"react"} />,
  document.getElementById('root')
)

class组件：

class组件是有状态组件：有状态组件的区别是它属于一个class类,
有继承,可以通过this来接收状态和属性如果你想用react的生命周期,
想对一些数据进行增删改查的话就要用到有状态组件。

import React from 'react'
import ReactDOM from 'react-dom'

/*
class 组件名  extends  React.Component {
	render(){ //render是必不可少的钩子函数
		return jsx表达式
	}
}
*/

class App extends React.Component {
  render () {
    return (
      // 注意这里得用this.props.name, 必须用this.props
      <h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}
ReactDOM.render(
  <App name="react" />,
  document.getElementById('root')
)

组件添加样式：

行内样式：

 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>

使用class

React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体。其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是，class需要写成className（因为毕竟是在写类js代码，会收到js规则的现在，而class是关键字）

<p className="hello" style = {this.style}>Hello world</p>