react Hello World！-----jsx_如何用jsx写一个helloword-CSDN博客

本文链接：https://blog.csdn.net/ppwwp/article/details/80111310

Hello World！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
    </script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
    </script>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script> -->
</head>
<body>
    <div id="contents"></div><!--this is where our component will appear-->
    <script type="text/babel">
        var contentNode = document.getElementById('contents');
        var component = <h1>Hello World</h1>;
        ReactDOM.render(component,contentNode);
    </script>

</body>
</html>

这段代码虽然在script里面但是写法和html 没有什么区别。。没有用单引号或者是双引号括起来，

 var component = <h1>Hello World</h1>;

甚至他不是有效的javascript代码！那他是怎么解析的呢？
其实这是一种效仿html的特殊语言，称为jsx。这段代码时间上会被转换成一段javascript代码，他能够在React的虚拟DOM中生成元素。
转化代码如下：

var component = React.createElement('h1',null,'Hello World!');

这段代码创建了一个React的<h1>元素（虽然和html的<h1>元素很像，但并不是一回事）。编译后的代码调用了React.createElement, 这是怎么回事呢？这一切又是怎么发生的呢？其实有两行代码负责这一转换。首先是对下面脚本进行引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"> </script>

这个babel库是一个JSX转换器。我不会详细介绍转换时如何完成的，因为很快我们就不在浏览器里直接使用转换器了，而是开发阶段增设一个构建步骤，在这一步中创建一个预先转换好的js文件，然后把它引入html中，不建议在生产环境中使用基于浏览器的编译器。

其次是JSX代码所在的<script>标签中所指定的脚本类型：

 <script type="text/babel">

基于浏览器的JSX编译器会寻找所有类型为”text/babel”的内联脚本，并将其内容编译成相应的js代码。其余两个脚本react.js和react-dom.js则属于React核心库，负责React组件的创建和渲染。