脚本宝典收集整理的这篇文章主要介绍了【全栈React】第3天: 我们的第一个组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3799
原文：https://www.fullstackreact.com/30-days-of-react/day-3/
这个系列的前两篇文章是很重要的讨论。在今天的课程中，我们来看看一些代码，并写下我们的第一个React应用。
让我们重温第一天介绍的Hello world应用。这次，略有不同：
<!DOCTYPE htML>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
``<script src="https://cdnjs.clouDFlare.COM/ajax/libs/react/15.3.1/react.min.js">``</script>
``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js">``</script>
``<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js">`` </script>
</head>
<body>
<div id="app"></div>
``<script type="text/babel">``
VAR app = <h1>Hello world</h1>
var mountComponent = document.querySelector('#app');
ReactDOM.render(app, mountComponent);
</script>
</body>
</html>
加载React库
我们在包含了React的来源作为<script>`标签在`<head>元素里面。在我们开始编写我们的React应用之前放置我们的<script>加载标签很重要，以便我们使用ReactReactDOM。
head还有一个script标签包括在一个babel-core库。但是什么babel-core？
Babel
昨天我们谈了ES5和ES6。我们提到对ES6的支持仍然不稳定。为了使用ES6，最好是将ES6 JavaScript转换为ES5 JavaScript。
Babel是一个将ES6转换到ES5的库。
在body里面我们有一个script。在script里我们定义了我们的第一个React应用。请注意，script标签具有type的text/babel：