React的基础使用

React是一个js库

原理

• React基于虚拟dom,通过js创建虚拟dom，虚拟dom转换真实dom并挂载到页面
  没有在任何一个项目中直接使用标签，而是通过js创建标签

• 创建虚拟dom :
  react.createElement（）
  jsx => 遇到 < > 解析成虚拟dom ; 遇到 { } 解析成js

• react 提供了一个挂载真实dom节点在页面的方法 ：
  虚拟dom转换真实dom并挂载到页面 reactDom.render(要挂载的真实dom节点，挂载的容器id，回调函数)

搭建React项目

1.全局安装脚手架

npm i create-react-app -g

2.创建一个react项目

create-react-app XXX

3.cd进项目进行

cd 项目

4.释放 【(不可逆的)(在没有破坏项目完整性之前去释放)】

npm run eject

5.启动项目【可以在package.json/scripts中自定义指令】

npm run build / npm start

组件

组件的创建【两种】

第一种 ：函数式

特点：

function App(props){
   
    //无this指向，内部this为 undefined
    //无状态,没有state
	//内部访问props通过参数，props是函数形参
	//没有生命周期
	//有返回值
    return <div>i am app</div>
}

第二种 ：类声明

特点：

class App extends Component{
   
    // 内部this指向我们的组件实例 
    // 有状态,有state
    // 有生命周期
    // 内部访问props通过this 
    
    state