React-router5.x 路由的使用及配置
在 React router 中通常使用的组件有三种：
路由组件（作为根组件）: BrowserRouter（history模式） 和 HashRouter（hash模式）
路径匹配组件: Route 和 Switch
导航组件: Link 和 NavLink
关于路由组件，如果我们的应用有服务器响应web的请求，建议使用<BrowserRouter>组件; 如果使用静态文件服务器，建议使用<HashRoute ...
【react】---react中使用装饰器
一、creact-react-app中使用装饰器
运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来
此时，项目中多了一个config文件，并且各个配置文件已经暴露出来了。(运行npm run eject之前，保证本地没有待提交到git的文件)
安装babel插件npm install --save-dev @babel/plugin-proposal-decorators re ...
新手学习 React 迷惑的点
网上各种言论说 React 上手比 Vue 难，可能难就难不能深刻理解 JSX，或者对 ES6 的一些特性理解得不够深刻，导致觉得有些点难以理解，然后说 React 比较难上手，还反人类啥的，所以我打算写两篇文章来讲新手学习 React 的时候容易迷惑的点写出来，如果你还以其他的对于学习 React 很迷惑的点，可以在留言区里给我留言。
为 ...
Mobx-React ： 当前最适合React的状态管理工具
MobX
简单、可扩展的状态管理
MobX 是由 Mendix、Coinbase、Facebook 开源和众多个人赞助商所赞助的。
安装
安装: npm install mobx --save。 React 绑定库: npm install mobx-react --save。 要启用 ESNext 的装饰器 (可选), 参见下面。
CDN:
https://unpk ...
React Native 之 createBottomTabNavigator,createMaterialTopTabNavigator
icon第三方库
yarn add react-native-vector-icons
react-native link react-native-vector-icons
在上次的代码中添加：
AppNavigators.js
import React from 'react'; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错
import {Button,Platform} from 'react-native';
import { createStackNavigator,creat ...
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
一、前言
9月，又到开学的季节。为每个一直默默努力的自己点赞！最近都沉浸在react native原生app开发中，之前也有使用vue/react/angular等技术开发过聊天室项目，另外还使用RN技术做了个自定义模态弹窗rnPop组件。
一、项目简述
基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发 ...
React+SpringBoot项目部署
静态资源访问配置
https://www.jianshu.com/p/b6e0a0df32ec
https://segmentfault.com/q/1010000012240531/a-1020000012250927
_______________________________________________________________________________________________
springboot-静态资源默认访问路径 ...
React源码解析——ReactAPI
一、API背景
api的具体转化关系
可以通过到https://babeljs.io/repl/网站去将我们创建的Jsx进行实时的转译
const React = {
Children: {
map,
forEach,
count,
toArray,
only,
},
createRef,
Component,
PureComponent,
createContext,
forwardRef,
Fragment: REACT_FRAG ...
react入门系列之react特点归纳
声明式开发
命令式开发：原生js和jq写代码的时候，大部分代码都是在操作dom，这种开发模式就是命令式开发。
声明式开发：react是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react自己回去帮你操作dom，可以节省很多操作dom的代码。这就是声明式开发。
可以和其他框架并存
react所控制的dom就是id为root的d ...
React的基本使用
1、脚手架安装React项目
安装 create-react-app 脚手架来创建 react 项目。
npm install -g create-react-app
create-react-app my-app
使用该脚手架创建的 react 项目默认是不显示配置文件的，可以使用 npm run eject 命令将配置文件显示出来，该命令是一个单向操作，即一旦运行了，就不能再次将配置文件隐藏。
2、 ...
React与Typescript整合
0. Typescript
Typescript对于前端来说可以说是越来越重要了，前端的很多项目都用Typescript进行了重构。这主要得益于Typescript有比较好的类型支持，在编码的过程中可以很好地做一些类型推断（主要是编辑器会有代码提示，就很舒服）。再者Typescript的语法相较于javascript更加严谨，有更好的ES6的支持，这些特 ...
React Native 混合开发与实现
关于
微信公众号：前端呼啦圈（Love-FED）
我的博客：劳卜的博客
知乎专栏：前端呼啦圈
前言
随着 React 的盛行，其移动开发框架 React Native 也收到了广大开发者的青睐，以下简称 RN。通过 RN 我们能够使用 JavaScript 语言来实现跨平台移动应用的开发，打开了前端工程师通往移动平台的大门。用 RN 官方的介绍来概括它 ...
React Invalid hook call
先上一段异常错误信息
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rule ...
react react使用css
现在使用脚手架（react-create-app）的项目不需要在在css文件后面添加module就会自动为其添加模块化后缀
在react 中使用css有以下几种方法
第一种全局使用
app.js
import React from 'react';
import Router from "./router"
import './App.css';
function App() {
return (
<div className="App">
...
React之动画实现
React之动画实现
一,介绍与需求
1.1,介绍
1,Ant Motion
Ant Motion能够快速在 React 框架中使用动画。在 React 框架下，只需要一段简单的代码就可以实现动画效果
2,SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢？别急，下面让我们一步一步来看看究竟要怎么使用状态提升
假设我们有这样一个需求，提供两个输入框（分别属于两个组件），保证输入框里面的内容同步
好，下面我们先来封装一个输入框组件 Input
class Input extends React.Component {
constructor(props) {
super(props)
// ...
npm 安装 react-devtools
由于不能科学的上网。网上看资料装上了这个插件，装的过程有点坑。记录一下，希望能帮到和我一样的新手。
1.第一步，克隆下远程仓库的东西。
桌面右键，git-bash。然后输入：
git clone https://github.com/facebook/react-devtools.git
这个过程耗时比较长。
结果：
2.第二步， 进入到react-devtools目录， ...
React Hooks： useCallback理解
useCallback把匿名回调“存”起来
避免在component render时候声明匿名方法，因为这些匿名方法会被反复重新声明而无法被多次利用，然后容易造成component反复不必要的渲染。
在Class component当中我们通常将回调函数声明为类成员：
class MyComponent extends React.Component {
constructor(props) {
...
React 使用 if else 判断语句
今天在写 React 时，在 render 的return中既然不能使用if判断语句，所以就整理一些在react中使用if 的方式，可根据自己的实际情况选择：
方式一：
class LLL extends React.Component {
constructor(props){
super(props);
this.judge = false
}
render(){
let Message
if ( ...
常见的React面试题
1、redux中间件
答：中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。
常见的中间件： redux-logger：提供日志输出；redux-thunk：处理异步操作；redux-promise： ...
