一、ReactDOM.render
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(
<h1>Hello, world!</h1>,
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 (
<div>
<h1>hello Armor</h1>
</div>
)
}
}
ReactDOM.render(
<Header />,
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 的元素上添加类名如 <div class=“xxx”> 这种方式是不合法的。因为 class 是 JavaScript 的关键字，所以 React.js 中定义了一种新的方式：className 来帮助我们给元素添加类名。
还有一个特例就是 for 属性，例如 <label for='male'>Male</label>，因为 for 也是 JavaScript 的关键字，所以在 JSX 用 htmlFor 替代，即 <label htmlFor='male'>Male</label>。
而其他的 HTML 属性例如 style 、data-* 等就可以像普通的 HTML 属性那样直接添加上去。
三、事件监听
给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性，定义点击事件,onClick 紧跟着是一个表达式插入值
class Title extends Component {
handleClickOnTitle () {
console.log('Click on title')
}
render () {
return (
<h1 onClick={this.handleClickOnTitle}>react</h1>
)
}
}
ReactDOM.render(
<Title/>,
document.getElementById('root')
)
如果你想在事件函数当中使用当前的实例，你需要手动地将实例方法 bind 到当前实例上再传入给 React.js。
四、组件的state和setState
class LikeButton extends Component {
constructor () {
super ()
this.state = { isLiked: false}
}
handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
return (
<button onClick={this.handleClickOnLikeButton.bind(this)}>
{this.state.isLiked ? '取消' : '点赞'}hhh
</button>
)
}
}
class Index extends Component {
render () {
return (
<div>
<LikeButton/>
</div>
)
}
}
ReactDOM.render(
<Index/>,
document.getElementById('root')
)
setState 方法由父类 Component 所提供。当我们调用这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上。
注意，当我们要改变组件的状态的时候，不能直接用 this.state = xxx 这种方式来修改，如果这样做 React.js 就没办法知道你修改了组件的状态，它也就没有办法更新页面。所以，一定要使用 React.js 提供的 setState 方法，它接受一个对象或者函数作为参数。
————————————————
版权声明：本文为CSDN博主「ArmorVon」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/CystalVon/article/details/74207971
下载地址:
React从零开始——一个详细的范例
React中如何解决调用调用一个接口依赖于另一个接口返回值的情况 |
