有史以来最佳的React实例教程

React是一个用于构建用户界面的JavaScript库。在Stack Overflow的2017年开发人员调查的“框架，库和其他技术”类别中，它被评为最受关注的。

React是一个JavaScript库，基于它的React应用程序在浏览器中运行，而不是在服务器上运行。这种类型的应用程序仅在必要时与服务器通信，与传统网站相比，传统应用程序使用户不得不等待服务器重新渲染整个页面并将其发送到浏览器，因此它们的速度非常快。

React用于构建用户界面-用户在屏幕上看到并与之交互以使用您的Web应用程序。该界面分为多个组件，而不是拥有一个庞大的页面，而是将其分解为多个较小的部分，称为组件。更笼统地说，这种方法称为模块化。

它是声明性的：React使用声明性范式，可以更轻松地推理您的应用程序。
高效：React计算出必要的最少变更集，以保持DOM最新。
而且它很灵活：React可与您已经知道的库和框架一起使用。

学习React的最佳教程

为什么要学习React？

React涉及成分，即大量将功能包装到封装容器中的组件。

许多流行的网站都使用React实现MVC架构模式。Facebook（部分），Instagram（完全），Khan Academy（部分），纽约时报（部分），Yahoo Mail（完全），Dropbox的新照片和视频画廊应用程序Carousel（完全）是众所周知的使用React的流行网站。

如何使用React构建这些大型应用程序？简单的答案是通过构建小型应用程序或组件。例：

const Component2 = () => {
return (
<div></div>
);};const Component3 = () => {
return (
<div></div>
);};const Component1 = () => {
return (
<div>
<Component2 />
<Component3 />
</div>
);};ReactDOM.render(
<Component1 />, 
document.getElementById("app"));

在大多数情况下，React是声明式的，这意味着我们更多地关注要做什么而不是如何执行特定任务。

声明式编程是一种编程范例，用于表达计算的逻辑而不描述其控制流程。声明式编程具有某些优点，例如，减少了副作用（在我们修改任何状态或进行某种更改或发出API请求时发生），最小化了可变性（因为很多抽象性），增强的可读性和更少的错误。

React也有一个单向数据流。React中的UI实际上是状态的功能。这意味着状态更新时，UI也会随之更新。因此，我们的UI随着状态的变化而发展。

React的优势

使用React的一些原因是：

快速。使用React开发的应用程序可以处理复杂的更新，并且仍然感觉快速且响应迅速。
模块化。您可以编写许多更小，可重用的文件，而不是编写大而密集的代码文件。React的模块化可以很好地解决JavaScript的可维护性问题。
可扩展显示大量变化数据的大型程序是React表现最好的地方。
灵活。您可以将React用于与制作Web应用程序无关的有趣项目。人们仍在挖掘React的潜力。

虚拟DOM

React的魔力来自于对DOM的解释及其创建UI的策略。

React首先使用Virtual DOM渲染HTML树。然后，每次状态改变时，我们都会得到一棵新的HTML树，该树需要被带到浏览器的DOM中，而不是编写整个新树，React只会写出新树和前一棵树之间的差异（因为React既有树又有树）内存中的树）。此过程称为“树协调”。

和解

React有一个智能的差异算法，它仅用于在其DOM节点中重新生成实际需要重新生成的内容，同时将其他所有内容保持不变。由于React的虚拟DOM，这种差异化过程是可能的。

使用虚拟DOM，React将最后的DOM版本保留在内存中。当它具有要带到浏览器的新DOM版本时，该新DOM版本也会存储在内存中，因此React可以计算新版本和旧版本之间的差异。

然后，React将指示浏览器仅更新计算的差异，而不更新整个DOM节点。无论我们重新生成界面多少次，React都只会将新的“部分”更新带给浏览器。

从头开始反应

您是否想开始学习反应的基础知识而又不陷入创建开发环境的困境？如果您是Web开发的新手，可能会发现，设置开发环境会使您在尝试学习React时感到有些害怕。

在本文中，我们将研究如何仅使用文本编辑器和浏览器，而不使用其他任何东西来开始使用React。

1 —使用Emmet设置锅炉代码

让我们从步骤1开始。我们将从浏览器中名为“ index.html”的文件开始。我们将从样板HTML代码开始。为了快速入门，我建议将Emmet与您拥有的任何文本编辑器一起使用。在第一行中，键入，html:5然后按Shift键以获取下面的代码。或者，您可以继续从下面复制并粘贴代码。

html:5

这将导致以下代码：

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title></head><body></body></html>

我们可以填写“反应时间！”的标题。

此内容不会出现在您的网页中。HTML文件开头部分中的任何内容都是元数据，我们的浏览器将使用这些元数据来解释正文部分中的代码。该标题将显示在我们页面的标签上，而不是实际出现在页面上。

2-获取脚本标签以利用React和Babel库的功能

好的，第一项已从我们的清单中剔除。让我们看第二项。我们将通过使用脚本标签引入React和Babel来建立我们的开发人员环境。

这不是现实生活中的开发人员环境。那将是一个相当复杂的设置。它还会给我们留下很多样板代码和库，这会使我们脱离学习React基础知识的话题。本系列文章的目标是研究React的基本语法，并开始进行编码。我们将使用<script>标签来引入React库，React DOM库（为什么）和Babel库。

<head>
...
<!-- REACT LIBRARY -->
<script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
<!-- REACT DOM LIBRARY -->
<script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
<!-- BABEL LIBRARY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
...
<title>Time to React!</title></head>

您可以随意使用这些库的更多更新版本。他们不应为我们涵盖的内容造成任何重大变化。

我们在这里做什么？HTML <script>元素用于嵌入或引用可执行脚本。“ src”属性指向React库，ReactDOM库和Babel库的外部脚本文件。

这就像您有电动剃须刀一样。除非将电动剃须刀插入墙上并获得电力，否则无论电动剃须刀多么花哨，对您来说实际上都是不利的。如果我们的浏览器无法插入这些库来理解和解释我们要做什么，那么我们将要编写的React代码对我们不利。

这就是我们的应用程序将如何获得React的功能，这将是我们将React插入Dom的方式。我们有React和ReactDOM作为两个不同的库，因为有一些用例，例如React Native，移动开发不需要渲染到DOM，因此库被拆分了，以便人们可以根据他们从事的项目来决定需要什么。

因为我们将需要React才能使其成为DOM，所以我们将使用这两个脚本。Babel是我们如何利用ES5以外的ECMA脚本并处理将在React中使用的JSX（JavaScript作为XML）。在下一部分中，我们将更深入地了解Babel的魔力：)

好了，我们已经完成了步骤1和2。已经设置了样板代码并设置了开发人员环境。

3-渲染对DOM的反应

接下来的两个步骤将是选择我们要呈现React内容的DOM中的位置。我们将在正文中为React内容使用另一个脚本标签。通常，作为关注点分离的良好做法，这将在其自己的文件中，然后链接到此html文档。我们将在以后的部分中进行介绍。现在，我们将其保留在我们当前所在的html文档的正文中。

现在我们来看看在DOM上选择一个位置来呈现React内容有多么简单。我们将进入体内。最佳实践不仅是将React放入要显示的body标签中，还创建一个单独的元素（通常是div），您可以将其视为插入React内容的根元素。

<body>
<div id="app">React has not rendered yet</div></body>

我们将创建一个简单的<div>元素，并将其标识为“ app”。我们将能够以这个位置为目标来插入我们的React内容，就像您可以使用CSS来为您选择的样式作为目标的id一样。任何反应内容都将在div标签中呈现，其ID为app。同时，我们将保留一些文字，说明“反应尚未呈现”。如果在预览页面时看到此消息，则意味着我们错过了渲染React的地方。

现在，让我们继续在我们的体内创建脚本标签，这是我们第一次使用React进行创建。我们脚本标签所需的语法是添加“ type”属性。这指定脚本的媒体类型。在我们头顶的上方，我们使用了src属性，该属性指向React库，ReactDOM库和Babel库的外部脚本文件。

<body>
<div id="app">React has not rendered yet</div>
<script type="text/babel">
</script></body>

我们正在使用的脚本的“类型”将用引号引起来并设置为"text/babel"。与JSX一起使用时，我们需要立即使用babel的功能。

首先，我们将React渲染为DOM。我们将使用该ReactDOM.render()方法来执行此操作。这将是一个方法，请记住，方法只是附加到对象的函数。此方法将有两个参数。

<body>
<div id="app">React has not rendered yet</div>
<script type="text/babel">
ReactDOM.render(React What, React Where);</script></body>

第一个参数是React的“内容”。第二个参数是您希望将其放置在DOM中的位置的“位置”。让我们从调用ReactDOM.render（）方法开始。我们的第一个参数将是我们的JSX。

<body>
<div id="app">React has not rendered yet</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>, 
React Where
);</script></body>

该官方反应文档状态：“这个有趣的标签语法既不是字符串，也不HTML。它称为JSX，是JavaScript的语法扩展。我们建议将它与React一起使用，以描述UI的外观。JSX可能会让您想起模板语言，但是它具有JavaScript的全部功能。JSX产生React“元素”。

通常，JSX看起来很像HTML，因此经常使曾经从事过开发工作的人迷住了。在很小的时候，开发人员就学会了关注点分离。HTML有它的位置，CSS有它的位置，JavaScript有它的位置。JSX似乎模糊了界限。您正在使用看起来像HTML的东西，但是正如Facebook所说的那样，它具有JavaScript的全部功能。

这可能会让退伍军人感到惊讶，因此许多React教程开始时都没有JSX，这可能非常复杂。我们不会那样做。因为本文是针对那些职业生涯很年轻的人，所以当您看到此语法时，可能不会带上那些危险信号。

JSX真的很直观。您可能很容易阅读此代码，并看到它将成为显示文本“ Hello World”的最大标头标记。没有神秘感，很简单。现在，让我们看一下第二个参数是什么。

<body>
<div id="app">React has not rendered yet</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>, 
document.getElementById("app")
);
</script></body>

这是我们希望将React内容呈现到DOM的地方。您过去可能已经做过好几次了。我们只输入document.getElementById()。我们将传入app id的参数。就是这样。现在，我们将使用app的id作为div来插入我们的React内容。

我们要确保我们的内容已保存。继续并在浏览器中打开它，您应该看到“ Hello World”。您可能会猜到，使用React并不是创建Hello World应用程序的最快或最佳方法。我们还没有看到它的好处。但是现在，我们知道一切正常。

继续并打开控制台，然后查看“元素”。您可以在Mac上使用Command + shift + j或在Windows和Linux上执行此操作：Ctrl + Shift + J

如果单击head标签，我们可以看到包含的脚本库。然后我们可以进入文档正文。让我们单击ID为“ app”的div。当我们这样做时，我们会看到<h1>带有“ Hello World”内容的标签。

回顾

因此，让我们快速回顾一下。在我们的head标签中，我们抓取了React，ReactDOM和Babel的脚本标签。这些是我们的浏览器在其元数据中读取特定的React代码和JSX所需的工具。

然后，我们通过创建ID为“ app”的div元素，在DOM中定位要插入React的位置。

接下来，我们创建了一个脚本标签来输入我们的React代码。我们使用了带有两个参数的ReactDOM.render（）方法。React内容的“内容”（在本例中为我们的JSX），第二个参数是您要将React内容插入DOM的“位置”。在这种情况下，它是ID为“ app”的位置。

作为JSX的替代，您可以使用ES6和Java的编译器（如Babel）。

安装React

创建一个新的React项目

您可以像这样2将React库嵌入到您的网页中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.production.min.js"></script>

聪明的程序员希望采取更实际，更高效的方式：创建React App

npm install -g create-react-appcreate-react-app my-appcd my-appnpm start

这将设置您的开发环境，以便您可以使用最新的JavaScript功能，提供良好的开发人员体验并优化应用程序以进行生产。

npm start将启动一个允许实时重新加载的开发服务器3。

完成项目并准备将App部署到生产环境后，您可以使用npm run build来在build文件夹中创建优化的App版本。

您的第一个React App

安装

按照上一节（安装）中的指定，运行该Create React App工具。一切完成后，cd进入应用程序的文件夹并运行npm start。这将启动开发服务器，您已经准备好开始开发应用程序！

npm install -g react-create-appcreate-react-app my-first-appcd my-first-appnpm start

编辑代码

启动您选择的编辑器或IDE，然后编辑App.js文件src夹中的文件。使用该react-create-app工具创建时，此文件中已经有一些代码。

该代码将包括以下部分：

进口

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';

webpack使用它导入所有必需的模块，以便您的代码可以使用它们。此代码导入3个模块：

React和Component，这使我们能够使用应使用的React。（带组件）
logo，这使我们可以logo.svg在此文件中使用。
./App.css，它将为此文件导入样式表。

类/组件

class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}}

React是一个利用组件的库，它使您可以将UI分成独立的，可重用的部分，并单独考虑每个部分。已经创建了1个组件，即App组件。如果您使用了该create-react-app工具，则此组件是项目中的主要组件，您应该围绕此中心类进行构建。

我们将在短期内更详细地介绍组件。

出口商品

在React中创建类时，应在声明后导出它们，这允许您通过使用import关键字在另一个文件中使用组件。您可以default在export关键字之后使用，以告诉React这是此文件的主类。

export default App;

查看结果！

通过发出npm start命令启动开发服务器后，可以在浏览器中实时查看添加到项目中的更改。发出命令后，npm应该打开一个浏览器，自动显示您的应用程序。

React-组件

组件可在React中重用。您可以按如下所示将值注入道具：

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;}const element = <Welcome name="Faisal Arkan" />;ReactDOM.render(
element,
document.getElementById('root'));

name="Faisal Arkan"会给值到{props.name}从 function Welcome(props)和将返回已经给定值的组件name="Faisal Arkan"。之后，react会将元素呈现为HTML。

声明组件的其他方式

使用React时有很多方法来声明组件。组件有两种，无状态组件和有状态组件。

有状态的

类类型组件

class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'happy'
}
}
render() {
return(
<div>
<h1>{this.props.name}</h1>
<p>
{this.props.color}
</p>
</div>
);
}}

无状态组件

功能组件（ES6中的箭头功能）

const Cat = props => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
);};

隐式返回组件

const Cat = props => 
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;

2023-03-22 10:04:19

新人小程序+APP定制199元起

发放福利，助力中小企业发展，真正在互联网中受益

点击询问定制

广告服务展示