Reactjs 群控编程网

结合框架ReactJs和Django

Hai semua，Perkenalkan saya Andhika Anggriawan Sentosa dari kelompok C6。 PPL 2018。 Untuk minggu ini saya ingin分享知识孟买彭亨邦网站丹根结合框架khususnya pada项目ini，yaitu penggunaan框架ReactJs…

带有Apollo 2.0的GraphQL中的订阅

在本文中，我们将创建一个小型应用程序，以创建实时消息并通过使用GraphQL，Apollo Server，Apollo Client和React的订阅来更新收藏的消息。在此博客文章中，我们将专注于配置和实现订阅；但是，我们需要提到的是，我们使用序列化器作为我们的ORM（对象关系映射）来与MySql上的数据库进行通信，您可以在itr-apollo-server GitHub存储库中看到后端那部分的配置。首先，我们需要安装必要的软件包：阿波罗服务器阿波罗服务器快递表达图 graphql工具 npm install —保存apollo服务器apollo服务器表达Express graphql graphql-tools 其次，我们需要通过定义模型，查询，变异和订阅来配置Apollo服务器以监听订阅。…

Cara Membuat网站Sederhana dengan Next.js

Bagi Yang Belum Menginstall Next.js，西拉坎巴卡artikel saya di sini Setelah kita membuat网站默认 dari Next.js，mari kita melakukan percobaan membuat 页面…

反应本机形式

我将在本文中使用的场景是一个电子商务应用程序，要求用户提供交付地址。用户要求的三个输入是街道名称，城市和邮政编码。每当用户使用无效输入进行响应时，即他们在街道名称中输入了整数，我们都希望向用户提供实时响应。为什么？再次回到防止用户失去兴趣的生理概念，如果用户刚刚完成了十个以上的输入字段，并在提交之后输入了验证错误，则用户可能会对系统感到沮丧。此概念通常称为“前端验证”。因此，现在假设我们有三个输入字段，即街道名称，城市和邮政编码，我们可以为每个字段写下所需的验证。街道名称：最多四个整数，后跟一个字符串，即Marsh Street 23。城市：一串字符，即伯恩茅斯。邮递区号：每个国家/地区都会有不同的邮递区号，但在英国，最长为7个字符，从一到两个字符开始，然后是两个或三个整数，然后是另外两个字符。因此N12 4CC，BS13XG和CP34 5FG都是英国有效的邮政编码。现在，让我们编写正则表达式规则以匹配我们的验证规则：街道名称：/ ^…

将React App部署到Google App Engine

几个月前，当我想试用Google App Engine时，我浏览了文档，Google提供了有关如何将应用程序部署到App Engine的信息。 Google提供了有关该过程的非常详细的文档，在这里，我将尝试以简单而逐步的方式对此进行解释。我假设您熟悉创建React应用程序，并且您已经在计算机上安装了所有必备软件。我们分三个步骤：创建React App 在Google Cloud Platform上创建新项目。使用Google Cloud SDK安装和部署。创建React App 1.我使用create-react-app包创建我的React应用程序：…

在React中构建一个简单的待办应用程序（第1部分）

在本操作方法中，我将指导您在React中构建一个简单的待办应用程序。这是一个很棒的Javascript库，用于构建像这样的小型接口，也是开始开发和测试技能的好方法。先决条件：您需要对HTML5，ES6有一定的了解，并具有React的初学者入门知识。为什么要作为有抱负的React开发人员来构建待办应用程序？从初学者的角度来看，我发现待办事项应用程序是一个足以管理的小项目，它确实有助于巩固何时在整个应用程序中使用道具和状态的概念。了解应用程序在构建过程中的运行状况，将有助于您增强信心，以应对更大，更复杂的应用程序。你期待什么？在本练习中，我们将使用箭头函数()=>{} ，映射方法map() ，过滤器方法filter()和散布运算符... 这些都是ES6的功能。如果您不熟悉ES6，请阅读以下很棒的文章：Shape-Shifting Cats — ES6简介。我们将这个应用程序分为三部分。第1部分：清除所有待办事项后，显示默认待办事项列表或消息。第2部分：直接单击可删除列表中的项目。…

为什么需要考虑在React.js上构建

那么什么是React？ React是一个用于构建用户界面的JavaScript库。它经常被误解为语言，工具或框架。简而言之，React确保开发人员可以创建使用可随时间变化的数据的大型Web应用程序，而无需重新加载页面。主要目标是快速，简单和可扩展。 React仅处理应用程序中的用户界面。它只是一个JavaScript运行时。轻巧，现代，快速的代码执行方式让我们看看为什么一些大人物使用react 脸书有趣的是，Facebook创建了ReactJS库，这就是为什么很明显他们会在Facebook应用程序中使用它的原因。 Facebook最近开放了完全重写的ReactJS（称为React Fiber）的测试版。 Instagram的 Instagram完全基于ReactJS库，用户完全适应其惊人的功能.Instagram中对ReactJS的使用非常丰富，具有各种功能，包括Google Maps API，地理位置，搜索引擎准确性以及不带井号的弹出标签。网飞…

PHP和Javascript之间的日期和时间序列化

TLDR ; 尝试在PHP中创建Javascript可接受的日期时，请使用intl库并按以下模式设置日期格式： “ y-MM-dd’T’HH：mm：ssZ”，这将使您的应用程序与旧版ICU库兼容同时仍然能够通过JavaScript了解时区的日期。对于我来说，这是我的长篇文章以及对出色学习经验的描述，请阅读全文😉 这周在构建ReactJS应用程序时，我在CakePHP中发现了一个有趣的日期和时间序列化行为。 CakePHP最新版本正在使用Intl扩展来处理日期和时间解析以及序列化等操作。通过使用Intl，他们无需在框架中内置库即可完成此类工作。有一些不错的文章强调了语言环境，这强调了处理日期序列化的复杂性，这对我将要描述的这一旅程特别有用：在PHP中国际化格式化日期的漫长旅程。因此，当我的同事打电话给我时，我一直在照顾React应用程序的API，以便我们可以在ReactJS和CakePHP之间定义标准的日期格式，然后我想，幸运的是CakePHP为我提供了一个很棒的Time and Date API，因此我可以仅调用Time :: setJsonEncodeFormat即可完成。问题是我选择使用ElasticBeans Talk部署我们的API，并且在PHP平台上运行的Linux是基于RHEL发行版的Amazon…

如何将React与Redux连接（正确的方式）

您会在互联网上找到数百种正确（和错误）的方法来连接React和Redux。有些会太长，有些会太复杂，并且大多数不会有任何意义，也无法解释内部电路的工作方式。因此，这是我尝试解释实现此技巧的正确方法的尝试。现在，在我们深入研究细节之前，我希望您了解有关Redux是什么以及为什么要在React中使用它的一些基本信息。 Redux是一项可帮助您管理“状态”的技术。现在，众所周知，React，Angular，Vue或任何其他前沿的前端技术（用于制作“单页应用程序”）都具有被称为“组件”的东西，这些组件以各种组合方式构成了特定页面。其中一些组件具有“状态”，而某些则具有“无状态”。当组件的“状态”发生变化时（这基本上意味着已经向其传递了新值，或者新操作（如加法或减法）返回了我们现在需要显示的值），我们需要一种方法来显示此新状态。状态管理（识别更改的状态并显示新的状态）可以由React处理，但是React不是为此而构建的。 React的构建只是为您提供可重用的组件，以节省开发时间并构建单页应用程序（SPA），从而使您的用户感到没有页面正在加载，并且所有内容都属于同一页面（几乎就像移动应用程序一样））。当您尝试使用React来管理状态时，您将得到很多令人困惑的代码。这就是Redux的用武之地。需要特别注意的是Redux是一项独立的技术，并且是对流量的即兴创作（主要区别是Redux的方式更加完善，但在这里调用API却要困难得多，但在另一方面文章）。 Redux不需要React（与流行的看法相反），它也可以与Angular一起很好地工作，而且我们已经知道，React绝对不需要“ Redux”，但是它很棒。下面是一个熟悉的Redux结构图。要注意的重要事项是操作和存储。如果您不知道这些是什么，那么我会有不同的文章解释所有这些不同的术语，本文假设您知道这些是什么。…

为什么在React中使用索引作为键可能是一个坏主意？

假设您有一个项目列表，并且想要在React应用程序中将它们显示为ul, li元素。当用户单击列表项之一时，您要删除该项并重新呈现列表。在React中，您将执行以下操作（为简便起见，仅显示相关代码。完整示例在此处：https：//codesandbox.io/s/pkqrj851nq）请注意，即使删除了正确的项目， leave过渡如何也始终应用于列表中的最后一个项目？这不是我们想要的，是吗？原因是因为您没有为列表中的每个子元素传递唯一键。没有唯一键，React无法区分是删除元素还是仅更改内容。因此，当您删除列表中的第一项时，React的diff算法认为只有内容被更改了，因为key没有更改。因此，它只会更新内容，而不会从DOM中物理删除第一个元素，因此不会应用leave动画。但是当涉及到最后一个元素时，由于已经从列表中删除了一个项目，React 认为最后一个项目已被删除，并且实际上从DOM中删除了最后一个项目，因此应用了leave动画。要解决此问题，我们只需要确保为每个子元素传递唯一的key 。对于我们的情况，我们可以只传递项目名称，而不是index 。 {this.state.fruits.map（（fruit，…