[React]Day01—初识React、React中JSX语法规则、React 创建组件

一、初识React

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”

二、安装React 调试工具 React devTools

Github： https://github.com/facebook/react-devtools

# 1.克隆项目
git clone https://github.com/facebook/react-devtools.git

# 2,进入 react-devtools 
cd react-devtools

# 3.切换分支(v3)
git checkout v3

# 4.npm/yarn 安装依赖
npm --registry https://registry.npm.taobao.org install
------------------------------------------------------
yarn install

# 5.npm/yarn 打包扩展程序
npm run build:extension:chrome
------------------------------
yarn build:extension

一顿命令敲完后

打开Chrome 拓展程序—开发模式，点击加载已解压的拓展程序，找到目录为react-devtools/shells/chrome/build/unpacked 文件夹，自动导入。

参考链接 :史上最简单 Chrome (谷歌浏览器) 安装 React Developer Tools 扩展工具包

突然发现上面的react devTools是旧版的，如果下载新的版本，请看React 官网

点击 Chrome ，就可以跳转到Chrome插件市场，添加React Developer Tools 4.0版本以上的

三、React中JSX语法规则

1. JSX

在React中使用JSX语法来创建虚拟DOM

2. JSX语法规则

四、React 创建组件

• 函数式组件
• 类式组件

1、函数式组件

2、类式组件

构造函数 constructor

• 构造函数constructor()只调用一次，并且构造函数constructor()可以省略不写

• 在 React 中，构造函数constructor()仅用于以下两种情况：

  • 一、通过给 this.state 赋值对象来初始化内部 state。
  • 二、为事件处理函数绑定实例

• 当不接收props 时，constructor中的 this.props 为undefined

# 错误写法 
constructor () {
   super()
   console.log('constructor:', this.props) // 输出 undefined
}

如果要在constructor中通过访问 this.props，必须接收 props 并且传递给 super(props)

class Person extends React.Component{
  # 正确写法      
  constructor (props){ 
  // 构造器只调用一次，并且构造器可以省略不写，给state初始化时才写
    super(props)
    console.log(this.props)
  }
  
  // 对标签属性进行类型、必要性的限制
  static propTypes = {
    person:{
      name: PropTypes.string.isRequired,
      age: PropTypes.number,
      sex: PropTypes.string
    }
  }
  // 指定默认标签属性值
  static defaultProps = {
    person:{
      sex:'男',
      age:18
    },
    interest:'舞蹈、音乐、写作'
  }
  render () {
    console.log(this);
    const {name,sex,age} = this.props.person
    const interest = this.props.interest
    return(
      <ul>
        <li>姓名： {name}</li>
        <li>性别： {sex}</li>
        <li>年龄： {age}</li>
        <li>兴趣： {interest}</li>
      </ul>
    )
  }
}
let hh = {
  name:'花花',
  age:20,
  sex:'女'
}
ReactDOM.render(<Person person={hh}/>,document.getElementById('test') )