React论坛 今日: 0|主題: 520|排名: 77 

一个React.js 的 漂亮,可移植性 列表拖拽库。想了解更多react-beautiful-dnd特点适用人群请看 官方文档、 中文翻译文档 npm：https://www.npmjs.com/package/react-beautiful-dnd .安装 ​ 在已有react项目中 执行以下命令 so easy。 # yarn yarn add react-beautiful-dnd # npm npm install react-beautifu ...

1、全局安装create-react-app npm install -g create-react-app 2、创建项目，安装依赖 create-react-app my-react-app 3、进入项目 cd my-react-app 4、启动项目 npm start 这是你就有了一个react demo 接着是对demo的改造了。。。这里是改造后的项目目录 1、配置路由： 首先安装路由组件：react-router-dom npm install ...

React Hooks 是 React 16.8 的新功能，可以在不编写 class 的情况下使用状态等功能，从而使得函数式从无状态的变化为有的。React 的类型包 @types/react 中也同步把 .SFC (Stateless Functional Component) 改为了 React.FC (Functional Component)。 通过这一升级，原先 class 写法的组件也就完全可以被函数式组件替代。虽 ...

问题 我们在使用React的时候经常会遇到这种情况，3000端口号被占用。有时候可以关掉3000端口，但更多时候，我们需要打开多个项目的时候，就必须要开启多个端口了。这时候就需要修改默认端口号了。 解决办法 修改默认端口号 具体做法 第一步：找到start.js文件 这个文件的位置在：node_modules文件夹下 -> react-s ...

今早来又莫名其妙的遇到了 bug，排查了一下是 useEffect 导致的。今天就再来详细的学习一下 react useEffect。 为什么要？ 我们知道，react 的函数组件里面没有生命周期的，也没有 state，没有 state 可以用 useState 来替代，那么生命周期呢？ useEffect 是 react v16.8 新引入的特性。我们可以把 useEffect hook 看 ...

前言 在Internet上搜索模板和主题时，很难找到免费的React资源。 即使您不在乎质量，它们似乎也很难被发现，并出于好奇而感动，我花了数小时在Google和Github上四处挖掘，结果得到了36个免费的React模板和主题的集合。我不会对此打赌，但是它们也是高质量的资源。 因此，在此列表中，您将找到各种各样的模板和主题，可以构 ...

目录 序言 React 的核心思想 传统 diff 算法 React diff 两个假设 三个策略 diff 具体优化 tree diff component diff element diff 如何进行 diff 小结 参考 1.序言 此篇文章所讨论的是 React 16 以前的 Diff 算法。而 React 16 启用了全新的架构 Fiber，相应的 Diff 算法也有所改变，不在这篇文章的讨论范围内。 ...

序  因为React 本身的脚手架自身在webpack中已经做了对CSS Module 的配置，因最近遇到了很多坑，所以从头整理了一遍   使用版本 "react": "^16.13.1", "antd": "^4.4.0", "typescript": "~3.7.2", "webpack": "4.42.0", "less": "^3.11.3", "less-loader": "5.0.0", 　　 一. 安装和初始化---React and TypeSc ...

JsPlumb在react的使用方法及介绍 一．相关资料来源： 1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_SETUP/           ———    一个翻译一半就不能打开的文档 2.https://github.com/wangduanduan/jsplumb-chinese-tutorial     &nb ...

ul{ padding: 0; margin: 0; } .swipper { width: 50%; background-color: #99a9bf; position: relative; overflow: hidden; .swipper-item { top:0; left: 0; position: absolute; width: 100%; height: 100%; display: inline-block; text-align: center; background-col ...

目录 序言 DOM事件流 事件捕获阶段、处于目标阶段、事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 1.序言 React 有一套自己的事件系统，其事件叫做合成事件。为什么 React 要自定义一套事件系统？React 事件是如何注册和触发的？React 事件与原生 ...

熟悉React的朋友都知道，React支持jsx语法，我们可以直接将HTML代码写到JS中间，然后渲染到页面上，我们写的HTML如果有更新的话，React还有虚拟DOM的对比，只更新变化的部分，而不重新渲染整个页面，大大提高渲染效率。到了16.x，React更是使用了一个被称为Fiber的架构，提升了用户体验，同时还引入了hooks等特性。那隐藏在 ...

早期的前端是由后端开发的，最开始的时候仅仅做展示，点一下链接跳转到另外一个页面去，渲染表单，再用Ajax的方式请求网络和后端交互，数据返回来还需要把数据渲染到DOM上。写这样的代码的确是很简单。在Web交互开始变得复杂时，一个页面往往有非常多的元素构成，像社交网络的Feed需要经常刷新，展示内容也五花八门，为了追 ...

一、JS打包入口文件 main.js      1、代码 /* JS打包入口文件 */ //1、导入react包 import React from "react"; import ReactDOM from "react-dom"; import CommentList from "./components/CommenList.jsx"; import CommentItem from "./components/CommentItem.jsx"; import "./css/CommenList.css" ...

前言 此文为ssr三部曲的第一部，前文在这 这个版本的代码在这 安装依赖 typescript 安装typescript，并初始化一个tsconfig.json出来 npm install -S -D typescript node_modules/.bin/tsc --init // 局部tsc需要这样使用 babel7开始，新增了@babel/preset-typescript，支持解析ts，所以不再需要ts-loader之类的webpack ...

作者后端经验比较丰富，近期要做跨域跨前端框架的前端页面展示，自然联想到了 IFRAME 方法，细致了解下来发现它可以用来解决很多棘手问题，包括： 跨域问题 Ajax 前进后退问题 异步上传问题 跨框架问题 父页面 基础 React 框架 import React, { PureComponent } from 'react'; export default class Iframe extends P ...

1 开发环境准备（windows）# 1.1 安装nodejs和npm# 1) 下载nodejs安装包：http://nodejs.org/en/download/ nodejs安装时会同时安装npm 2) 安装完成后检查是否安装成功 命令行输入以下命令，查看npm和node版本：npm -vnode -v   若未安装成功可检查环境变量是否安装时自动设置成功 1.2 安装create-react-app(react官方 ...

目录 代码分割 React的懒加载 import() 原理 React.lazy 原理 Suspense 原理 参考 1.代码分割 （1）为什么要进行代码分割？ 现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂，相应打包好的 bundle.js 文件体积 ...

React+electron项目搭建 打包 一．搭建react+electron项目 1.创建一个react项目 create-react-app my-app cd my-app npm start 看下页面是否打开，是否运行正确。 注意：如果页面没有src文件夹， 第一种：卸载全局安装包： npm uninstall -g create-react-app yarn global remove create-react-app 然后 npm start，浏览 ...

我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识 useEffect(create, deps): 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug ...