30天入坑React ---------------day03 Our First Components

  • 30天入坑React ---------------day03 Our First Components

30天入坑React ---------------day03 Our First Components

这篇文章是30天React系列的一部分 。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

30天入坑React ---------------day03 Our First Components

我们的第一个组件

在Github上编辑此页面

本系列的前两篇文章讨论很重。在今天的会议中，让我们深入研究一些代码并编写我们的第一个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://unpkg.com/[email protected]/babel.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的浏览器中实现其执行。

控制台警告？

使用babel-standalone包时，我们会在控制台中收到警告。这很好，期待。我们将在几天内切换到预编译步骤。

我们在<script />这里添加了标签以方便使用。

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类。

让我们看一下我们称之为的组件App。与所有其他React组件一样，此ES6类将从React.ComponentReact包中扩展该类：

class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}

所有React组件至少需要一个render()功能。render()期望该函数返回浏览器DOM元素的虚拟DOM表示。

在我们中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://unpkg.com/[email protected]/babel.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应用程序的基础。

30天入坑React ---------------day03 Our First Components

下一章：

复杂组件

复杂组件

30天入坑React ---------------day03 Our First Components

 

 

以上是 30天入坑React ---------------day03 Our First Components 的全部内容， 来源链接： utcz.com/a/68784.html

回到顶部