React-JSX

react-JSX

这种在js里面写标签的语法叫JSX。所谓的JSX其实就是JS的对象。JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

JSX原理

总结：要记住几个点：

1. JSX是JS语言的一种语法扩展，长得像HTML，但并不是HTML.
2. React.js可以用JSX来描述你的组件长什么样的。
3. JSX在编译的时候会变成相应的JS对象描述。
4. react-dom负责把这个用来描述UI信息的JS对象变成DOM元素并渲染到页面上。

注意：只要你要写React.js组件，就必须在react包中引入React 、React.js组件父类Component

1、从JSX到页面到底经历了什么？

2、为什么不直接从 JSX 直接渲染构造 DOM 结构，而是要经过中间这么一层呢？

原因有：
1、当我们拿到一个表示UI的结构和信息的对象后，不一定会把元素渲染到浏览器的普通页面上，有可能吧这个结构渲染到canvas上，或者手机APP上。
2、有这样一个对象，当数据变化，需要更新组件的时候，就可以用比较快的算法操作这个JS对象，而不用直接操作页面上的DOM，这样他可以尽量少的减少浏览器重排，极大地优化性能。

3、组件的render方法

React.js中一切皆组件，用React.js写就是写组件。我们在编写React.js组件的时候，一般都需要继承React.js的Component。一个组件类必须要实现一个render方法，这个render方法必须返回一个JSX元素。但是要注意的是，必须要用一个外层的JSX元素把所用内容包裹起来。返回并列多个JSX元素是不合法的。

由于for、class是JS中的关键字，所以React.js中定义了一种的新的方式：className、htmlFor来代替class、for

noscript 元素用来定义在脚本未被执行时的替代内容（文本）。此标签可被用于可识别<script>标签但无法支持其中的脚本的浏览器

提示和注释

注释：如果浏览器支持脚本，那么它不会显示出noscript元素中的文本。
！！！无法识别<script>标签的浏览器会把标签的内容显示到页面上，为了避免浏览器这么做，应当在注释标签中隐藏脚本，老式的（无法识别<script>标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，新式的浏览器则懂得执行这些脚本，即使他们被包围在注释标签中！
（通俗的理解就是如果不支持脚本的浏览器太老了，页面不会有任何关于noscript的提示消息，比如IE9以下，只有浏览器比较新，不支持了，就会在页面展示不支持的文本提醒）