react

https://ant.design/docs/react/introduce-cn antdesign链接

```javascript
//jsx语法<>为html   {}为js  其中{}只有在html代码中才需要使用
//第一步安装包npm install react react-dom -S
//react 需要装2个包 react创建组件，生命周期等 react-dom主要封装了和dom操作相关的包
//第二步打包
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './componments/Hello.jsx'
import myClass from './class_studya.js'
// import './class_study.js'
// //第三步  如果需要创建虚拟DOM,只能使用react js api 创建，不能像vue杨手写元素
// //createElement 用于创建虚拟dom对象，接受三个及以上的参数
// //  参数1  字符串 ，元素类型     参数2 属性对象，表示有哪些属性  参数3 从第三个参数的位置开始表示子节点
// var mydiv = React.createElement('div',{title:'bendan',id:'mydiv'},'这是第一个div')
//
// //jsx语法实现js文件中，类似html代码，快速定义虚拟dom结构 符合xml规范的js,----本质是createElement()创建元素
// //使用jsx需要安装转换工具,运行npm install babel-preset-react -D   在.babelrc中，添加react语法
// //jsx遇到<>当做html代码编译  遇到{}当做js代码编译,在{}内部可以写任何符合js代码规范的代码
// //jsx写样式class中需要些成className,label标签中的for属性为htmlFor
// var p_list = []
// for(var i=0;i<10;i++){
//     var p = <p key={i}>这是第{i}个p标签</p>
//     p_list.push(p)
// }
// var mytitle=123
// var myDiv = <div>
// 只是jsx语法床架你的div
// <h1 title={mytitle}>jsx真好用</h1>
// {p_list}
// </div>


//组件的创建就是用函数，一个函数是一个组件，组件的使用，就是以函数名为标签 ,参数就是标签的属性,如果参数是对象则{...object}，函数参数写props,props表示接受的对象,props数据都是只读的，不能赋值，表示将对象所有属性展开传递
//组件函数名必须是大写，react解析标签是按标签首字母解析，如果是小写，按html解析，如果首字母是大写则按组件解析
var person = {
    name:'zs',
    age:'18',
}
// <Hello {...person}></Hello>

//第二种组件创建方式为继承,使用组件以类名为标签,类方法必须有render(),并且必须要有return
//参数直接用this.props+属性值，因为是js代码，外部加{},在第一种组件方式，必须要在函数传参位置定义props
//参数也是只读的
//第一种function 教无状态组件，class创建为有状态组件，因为初始化state状态属性，可读可修改,class有自己的生命周期函数
class Person extends React.Component{
    render(){
        return <div>
        我家在:{this.props.adress}-------------我的心情:{this.props.info}
        </div>
    }
}

//第四步将元素渲染到页面容器中，2个参数 1需要渲染的对象  2渲染的目标，也就是容器
ReactDOM.render(<div><Person adress="内蒙古赤峰市敖汉旗" info="活着真痛苦"></Person></div>,document.getElementById('app'))

npm run dev  启动项目
localhost:3000 访问项目