本文转载自:众成翻译
译者: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
:
<script type="text/babel">`
这通知Babel,我们愿望它处置惩罚这个script主体内的JavaScript的实行。我们能够运用ES6 JavaScript编写我们的React运用,并确保Babel将在仅支撑ES5的浏览器中处置惩罚它的实行。
React运用
在Babel script
中,我们定义了我们的第一个React运用。我们的运用由一个单一的元素构成<h1>Hello world</h1>
。挪用ReactDOM.render()
现实大将我们的袖珍React运用安排在页面上。假如不挪用ReactDOM.render()
,DOM中不会显现任何内容。ReactDOM.render()
的第一个参数是显现 _什么_,第二个是 _那里_:
ReactDOM.render(<what>, <where>)`
我们写了一个React运用。我们的“app”是一个代表一个h1
标签的React元素。但这不是很风趣。富Web运用接收用户输入,依据用户交互变动其外形,并与Web服务器通讯。让我们经由过程构建我们的第一个React组件来最先打仗这个气力。
组件和更多
我们在本系列的开首提到,一切React运用的中心是_组件_。明白React组件的最好要领是编写它们。我们将把React组件写成ES6类。
Let’s look at a component we’ll call App
. Like all other React components, this ES6 class will extend the React.Component
class from the React package:
让我们来看一个我们要挪用的组件App
。像一切其他React组件一样,这个ES6类将扩大(继续)React包中的React.Component
类:
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
一切React组件最少须要一个
render()
函数。此render()
函数应返回浏览器DOM元素的假造DOM示意情势。有多种要领来编写React组件。在本系列中,我们将引见几种编写要领。我们将运用的最常见的情势是上面运用的ES6类示意。
另一种编写我们的
App
组件的体式格局是运用该React.createClass()
函数。var App = React.createClass({ render: function() { return <h1>Hello from our app</h1> } });
到目前为止,社区一向采纳ES6类声明。然则这两种要领都发生具有雷同特征的React组件。
在我们的index.html,我们用之前的新App
组件替代我们的JavaScript。
<!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">``
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
</script>
</body>
</html>
但是,什么都不会在屏幕上显现。你还记得为何吗?
我们没有通知React我们要在屏幕上衬着任何东西,或许在什么地方衬着它。我们须要再次运用ReactDOM.render()
函数来表达React我们想要显现的内容和位置。
增加ReactDOM.render()
函数将在屏幕上显现我们的运用:
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
请注意,我们能够运用App
类来衬着我们的React运用,就像它是一个内置的DOM组件范例(像<h1 />
和<div />
标签一样)。这里我们运用它,就像它是一个带尖括号的元素:<App />
。
我们的React组件的行动就像我们页面上的任何其他元素一样,我们能够像构建一个当地浏览器树一样构建一个组件树。
虽然我们如今衬着一个React组件,我们的运用依然缺少雄厚性或交互性。很快,我们将看到怎样使React组件数据驱动和动态。但起首,在本系列的下一期中,我们将讨论怎样对图层组件举行分层。嵌套组件是雄厚的React Web运用的基本。