4 小时前 / itclanCoder
虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 点击文末下方小程序可看视频,土豪请随意 点击阅读原文,可看更多内容 撰文 | 川川 1.JSX中添加属性有什么要注意的以及JSX中的子元素是怎么操作的 2. 组件的大小写问题,使用拓展运算符,以及怎么循坏遍历一个对象 3. JSX中的prop指的是什么以及表单的labe应该要注意什么 以上问题即使自己很清楚,但是否有时却总是道不清,说不明？那么读完本文,就豁然开朗了 J......
4 小时前 / u525858
写文章React Native自定义下拉刷新组件Jesse前端码农2 人赞同了该文章React Native 自定义下拉刷新组件 PullToRefresh针对猴急一些的同学，可以先在这个 Expo网站在线运行下demo看看效果。 完整的代码，在 Github仓库。 下拉刷新，是一个很常见的交互方式。React-Native(以下简称RN)内置的 FlatList 是支持下拉刷新组件的，通过设置 refreshControl属性即可。通常我们不仅仅需要定制下拉组件，还需要在下拉过程中，下拉组件执行一些动画，比如在我们场景下，公司logo会随着下拉的幅度，不同的笔画还是显现出颜色。这就需要我们的下拉组件，知道当......
1 天前 / Jartto
最近要使用 Electron 来构建 React 项目，突然发现之前的 Demo已经不能正常运行了，有些感概技术发展的迅猛。如果你还不了解 Electron，可以看我之前的文章：初探 Electron - 理论篇，理论知识没有变。如果你想了解 Electron5.0 版本如何构建 React 项目，不妨继续看本文。 需要注意：网上流传的 1.0 版本的项目应该已经启动不了了。 一、为什么要写此文之前研究的时候，Electron 还是 1.0 版本，因此写了一系列的文章。 初探 Electron - 理论篇初探 Electron - 升华篇初探 Electron - 实践篇1初探 Electron - 实践篇2经过本次尝试，发现 5.0 版......
15 天前 / 鱼籽酱yzh
点击上方“独立开发者周刊” 喜欢本文，请置顶或星标 原文 - Learning React Without Using React Part 2 接着我们上次讲到的内容。这篇文章将着重于改进我们简单的待办事项列表。当前的实现由一组函数组成，它们呈现完整的应用，并包含一个管理我们状态的简单store。但是，我们需要做一些事情来改进我们的应用。这里是一个与当前示例和代码的链接。 首先，我们没有妥善处理我们的事件。我们的组件不处理任何事件。在React中，事件触发数据流。 这意味着我们的组件应该触发事件。举个例子我们的ItemRow方法应该调用一个通过props传递......
25 天前 / 子曰五溪
首发于lightningMiners写文章入门TypeScript编写Reacticepyhttps://icepy.me 厨子/摩旅/编程16 人赞同了该文章使用 create-react-app 开启 TypeScriptCreate React App 是一个官方支持的创建 React 单页应用程序的CLI，它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时，你可以运行： $ npx create-react-app my-app --typescript$ # 或者$ yarn create react-app my-app --typescript如果在已有的工程中添加，也非常简单： $ npm install --save typescript @types/node @types/react @typ......
34 天前 / 静逸秋水
很早之前，写过一篇 《使用enzyme 测试你的 React 组件》, 综合叙述了如何利用 Karma+ Webpack+ Enzyme进行组件的测试， 从而确保我们的质量。 相对而言，这次会丰富一些，比如组件的 UI 事件以及 redux 引入后的测试。 项目使用 yarn-react-webpack-seed为案例，你可以在项目里找到源码。 建立测试安装 karma $ npm install karma karma-chai karma-chrome-launcher karma-coverage karma-jasmine karma-sourcemap-loader jasmine-core karma-webpack --save-dev安装 enzyme 相关 npm install enzyme redux-mock-store enzyme-adapter-react-1......
37 天前 / 噶牛爱尚
写文章从React Hooks看React的本质canonical千山万水32 人赞同了该文章后jQuery时代的前端革命是由AngularJs发起的，它最初的一个想法是将后台的技术架构复制到前台来。后端的一个核心技术是所谓的模板技术(template)。它可以用一个公式来描述 html = template(vars)这是一个特别直观的想法：模板就是一个普通函数，它根据传入的变量信息（无特殊要求）拼接得到字符串（无特殊结构）。这一模型完全不需要考虑面向对象传统的状态分散管理的问题，基本上是一种函数式的解决方案。 React的模式相当于是对模板渲染模型的一个面向领域结构的改进 vdom......
47 天前 / u525858
首发于二不挂五写文章[译]React中的用户认证(登录态管理)Jess前端码农6 人赞同了该文章[译]React中的用户认证(登录态管理)原文地址 ： https://kentcdodds.com/blog/authentication-in-react-applications 本文主要展示在当下 React 应用开发中，怎么使用 Context 和 Hooks 来管理用户的认证(也就是登录态)。 先说结论下面是本文最终要实现的的简化版，方便大佬们直接看最后的效果： import React from 'react'import {useUser} from './context/auth'import AuthenticatedApp from './authenticated-app'import UnauthenticatedApp from './una......
49 天前 / u525858
首发于二不挂五写文章[译] React Hooks: 没有魔法，只是数组Jess前端码农5 人赞同了该文章[译] React Hooks: 没有魔法，只是数组原文链接： https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e 我是 React 新特性 Hooks 的粉丝。但是，在你使用 React Hooks的过程中，有一些看上去 很奇怪的限制。在本文里，对于那些还在为了理解这些限制而苦苦挣扎的同志，我尝试通过一些列图表的方式，来解释为什么会存在这些限制。 理解hooks怎么运行我听说很多同学都对hooks像魔法一般的效果感到困惑，因此我将尝试通过浅显的方式......
55 天前 / 冷星1024
每日前端夜话0x6C每日前端夜话，陪你聊前端。 每天晚上18:00准时推送。 正文共：2506 字 预计阅读时间： 8 分钟 翻译：疯狂的技术宅 来源：logrocket Web 为了支持客户端和服务器之间的全双工（或双向）通信已经走过了很长的路。这是 WebSocket 协议的主要目的：通过单个 TCP 套接字连接在客户端和服务器之间提供持久的实时通信。 WebSocket 协议只有两个议程：1）打开握手，2）帮助数据传输。一旦服务器和客户端握手成功，他们就可以随意地以较少的开销相互发送数据。 WebSocket 通信使用WS（端口80）或WSS（端口443）协议在单个 TCP ......
56 天前 / 冷星1024
每日前端夜话0x6D每日前端夜话，陪你聊前端。 每天晚上18:00准时推送。 正文共：1333 字 预计阅读时间： 8 分钟 翻译：疯狂的技术宅 来源：freecodecamp 惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要，就不要渲染它们。例如，如果我们有一个要显示的文章列表，开始时应该只渲染视口上的内容。这意味着其他元素将在以后按需呈现（当它们位于视口中或即将在视口上时）。 为什么要用懒惰性载？大多数时候，我们的用户看不到整个网页，至少在开始时是这样。无论我们的程序 UI 如......
56 天前 / 人人贷大前端技术中心
写文章RN 集成 TypeScript方案和问题大全人人贷大前端技术中心人人贷大前端团队5 人赞同了该文章RN 集成 TypeScript方案和问题大全这篇文章主要介绍了如何在 ReactNative 中如何集成 TypeScript，以及我们遇到的一些问题总结。 其实关于如何集成TS，RN官方有一篇博客介绍了接入方案，但在参照接入过程中发现针对老工程部分迁移TS、以及新版本RN并不适用。 集成方案目前RN 集成 TypeScript 有两个方案： 方案一： 借助第三方编译插件react-native-typescript-transformer 方案二： RN 0.57 版本之后将 babel 升级到了 V7， Babel 从V7开始支持 T......