📝 ReactJS教程

66篇技术文档
  ReactJS教程

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

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

  ReactJS-概述

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

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

  ReactJS-环境设置

📅  最后修改于: 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...

  ReactJS-JSX-教程点

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

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

  ReactJS-组件

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

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

  ReactJS-状态

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

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

  ReactJS-道具概述

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

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

  ReactJS-道具验证

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

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

  ReactJS-组件API

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

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

  ReactJS-组件生命周期

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

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

  ReactJS-表格

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

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

  ReactJS-事件

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

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

  ReactJS-参考

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

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

  ReactJS-键

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

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

  ReactJS-路由器

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

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