今天小编给大家分享一下怎么搭建React的运行环境的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
这里有两种方式，一种是使用npm，另一种是不使用npm。下面我们先来看不使用npm的方式。
不用npm的方式引入React
对于这种方式，我们需要首先下载React和React-dom的库文件。然后引入到html文件中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘content’)
);
</script>
</body>
</html>
上面的例子中，在Javascript中的XML语法被称为JSX，对于这种语法，在<script>标签中其type必须为“text/babel”。但是这种语法是无法直接被浏览器解析的，因此需要上面的第三个文件browser.min.js将这种Js转换成原生的Js代码，然后再由react.js和react-dom.js解析自己的语法来执行。当然这里面涉及到一个知识点，那就是babel。至于对babel的详细了解本篇文章不做介绍，我们可以认为其就是一个转换器，当然这个转换是通过browser.min.js来进行的。
下面我们可以将上面html中的JSX代码分离出来，单独写到一个文件src/hw.js中
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(‘content’)
);
因此上述html可以更新为如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src=”src/hw.js”></script>
</body>
</html>
这里需要注意，这种情况有的浏览器（例如谷哥浏览器）是无法加载src/hw.js的，只能通过http地址的方式才可以加载。这是官网上说的，我没有验证过，不过我们最好是通过url绝对地址的方式来引入上面的文件。
对于这样的方式，其实最消耗时间的是通过babel将JSX转换成Javascript语法的过程。因此我们通常是将这一步放在服务器上面执行的。也就是说我们一般情况下是不直接在客户端使用buile/browser.min.js来转换JSX的。所以在浏览器解析之前就已经由服务器直接转换完成，客户端直接去调用转换完成的文件即可。
服务器端转换
首先我们应该在服务器端先安装babel
# npm install –global babel-cli
# npm install babel-preset-react
然后开始转换我们先前新建的src/hw.js文件
以上就是“怎么搭建React的运行环境”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
