Create React App

文末福利资源更新 本文将重点介绍4个可以用来提高页面渲染速度的CSS技巧。 1. Content-visibility 一般来说，大多数Web应用都有复杂的UI元素，它的扩展范围超出了用户在浏览器视图中看到的内容。在这种情况下，我们可以使用内容可见性（ content-visibility ）来跳过屏幕外内容的渲染。如果你有大量的离屏内容，这将大大减少页面渲染时间。 这个功能是最新增加的功能之一，也是对提高渲染性能影响最大的功能之一。虽然 content-visibility 接受几个值，但我们可以在元素上使用 content-visibility: auto; 来获得直接的性能提升。 让我们考虑一下下面的页面，其中包含许多不同信息的卡片。虽然大约有12张卡适合屏幕，但列表中大约有375张卡。正如你所看到的，浏览器用了1037ms来渲染这个页面 。 下一步，您可以向所有卡添加 content-visibility 。 在这个例子中，在页面中加入 content-visibility 后，渲染时间下降到150ms，这是6倍以上的性能提升。 正如你所看到的，内容可见性是相当强大的，对提高页面渲染时间非常有用。根据我们目前所讨论的东西，你一定是把它当成了页面渲染的银弹。 content-visibility 的限制 然而，有几个领域的内容可视性不佳。我想强调两点，供大家参考。

翻译 | 《JavaScript Everywhere》第11章 用户界面和React（^_^） 写在最前面 大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。 为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎相互沟通交流学习。 (σﾟ∀ﾟ)σ..:*☆哎哟不错哦 第11章 用户界面和React 1979 年，著名的史蒂夫·乔布斯（ Steve Jobs ）访问了施乐帕克（ Xerox Parc ），在那里他看到了施乐 Alto 个人计算机的演示。当时其他计算机是由键入命令控制的，而 Alto 则使用鼠标并具有可打开和关闭的窗口图形界面。乔布斯在最初的 Apple Macintosh 的创作中继续借鉴了这些想法。原始 Mac 的流行导致计算机 UI 的激增。今天，在通常的一天，我们可能会与许多图形用户界面进行交互，其中可能包括个人计算机以及智能手机，平板电脑， ATM ，游戏机等。用户界面现在围绕着我们，可以跨各种设备、内容类型、屏幕尺寸和交互格式使用。 例如，我最近去了另一个城市开会。那天早上，我醒来并在手机上查看了航班状态。我开车开车去机场，屏幕上显示了地图，让我可以选择正在听的音乐。途中，我停在 ATM 机上取回一些现金，输入 PIN

题图 From 极客时间 From Clm 前端开发者在工作中常常遇到跨域的问题，一般我们遇到跨域问题主要使用以下办法来解决: 1、jsonp 2、cors 3、配置代理服务器。 jsonp不是很灵活，只能发送get请求，不能发送psot请求，而cors虽然可以支持多种请求格式，但是如果请求携带cookie的话，还需要服务端和客户端分别配置一下，个人感觉也很麻烦。 相对于前两种，使用代理服务器解决跨域问题就简单了好多。 浏览器由于同源策略的原因，不同域名之间发送ajax请求，响应的数据不会被浏览器加载。而服务器向服务器发送请求则没有同源策略的限制。 下图便是代理服务器的原理了： 代理服务器只是起一个中转作用，配置代理服务器的方法有很多种，比如利用apache、nginx、tomcat等等，今天给大家介绍的是用nodejs配置代理服务器，用nodejs配置代理服务器，我们需要借助两个npm包，一个是web开发框架 express ，一个是express中间件 http-proxy-middleware 。 首先第一步我们先用express搭建两个服务器，一个静态资源服务器端口号为3000，一个接口服务器端口号为5000，静态资源服务器代码如下： var express = require ( 'express' ); var app = express(); app.use

文：徐超，《React进阶之路》作者 授权发布，转载请注明作者及出处 ###React 深入系列5：事件处理 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 Web应用中，事件处理是重要的一环，事件处理将用户的操作行为转换为相应的逻辑执行或界面更新。在React中，处理事件响应的方式有多种，本文将详细介绍每一种处理方式的用法、使用场景和优缺点。 使用匿名函数 先上代码： //代码1 class MyComponent extends React.Component { render() { return ( <button onClick={()=>{console.log('button clicked');}}> Click </button> ); } } 点击Button的事件响应函数是一个匿名函数，这应该是最常见的处理事件响应的方式了。这种方式的好处是，简单直接。哪里需要处理事件响应，就在哪里定义一个匿名函数处理。代码1中的匿名函数使用的是箭头函数，我们也可以不使用箭头函数： //代码2 class MyComponent extends React.Component { render() { return ( <button onClick={function()

download： React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目 React17 + React Hook + TypeScript4 已成为大型React 项目质量保证的代名词，更是 2021年优秀 React 开发者必备的技术。本课程将通过完成一个功能强大的任务管理项目，带领大家掌握最佳实践，全方位提升开发效率、开发质量和技术能力。 技术要求 有 React 基础 环境参数 React 17.0.1 / TypeScript 4.0.5 / react-router : 6.0.0 / create-react-app 4.0.1 react-query: 1.0.0 / emotion: 10.0.35 / cypress: 6.1.0 / jest: 26.6.3 章节目录： 第一章课程介绍(本课程是必看的)试看 介绍了课程整体的背景知识、能解决什么问题、学习后能得到什么、学习方法和学习前提。 总共保存2节(12分钟)列表 1-1课程指南(11:06 )试试 下载1-2课程源 第二章项目出航：项目初始化与配置 本章介绍Create-React-App初始化项目。 然后，构成eslint检查代码质量、prettier检查代码格式、commitlint检查提交信息，规范流程。 最后配置优秀的后端mock方案，在JSON SERVER第3

react项目构建可以很简单，但是如果是结合typescript，其实也不是很麻烦，官网也有很明确的说明。有两种办法： 1、直接构建带有typescript的react项目，我们需要增加额外的参数，模版不能使用默认的cra-template。而是使用cra-template-typescript。 npx create-react-app tsreactdemo --template typescript 创建完成的成功提示与原来没有太大的区别，直接进入项目路径下，然后yarn start或者npm start。 进入项目，我们不着急启动，首先看看文件长得怎么样，默认会创建一个tsconfig.json，而且src目录下的默认的index.js,App.js文件变为了ts版本的index.tsx,App.tsx。 我们可以看看package.json中的依赖： 其实，依赖就是多了@types/jest,@types/node,@types/react,@types/react-dom 。 最早，我们创建typescript的react项目命令好像直接就是npx create-react-app xxx --typescript，可是现在这样不行了，后面的参数必须是--template typescript，而不是直接--typescript。这个需要说明一下，并不是我们搞错了

不要再滥用useMemo了！你应该重新思考Hooks memoization 作者 | Ohans Emmanuel译者 | 王强编辑 | Yonie 在使用 React Hooks 的过程中，作者发现过渡频繁的应用 useMemo 用会影响程序的性能。在本文中作者将与大家分享如何避免过度使用 useMemo，使程序远离性能问题。 经过观察总结，我发现在两种情况下 useMemo 要么没什么用，要么就是用得太多了，而且可能会影响应用程序的性能表现。 第一种情况很容易就能推断出来，但是第二种情况就比较隐蔽了，很容易被忽略。如果你在生产环境的应用程序中使用了 Hook，那么你就可能会在这两个场景中使用 useMemo Hook。 下面我就会谈一谈为什么这些 useMemo 没什么必要，甚至可能影响你的应用性能。此外我会教大家在这些场景中避免过度使用 useMemo 的方法。 我们开始吧。 不需要 useMemo 的情况 为了方便，我们把这两类场景分别称为狮子和变色龙。 先不用纠结为什么这么叫，继续读下去就是。 当你撞上一头雄狮，你的第一反应就是撒丫子跑，不要成为狮子的盘中餐，然后活下来跟别人吹牛。这时候可没空思考那么多。 这就是场景 A。它们是狮子，你应该下意识地躲开它们。 但在谈论它们之前，我们先来看看更隐蔽的变色龙场景。 相同的引用和开销不大的操作 参考下面的示例组件： /**

react，前端三大框架之一，也是非常受开发者追捧的一门技术。而 typescript 是 javascript 的超集，主要特点是对 类型 的检查。二者的结合必然是趋势，不，已经是趋势了。react 文档、typescript 文档都看过，例子也敲过了，对此也都有了一定的理解，但是把二者很好的结合在一起，还是遇到了一些问题。纯粹记录一些，当然也希望有优秀资源的，提供一下，分享一下。提前道谢了~ 学习曲线 首先，想到的是到 官网，看相关文档，会系统些。 typescript 中文网 jsx typescript 中文网 React & Webpack 看后，也实践了一遍，也算是入手练习了，但离实际应用还很远呢。 create-react-app + typescript 对应的英文原版是 microsoft/TypeScript-React-Starter 。 中文版有点落后，英文版的比较新。 最重要的一点是：很多根据中文网搭建练习时踩坑点的解决方案都是在其 issure 中找到的。 tslint相关 在 tslint.json 中加入 interface name must start with a capitalized I 接口名称必须以大写的I开头 microsoft/TypeScript-React-Starter "rules": { "interface-name":

近几年 JS 社区创新和演化的速度是有目共睹的，几个月前比较时髦的技术很可能现在已经过时了。2016 已经过去，你有没有担心错过了什么重要的内容？在这篇调查报告中我们会为你解读社区的主流趋势。 我们将从数量上来分析哪些项目 2016 年获得比较多的关注，具体的做法是比较各项目 2016 年在 Github 上新增 star 的数量。 回顾 2015 年：React 无疑占据了统治地位，而 Redux 则在众多牛毛的 Flux 实现中脱颖而出。那么 2016 年哪些项目最受开发者关注呢？ 目录 最受欢迎项目 前端框架 Node.js 框架 React 项目模板 移动开发 编译工具 构建工具 测试框架 IDE 静态网站生成器 1. 最受欢迎项目 仔细观察 2016 年排名前 10 的项目，你就能对 WEB 社区的演化方向有个直观的把握，概括如下： 3 个 UI 框架：Vue.JS, React and Angular 2 1 个新的 Node.js 包管理器：Yarn 创建桌面应用的首选：Electron 创建 react 新项目的首选：Create React App 1 个移动开发框架：React Native 最受欢迎的 CSS 工具箱：Bootstrap 函数式编程风格的状态管理库：Redux 强大兼具灵活的绘图库：D3 上面这些项目覆盖的领域，无疑证明了 JS 的通用性

安装 npm install -g create-react-app npm install -g create-react-app --registry=https://registry.npm.taobao.org create-react-app myApp cd myApp npm start 这样你就简单的完成了一个 react app 建立，其目录结构如下（ 图中不包括 node_modules 目录，下同 ）： Hello World 删除一些不必要的东西，然后修改目录结构如下： 其中 components 是个目录。 修改 index.js 如下： import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1> hello world! </h1>, document.getElementById('root') ); 然后命令行运行： npm start 就可以看到熟悉的 ‘hello world’ 了 一、HTML 模板 使用 React 的网页源码： <!DOCTYPE html> <html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js