今天尝试第一次用react构建一个原型界面，发现他的语法和正常的html和css语法有个别差异还是满诡异的，特此记录，共勉，以后不能再犯这样的错误。

1.关于img标签的闭合问题

一般我在写html的时候，img标签都是这样写的：

然而在浏览器中却报错了：

百思不得其解，抱着试试看的态度加了个闭合：

我勒个擦擦！！图片竟然正常显示了！！

结论：在react项目中，但标签一定要记得闭合，语法要严格。

2.关于css样式书写

css语法也和习惯的标准css语法有差异，用一张图来说明问题：

react中的css是被当做一个变量，然后以style={css变量名}的方式调用。

3.React.render() vs ReactDOM.render()

因为现在网络上面对于react相关的教程说明较少，看到一些别人写的demo不明白的地方不免会有一些困惑，我就一直弄不明白 React.render() 和 ReactDOM.render() 到底有什么区别，因为感觉达到的效果都是一样的，为什么会有这两种写法，然后google了一下，发现stackoverflow上面有人和我有一样的困惑，人家的解答（见下图）也算是给我上了一课：

官方文档中有说明:

To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main react package into two: react and react-dom.

The old names will continue to work with a warning until 0.15 is released.

也就是说，随着react的版本升级，把原来让一个组件干的活拆分成两个组件了，更加精细化，换句话，ReactDOM.render()是更高级的写法 ==.