📅  最后修改于: 2020-10-20 04:46:03        🧑  作者: Mango

React是Facebook开发的前端库。它用于处理Web和移动应用程序的视图层。 ReactJS允许我们创建可重用的UI组件。它是当前最受欢迎的JavaScript库之一，并具有强大的基础和庞大的社区。听众本教程将帮助希望首次使用ReactJS的JavaScript开发人员。我们将通过显示易于理解的简单代码示例来尝试介绍每个概念。在完成所有章节之后，您将对使用ReactJS充满信心。作为奖励，我...

📅  最后修改于: 2020-10-20 04:46:20        🧑  作者: Mango

ReactJS是用于构建可重用的UI组件的JavaScript库。根据React官方文档，以下是定义-React是用于构建可组合用户界面的库。它鼓励创建可重用的UI组件，这些组件提供随时间变化的数据。许多人将React用作MVC中的V。 React从您那里抽象了DOM，提供了更简单的编程模型和更好的性能。 React还可以使用Node在服务器上进行渲染，并且可以使用React Native为本机应...

📅  最后修改于: 2020-10-20 04:47:08        🧑  作者: Mango

在本章中，我们将向您展示如何为成功的React开发设置环境。请注意，其中涉及许多步骤，但这将有助于稍后加快开发过程。我们将需要NodeJS，所以如果您没有安装NodeJS，请检查下表中的链接。Sr.No.Software & Description1NodeJS and NPMNodeJS is the platform needed for the ReactJS development. Ch...

📅  最后修改于: 2020-10-20 04:47:35        🧑  作者: Mango

React使用JSX代替常规JavaScript进行模板化。不必要使用它，但是，下面是一些附带的优点。它更快，因为它在将代码编译为JavaScript时执行优化。它也是类型安全的，大多数错误都可以在编译期间捕获。如果您熟悉HTML，则可以更轻松快捷地编写模板。使用JSX在大多数情况下，JSX看起来像常规HTML。我们已经在“环境设置”一章中使用过它。查看App.jsx中返回div的代码。App.j...

📅  最后修改于: 2020-10-20 04:47:57        🧑  作者: Mango

在本章中，我们将学习如何组合组件以使应用程序易于维护。这种方法允许更新和更改组件，而不会影响页面的其余部分。无状态的例子在以下示例中，我们的第一个组件是App。该组件是Header和Content的所有者。我们将分别创建Header和Content，然后将其添加到App组件的JSX树中。只需要导出App组件。App.jsx为了能够在页面上呈现它，我们需要将其导入main.js文件并调用reactD...

📅  最后修改于: 2020-10-20 04:48:12        🧑  作者: Mango

状态是数据来源的地方。我们应该始终尝试使状态尽可能简单，并尽量减少有状态组件的数量。例如，如果我们有十个需要状态数据的组件，则应该创建一个容器组件，以保持所有状态的状态。使用状态以下示例代码显示了如何使用EcmaScript2016语法创建有状态组件。App.jsxmain.js这将产生以下结果。...

📅  最后修改于: 2020-10-20 04:48:33        🧑  作者: Mango

状态和道具之间的主要区别在于道具是不可变的。这就是为什么容器组件应定义可以更新和更改的状态，而子组件应仅使用prop传递状态数据的原因。使用道具当我们在组件中需要不可变的数据时，我们可以在prop.main.js中的props到reactDOM.render（）函数中添加属性，并在组件内部使用它。App.jsxmain.js这将产生以下结果。默认道具您也可以直接在组件构造函数上设置默认属性值，而不...

📅  最后修改于: 2020-10-20 04:48:50        🧑  作者: Mango

属性验证是强制正确使用组件的有用方法。一旦应用变大，这将有助于在开发期间避免将来出现错误和问题。这也使代码更具可读性，因为我们可以看到应该如何使用每个组件。验证道具在此示例中，我们将使用所需的所有道具来创建App组件。App.propTypes用于道具验证。如果某些道具未使用我们分配的正确类型，则会收到控制台警告。指定验证模式后，将设置App.defaultProps。App.jsxmain.js...

📅  最后修改于: 2020-10-20 04:49:10        🧑  作者: Mango

在本章中，我们将解释React组件API。我们将讨论三种方法：setState（），forceUpdate和ReactDOM.findDOMNode（）。在新的ES6类中，我们必须手动绑定它。在示例中，我们将使用this.method.bind（this）。设定状态setState（）方法用于更新组件的状态。此方法不会替换状态，而只会添加对原始状态的更改。我们从一个空数组开始。每次我们单击按钮时，...

📅  最后修改于: 2020-10-20 04:49:30        🧑  作者: Mango

在本章中，我们将讨论组件生命周期方法。生命周期方法componentWillMount在呈现之前在服务器和客户端上都执行。componentDidMount仅在客户端第一次渲染之后执行。这是应该进行AJAX请求和DOM或状态更新的地方。此方法还用于与其他JavaScript框架以及执行延迟的任何函数（例如setTimeout或setInterval）集成。我们正在使用它来更新状态，以便我们可以触发...

📅  最后修改于: 2020-10-20 04:49:49        🧑  作者: Mango

在本章中，我们将学习如何在React中使用表单。简单的例子在下面的示例中，我们将设置一个值= {this.state.data}的输入表单。只要输入值发生变化，就可以更新状态。我们正在使用onChange事件，它将监视输入更改并相应地更新状态。App.jsxmain.js当输入文本值更改时，状态将被更新。复杂的例子在下面的示例中，我们将看到如何使用子组件中的表单。onChange方法将触发状态更新...

📅  最后修改于: 2020-10-20 04:50:05        🧑  作者: Mango

在本章中，我们将学习如何使用事件。简单的例子这是一个简单的示例，其中我们将只使用一个组件。我们只是添加了onClick事件，该事件将在单击按钮后触发updateState函数。App.jsxmain.js这将产生以下结果。儿童活动当需要从其子级更新父级组件的状态时，我们可以在父级组件中创建事件处理程序（updateState），并将其作为prop（updateStateProp）传递给子级组件，在...

📅  最后修改于: 2020-10-20 04:50:20        🧑  作者: Mango

ref用于返回对该元素的引用。在大多数情况下，应避免使用引用，但是，当我们需要DOM测量或向组件中添加方法时，它们可能会很有用。使用参考以下示例显示了如何使用引用清除输入字段。ClearInput函数搜索具有ref =“ myInput”值的元素，重置状态，并在单击按钮后对其添加焦点。App.jsxmain.js单击该按钮后，输入将被清除并聚焦。...

📅  最后修改于: 2020-10-20 04:50:35        🧑  作者: Mango

当使用动态创建的组件或用户更改列表时，React键非常有用。设置键值将使更改后的组件保持唯一标识。使用按键让我们动态创建具有唯一索引（i）的Content元素。map函数将从数据数组中创建三个元素。由于键值对于每个元素都必须是唯一的，因此我们将为每个创建的元素分配i作为键。App.jsxmain.js对于每个元素的键值，我们将获得以下结果。如果我们将来增加或删除一些元素或更改动态创建的元素的顺序，...

📅  最后修改于: 2020-10-20 04:50:52        🧑  作者: Mango

在本章中，我们将学习如何为应用设置路由。第1步-安装React路由器安装react-router的一种简单方法是在命令提示符窗口中运行以下代码段。第2步-创建组件在此步骤中，我们将创建四个组件。App组件将用作选项卡菜单。路线更改后，其他三个组件（主页），（关于）和（联系人）将呈现。main.js第3步-添加路由器现在，我们将路由添加到应用程序。这次将渲染路由器，而不是像上一个示例那样渲染App元...