React学习打卡Day1

1.react特性
        1）既不是mvc，也不是mvvm结构
        2）采用声明范式
        3）虚拟dom
        4）配合现有库和框架
        5）JSX ，js的语法拓展，jsx=js+xml
        6）复用，组件化
        7）单向响应数据流

2.安装react
        1）npm install -g create-react-app
        2）create-react-app myapp
        3）npm start 失败时，清除npmmodules和package-lock，再下载

3.编写第一个react应用程序
        1）import React from 'react'，必须引入，其中包含JSX的语法
        2）import ReactDOM from 'react-dom'，把React组件渲染到页面上去，注意不是从react中引入
        3）ReactDOM.render(内容,选择器)，将内容加入对应选择器的页面中，不加引号表示html命令

4.JSX原理
        JSX—使用react构建组件,bable进行编译—>JavaScript对象—reactDOM.render()—>DOM元素—>插入页面

5.Component组件使用
        1）在base文件夹下创建js组件，使用class关键字，必须继承Component，必须使用render关键字，使用export导出，return后不能有兄弟标签，只能有一个大标签，如果要换行必须加（）
        2）在index.js中使用import导入，用</>调用，代码如下
 

//组件文件下的代码
import React from 'react';
class App extends React.Component{
    render(){
        return <div>hello react Component</div>//return后只能加一个大标签，不能有兄弟标签）
    }
}
export default App;

//index.js文件中的代码
import React from 'react'
import ReactDOM from 'react-dom'
import App from './01-base/01-class组件'

ReactDOM.render(<App></App>,document.getElementById("root"));

 6.函数式组件及其样式
        1）function App(){这里同Component组件使用方式}
        2）不需要继承Component属性
        3）在div中加style属性时，必须在大括号内写对象
        4）css中的属性连接符‘-’换成驼峰式写法
        5）注意两个关键字：class写成className，laber中的for写成htmlFor
        6）React推荐使用行内样式，因为React觉得每一个组件都是一个独立的整体，利于复用

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
    render() {
        var myname = "shown";
        var obj ={
            backgroundColor:"yellow",//遵循驼峰式写法，将‘-’省略
            fontSize:"30px"
        }
        return (
            <div>
                {10+20}-{myname}
                {10>20?'aaa':'bbb'}
                <div style={obj}>11111</div>
                <div style={{background:"red"}}>11111</div>
                <div className="active" id='myapp'>333333</div>
                <label htmlFor='username'>用户名</label>
                <input style={{outline:'none'}} type='text' id='username'></input>
            </div>
        )
    }
}