学习react第一天

之前的工作一直用的是vue框架以及写小程序之类，工作中也没有react的实践，所以一直没有去学习react这一块，这次反正辞职有时间了，来学习下这个框架，看看多少天学到可以开发一个项目。

本次学习选择了b站上react教程浏览量最高的一个课程-尚硅谷的，今天看了一天，确实对得起这个点击量，讲师讲的很细，总课时40小时，如果想学习react的，建议听听这门课。

切入正题，说说今天学习到的内容。

首先需要引入react框架、操作dom的react-dom库、解析jsx的babel库；然后在自己写代码的script标签type类型为'text/babel'。

1 数据存放在state中； 2 数据传递给组件，组件用propTypes接收，并且可以设置prop类型和是否必传；

<div id="test"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

<script type="text/babel">
 class Person extends React.Component {
     state = {isHot: true}
     static propTypes = {
         name: PropTypes.string.isRequired,//name属性，需要传字符串，必传
         age: PropTypes.number,//age属性，传数字，非必传
         speak: PropTypes.func //speak方法，传函数，非必传;由于function是关键字，所以这里写成func
     }
     static defaultProps = {
         name: 'tom',
         age: 12
     }
     reder() {
         let {name, age} = this.props
         return (
             <ul>
                 <li>姓名：{name}</li>
                 <li>年龄：{age}</li>
             </ul>
         )
     } 
     changeState = ()=> {
         this.setState({
             isHot: false // 修改state里面的值只能用setState,跟微信小程序里的setData类似；
         })
     }
 }
 let p = {name: 'jack', age: 15}
 ReactDOM.render(<Person {...p}/>, document.getElementById('test')) // 把虚拟dom挂载到真实dom上
</script>

今天讲的是入门中的基础，明天应该有更多好玩的东西。