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

ReactDOM.render(template,targetDOM) 方法接收两个参数：

• 第一个是创建的模板，多个 dom 元素外层需使用一个标签进行包裹，如 <div>；
• 第二个参数是插入该模板的目标位置。

若要为创建的某个元素增加 class 属性，不能直接定义 class 而要用 className，因为 class 是 javascript 中的保留字。例如给 input 添加 className 并更改样式：

<input type="text" className="userName" value={value}/> 
.userName{background: yellow} // 在CSS样式中定义

同样可以定义行内样式，将所有的样式包裹在一个对象中，以类似变量的形式给 style 属性赋值，注意样式属性要用驼峰命名法表示，如: backgroundColor 而不是 background-color，fontSize 而不是 font-size：

<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>

另外可以直接将样式赋值给一个变量，把变量赋值给 style 属性，如下：

<div id="container"></div>
<script type="text/babel">
let value = "demo1";
let buttonName = "submit";
let inputStyle = {
  "backgroundColor":"yellow",
  "color":"red"
};
ReactDOM.render(
  <div>
    <input type="text" style={inputStyle} value={value}/> 
    <button>{buttonName}</button>
  </div>,
  document.getElementById("container")
)
</script>

组件名内不能使用 style 样式，例如：假设该组建名为 <HelloMessage />，如果我们写成：<HelloMessage style={{color:'red',textAlign:'center'}}/> 这样，那么该组件名是无 style 样式的，也就是说我们刚写的 style 样式，是无效的，因此我们不能把样式写在该组件中！那么我们应该把样式写在哪里呢? 我们应该把样式写在：

function HelloMessage(props) {
    return <h1 style={{color:'red',textAlign:'center'}}>Hello World！</h1>;
}

或者

var myStyle = {color:'red',textAlign:'center'}
class HelloMessage extends React.Component {
    render() {
        return <h1 style={myStyle}>Hello World！</h1>;
    }
}

组件名不一定是用单标签，也可以是双标签

<HelloMessage />

可以写成如下代码：

<HelloMessage></HelloMessage>

XML 的重点有且仅有一个根标签。

通过 style 添加内联样式的时候，容易犯的错误。

错误：

ReactDOM.render(
    <h1 style = {fontSize:12}>小鸟启蒙</h1>,
    document.getElementById('example')
);

正确：

ReactDOM.render(
    <h1 style = {{fontSize:12}}>小鸟启蒙</h1>,
    document.getElementById('example')
);

关于React入门容易出错的地方：

如同上面说的，代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它

1.错误例子：

ReactDOM.render(
  <h1>这是错误的例子</h1>
  <span>假设这里是标题下面的内容</span>,
  document.getElementById("example")
);

2.正确例子：

ReactDOM.render(
  <section>
    <h1>这是正确的例子</h1>
    <span>假设这里是标题下面的内容</span>
  </section>,
  document.getElementById("example")
);