仅供个人学习！
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/blog/lesson4

---

使用 JSX 描述 UI 信息

通过一个简单的例子讲解 React.js 描述页面 UI 的方式：

我们在文件头部从 react 的包当中引入了 React 和 React.js 的组件父类 Component。记住，只要你要写 React.js 组件，那么就必须要引入这两个东西。

ReactDOM 可以帮助我们把 React 组件渲染到页面上去。

import ReactDOM from 'react-dom'

可以发现ReactDOM是从 react-dom 中引入的，而不是从 react 引入。为什么不把这些东西都包含在 react 包当中呢？

---

return 的东西就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。这种看起来“在 JavaScript 写的标签的”语法叫 JSX。

---

HTML 所有的信息我们都可以用合法的 JavaScript 对象来表示：于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法

React.createElement 会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等。

---

练习题： http://scriptoj.mangojuice.top/problems/1

答案：

有两种写法

1. 较为简单的，直接在ReactDOM.render()方法中写我们的标签

function renderContent (content) {
    ReactDOM.render(
        <h1>{ content }</h1>,
        document.getElementById('root')
    )
}

2.写一个类继承Component

function renderContent(content) {
    
    class Content extends Component(
        render() {
            return (
                <h1>{ content }</h1>
            )
        }
    )

    ReactDOM.render(
        <Content />,   //content类
        document.getElementById('root')
    )
}

当然所有的代码中 别忘了在 HTML 中写上你要插入的 "容器"
即<div id='root'></div>

---

【补充：

 

赋予节点样式；

x.setAttribute("class",类名)

getAttribute(); 设置指定元素的属性值。如果该属性已存在，则更新该值; 否则添加具有指定名称和值的新属性。

x.innerHTML = 内容 //赋值

添加节点到父元素

要添加到的元素.appendChild(x);