关于 react的jsx语法在浏览器中的实现

        相信学过react的同学都和我一样有过以下类似的疑惑，react的jsx语法是如何在浏览器里运行的？为什么react这样的语法不会报错？让我们先看看react的文档了解一下什么是jsx语法；

我下载了这个html文件模版，具体在代码里的体现如下

<script type="text/babel" data-type="module">
  import React, { StrictMode } from 'react';
  import { createRoot } from 'react-dom/client';
  console.log(232);
  function Greeting({ name }) {
    return <h1>Hello, {name}</h1>;
  }

  let App = function App() {
    return <Greeting name="world" />
  }


  const root = createRoot(document.getElementById('root'));
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
</script>

其中 这样的语法让我费解，要知道我目前并不是在项目环境下，而是浏览器环境而浏览器解读不了这样的语法，如果是在正常的情况下浏览器会报错。

就像上面这样，所以由此得知，react绝对是做了编译处理，但是如果是项目环境下做了处理之前的代码无法运行我还可以理解，但是这里是浏览器环境下，旧的代码为什么不会运行呢？为什么不会报错呢？然后我仔细的看了看项目，发现使用了jsx语法的script标签都是做了特殊标记的

为此我去翻阅了官方文档script标签里type的类型，发现并没有这个类型，所以自动对应最后一条规则

所以由此可知，这块script标签里的代码是不会被浏览器自动运行的，所以这块里的源代码不会造成影响，然后我又看到了Babel，我们可以联想一下，那是不是Babel里做了对text/babel标记的特殊处理？

我点开这个网址，找了一下未压缩版本，搜索了一下这个标记

 

果然找到了对应的代码部分，也证实了的确是Babel对做了text/babel标记的script标签进行了编译并重新生成script标签插入到原网页里，我还找到了原网页里编译后的代码

这个插入位置也和源代码里的代码相对应

 

        ok那到这里，我们的问题就解决了，为什么react可以在浏览器里跑jsx语法？因为使用Babel对源代码进行了编译处理，为什么源代码不会报错？因为源代码被写在使用了官方不认可的标记的script标签内，所以源代码不会执行。

        至于具体的Babel是如何操作的，就等下次我对源码阅读之后再做更新吧。