React入门心得（一）

一、ReactDOM.render

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('root')
);

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

ReactDOM.render 功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上（在这里是 id 为 root 的 div 元素）。

关于JSX，记住：

1. JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。

2. React.js 可以用 JSX 来描述你的组件长什么样的。

3. JSX 在编译的时候会变成相应的 JavaScript 对象描述。

4. react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

例如：下面是JS部分的代码

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
  render () {
    return (
      

        
hello Armor
      
    )
  }
}

ReactDOM.render(
  
,
  document.getElementById('root')
)

在上面这个示例中，需要一个HTML部分，只用给div中添加相应的id,

<div id='root'>
div>

然后在JS代码里面，定义一个Header继承Component类，用render方法返回一段HTML，这段HTML写入ReactDOM.render 中即可插入到id为’root’的html上进行渲染

二、表达式插入

用花括号{}可以插入javascript的表达式、函数、变量、表达式计算、函数执行等，render 会把这些代码返回的内容如实地渲染到页面上，也可以用在标签的属性上，例如：className={className}

注意：直接使用 class 在 React.js 的元素上添加类名如

这种方式是不合法的。因为 class 是 JavaScript 的关键字，所以 React.js 中定义了一种新的方式：className 来帮助我们给元素添加类名。

还有一个特例就是 for 属性，例如 Male，因为 for 也是 JavaScript 的关键字，所以在 JSX 用 htmlFor 替代，即 Male。
而其他的 HTML 属性例如 style 、data-* 等就可以像普通的 HTML 属性那样直接添加上去。

三、事件监听

给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性，定义点击事件,onClick 紧跟着是一个表达式插入值

class Title extends Component {
    handleClickOnTitle () {
        console.log('Click on title')
    }
    render () {
        return (
            
this.handleClickOnTitle}>react
            )
    }
}

ReactDOM.render(