react项目启动详解(转载)
转载:https://blog.csdn.net/github_squad/article/details/57452333。
前言:
create-react-app 是一个全局的命令行工具用来创建一个新的项目
react-scripts 是一个生成的项目所需要的开发依赖
一般我们开始创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖, ...
react react-draft-wysiwyg使用
import * as React from 'react'
import { Layout, Pagination, Icon, Modal, message, Button, Form, Input, Upload } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import { ContentSta ...
react wangeditor使用
import * as React from 'react'
import { Layout, Pagination, Icon, Modal, message, Button, Form, Input, Upload } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import E from 'wangeditor'
import iframeIp from '@config/index'
import './index.less'
import bgImg from '../../assets/image ...
React 新版生命周期
React 16之后有三个生命周期被废弃(但并未删除)
componentWillMount
componentWillReceiveProps
componentWillUpdate
官方计划在17版本完全删除这三个函数,只保留UNSAVE_前缀的三个函数,目的是为了向下兼容,但是对于开发者而言应该尽量避免使用他们,而是使用新增的生命周期函数替代它们。
目前React 1 ...
react 使用react-app-rewired后启动不了
使用了
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
后报错信息如下:
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'react-scripts ...
React Ref 和 React forwardRef
用ref来触达dom元素或组件实例
ref是reference(引用)的简写。
在数据流之外直接操作子孙组件:
ref属性赋值给Html元素,那么this.ref.current就获取到html元素
ref属性赋值给常规React组件,那么this.ref.current就获取到组件的实例
不要过度使用:
有需要直接触达和操作子孙组件实例或者操作子dom元素的情况,这时候 ...
React-Native转小程序调研报告:Taro & Alita
一. 我们的要求
期望的要求
基于React语法,将RN项目转化为小程序项目
该小程序能同时在 微信小程序 和 支付宝小程序这两个平台运行
底线要求
底线是能转成微信小程序,因为目前来说,因为微信先发制人,再加上微信本身的用户黏性,导致在小程序这一块大多数其他平台都难以迎头赶上,包括支付宝小程序,百度小程序, ...
react 基础语法使用
刚开始不久react,在菜鸟上及其他前辈网站上学习,下面开始我的自学笔记。
包括:
渲染元素
组件(函数方法定义、es6 class定义)
事件处理
条件渲染
列表
下面代码部分将不会再写html部分,html部分如下:
<div id="example"></div>
多余的话不多说,具体如下:
渲染元素(函数方法,es6方式)
函数 ...
React Diff算法一览
前言
diff算法一直是React系统最核心的部分,并且由于演化自传统diff,使得比较方式从O(n^3)降级到O(n),然后又改成了链表方式,可谓是变化万千。
传统Diff算法
传统diff算法需要循环比较两棵树,所有节点的循环,那么单纯比较次数就是O(n^2),n*n
P L
A A
...
react 常用技术
转载自https://www.sohu.com/a/285175900_132276
开源展示了人类共同协作,成果分享的魅力,每一次技术发展都是站在巨人的肩膀上,技术诸多创新和发展往往就是基于开源发展起来的,没有任何一家网络公司可以不使用开源技术,仅靠自身技术而发展起来。阿里巴巴各个团队都是发自内心地将踩过的坑和总结的经验融入到开 ...
React入门学习
为了获得更好的阅读体验,请访问原地址:传送门
一、React 简介
React 是什么
React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaScript MVC 框架都不太满意,所以索性就自己写了一套,用来架设 Instagram。做出来之后,发现这套东西还蛮好用的,于是就在 2013 年 5 月开源了。
在这里 ...
React 项目引入 Dva
背景
现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva。以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 ant design pro 的时候使用 umi 直接生成 react + antd + dva 项目,省去了大量配置的成本。但是这些案例都是在项目初期的时候直接引入了 dva,而针 ...
React+后端实现导出Excle表格的功能
最近在做一个基于React+antd前端框架的Excel导出功能,我主要在后端做了处理,这个功能完成后,便总结成一篇技术分享文章,感兴趣的小伙伴可以参考该分享来做导出excle表格功能,以下步骤同样适用于vue框架,或者JSP页面的实现。
在做这类导出文件的功能,其实,在后端进行处理,会更容易些,虽然前端也可以进行处理,但还 ...
无意间做了个 web 版的 JVM 监控端(前后端分离 React+Spring Boot)
之前写了JConsole、VisualVM 依赖的 JMX 技术,然后放出了一个用纯 JMX 实现的 web 版本的 JConsole 的截图,今天源码来了。
本来就是为了更多的了解 JMX,第一步就想把所有的 MBean 和属性都展示出来,开始在控制台输出,但是效果不好,内容太多太长,不够直观,然后就加了个 web 端的树形结构。然后做着做着突然发现,再 ...
react系列---------ReactJS最优秀的UI框架
构建你的下一个 React.js APP,有这些优秀的 UI 框架就够了。
一.Material-UI
Material-UI是一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。使用它可以快速搭建出赏心悦目的应用界面。
英文文档:https://material-ui.com
二.React-Bootst ...
使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目
1、安装、构建
# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app
# 启动编译当前的React项目,并自动打开 http://localhost:3000/
npm start
2、项目目录
//默认├── package.json
├── public # 这个是webpack的配置的静态目录
│ ...
React 之React.createContext
使用Context,可以跨越组件进行数据传递
import React from 'react';
import ReactDOM from 'react-dom';
const ThemeContext = React.createContext({
background: 'red',
color: 'white'
});
通过静态方法React.createContext()创建一个Context对象,这个Context对象包含两个组件,<rovider />和 ...
React Hooks中父组件中调用子组件方法
React Hooks中父组件中调用子组件方法
使用到的hooks-- useImperativeHandle,useRef
/* child子组件 */
// https://reactjs.org/docs/hooks-reference.html#useimperativehandle
import {useState, useImperativeHandle} from 'react';
...
// props子组件中需要接受ref
const ChildComp = ({cRef}) => {
const [va ...
从React-Native坑中爬出,我记下了这些
吐槽
如果React-Native是个人,我估计已经想要打死他了。。。
上一篇文章
当React开发者初次走进React-Native的世界
前言
最近因为业务需要,做了一些关于React-Native方面的开发,对一些自己遇到的问题做了记录。总共 21 条要点记录,承接于上一篇文章
本文讲的很多问题,不一定是对的,但确实是自己觉得可以 ...
react高级特性
代码分割
Context
错误边界
Fragments
Portals
forwardRef
小结
用了那么久的react, 竟不知道到原来react有那么多高级特性. 假期没事干, 试用了下一些react高级特性. 下为试用记录.
代码分割
将一个庞大的单页应用打包成一个庞大的js, 首屏加载可能会非常糟糕, 这时可能会考虑做代码分割, 即根据模块或者路由分开打包js, ...