Umi for React项目mock数据的使用

使用 Mock 可以方便的模拟接口数据，只需要简单配置，就能实现上万级别的模拟数据。下面简单记录一下， Umi 项目 Mock 的使用：本地配置开启 Mock修改 umi 配置文件 .umirc.ts ，开启 mock ：export default defineConfig({   mock: {}, });复制配置接口 在项目配置接口的文件。例如：在 ./src/api/table.ts 中添

react项目的@路径配置

无论是vue还是react开发，我们通常需要引入路径的便捷化配置，通常我们都会约定使用路径@作为根路径地址。如果是个人react开发的@路径简单配置1. 安装cracoyarn add @craco/craco复制2.根路径下创建 craco.config.jsconst path = require("path") module.exports = { webpack:{

在React项目中全量使用 Hooks

前言此篇文章整理了在 React 项目开发中常用的一些 HooksReact HooksHooks 只能用于函数组件当中useStateimport { useState } from 'react'; const Component = () => { const [count, setCount] = useState(0); return ( &

在React项目中引入echarts球形水波纹

1、插件官网：https://www.npmjs.com/package/echarts-liquidfill2、在项目中安装echarts和echarts-liquidfillnpm install echarts npm install echarts-liquidfill复制目前安装版本：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bHvx9zrJ-1679

Create React App 创建前端项目

如题，本文我们将使用 Create React App 创建前端项目。通过本文，你将了解到下面的知识点：创建项目结合 vant UI 框架（如果你是开发 PC 端项目，你可以结合 ant-design 等框架）路由配置接口联调更改打包文件发布项目在开始之前，先说下我基于什么环境操作的：# 系统 macOS Apple M1 # 在 M1 上开发的过程中，遇到过 npm 包管理的问题，读者如果是此环

dva+react+antd+webpack 项目开发配置

如何搭建一个dva项目如何搭建一个dva项目 后期项目会在github上进行书写，同时也会在segmentfault上进行同步～3Q拜读～

基于React-Native0.55.4的语音识别项目全栈方案

【摘要】 移动端的API能力验证方案与PC端不一样！不一样！！不一样！！！ 即使需要使用的API都存在，也不一定能用，这一点和PC端是有很大区别的，国内的手机系统虽然都是基于Android,但几乎都会经过各大厂商的定制，功能与原版Android系统并不是完全一致的，在考察技术方案的时候一定要确认用demo把

React Native学习笔记(1) 环境配置，项目结构，开发环境结构

http://www.jianshu.com/p/8a4d77e7eabe

如何在React项目中使用ECharts图表库

引言 在项目的开发中，对于我们前端开发人员而言，总是无法避免需要对数据进行可视化分析和设计的需求。但事实上，如果单纯的依靠Html5 Canvas想要快速地创建简洁，美

kbone 基础 - [06] Kbone + React 项目手工搭建流程

[Kbone基础 - 05] Kbone + Vue 项目手工搭建流程[Kbone基础 - 05] Kbone + Vue 项目手工搭建流程此方案基于 webpack 构建实现，构建 web 端

技术实践丨React Native 项目 Web 端同构

摘要：尽管 React Native 已经进入开源的第 6 个年头，距离发布 1.0 版本依旧是遥遥无期。“Learn once, write anywhere”,完全不影响 React Native 沦为“不会 JavaScript 也能用”的框架，那如何将在 React Native 项目中引入 reac

003-and design-在create-react-app项目中使用antd

一、概述 create-react-app 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。 1.1、安装和初始化 我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 yarn。 npm install -g c

react 项目实战（九）登录与身份认证

SPA的鉴权方式和传统的web应用不同：由于页面的渲染不再依赖服务端，与服务端的交互都通过接口来完成，而REASTful风格的接口提倡无状态（state less），通常不使用cookie和session来进行身份认证。 比较流行的一种方式是使用web token，所谓的token可以看作是一个标识身份的令牌。客户端在登录成功后可以获得服务端加密后的token，然后在后续需要身份认证的接口请求中

react 项目实战（五）渲染用户列表

现在我们需要一个页面来展现数据库中记录的用户。 在/src/pages下新建UserList.js文件。 创建并导出UserList组件： import React from 'react'; class UserList extends React.Component { render () { return ( ... ); } } export

react 项目实战（四）组件化表单/表单控件 高阶组件

高阶组件：formProvider 高阶组件就是返回组件的组件（函数） 为什么要通过一个组件去返回另一个组件？ 使用高阶组件可以在不修改原组件代码的情况下，修改原组件的行为或增强功能。 我们现在已经有了带有表单校验功能的添加用户的表单，这里的表单有3个字段：name、age、gender，并且每个字段都有它自己的校验规则和对应的错误信息。 要做一个添加图书的功能，图书的表单有name、price

react 项目实战（二）创建 用户添加 页面 及 fetch请求 json-server db.json -w -p 8000

1.安装 路由 npm install -S react-router@3.x 2.新增页面 我们现在的应用只有一个Hello React的页面，现在需要添加一个用于添加用户的页面。 首先在/src目录下新增一个pages目录，用于存放渲染页面的组件。 然后在/src/pages中新增一个UserAdd.js文件。 在这个文件中写入一个基本的React组件： import React fr

react 开发 PC 端项目（一）项目环境搭建 及 处理 IE8 兼容问题

步骤一：项目环境搭建 首先，你不应该使用 React v15 或更高版本。使用仍然支持 IE8 的 React v0.14 即可。 技术选型： 1.react@0.14 2.bootstrap3 3.jquery@1.X.X （使用react.js一般不需要使用jquery了） 使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 F

React Native商城项目实战16 - 购物中心详细页

逻辑分析： 首页（Home）加载的购物中心组件（ShopCenter），传递url数据； ShopCenter里根据url加载购物中心详细页组件(ShopCenterDetail)， ShopCenterDetail中利用WebView展示。 1.Home.js /** * 首页 */ import React, { Component } from 're

React Native商城项目实战12 - 首页头部内容

1.HomeTopView为首页头部内容，HomeTopListView为HomeTopView子视图。   2.HomeTopView.js /** * 首页头部内容 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View

React Native商城项目实战08 - 设置“More”界面cell

1.自定义可复用的cell More/CommonCell.js: /** * 自定义可复用的cell */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity,

React Native商城项目实战02 - 主要框架部分(tabBar)

1.安装插件，cd到项目根目录下执行: $ npm i react-native-tab-navigator --save     2.主框架文件Main.js /** * 主页面 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet,

React Native商城项目实战01 - 初始化设置

1.创建项目 $ react-native init BuyDemo   2.导入图片资源 安卓：把文件夹放到/android/app/src/main/res/目录下，如图：  iOS: Xcode打开工程，把图片拖动到Images.xcassets里   3.根据实际需求，组织项目结构，目的是更加清晰      4.Main

react-native 创建 ios 项目

创建React-Native项目 打开终端输入react-native init ProjectName，这里的ProjectName可以改成你想创建的项目名称。然后有两种方法启动项目 1.从终端开启 在终端找到刚才创建的项目进入它的路径如cd ProjectName，之后启动它react-native run-ios即可。 2.从Xcode开启 在项目中找到以xcodeproj为后缀结尾的文件

JavaScript - Vue / React 实现网页标题文字滚动效果，在浏览器标题栏页签选项卡上进行滚动的特效（详细示例源代码）前端所有技术栈通用，适用于任何前端项目！

前言 网上的代码实现都太复杂了，本文的方案代码少，兼容好。 本文实现了 让网页的 Title 标题文字滚动显示效果，类似传奇网页游戏的标题滚动特效， 示例代码适用于任何前端项目，纯 Javascular 、V

CSS - 完美解决 flex 布局下，一行显示固定个数（平均分布）并且强制换行，超出后 “靠左“ 对其（详细解决方案，适用于 Web、Vue、React 等任何前端项目）

前言 关于 flex 布局下 justify-content: xx，很多朋友都想让其换行后，靠左进行依次排列（默认会平均分布居中）。 本文实现了 纯 C

安装android Studio和运行react native项目（基础篇）

    ANDROID_HOME环境变量 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。   打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量

React项目 - 几种CSS实践

前言团队在使用react时，不断探索，使用了很多不同的css实现方式，此篇blog总结了，react项目中常见的几种css解决方案：inline-style/radium/style-component，只列举了团队项目中用过的一下实现方式，还有其他的不过多展开 css的不足样式与状态相关的情况越来越多，需要动态、能直接访问组件state的css。一切样式都是全局，产生的各种命名的痛苦，BEM等

tomcat 对于react项目位置

React Native 项目常用第三方组件汇总

React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

React Native项目实战之fetch请求

fetch简介 在 AJAX 时代，进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中，为了契合更好的设计模式，产生了 fetch 框架。 fetch相比XMLHttpRequest，提供更加强大、高效的网络请求方式，所以在 Hybrid App 开发模式中，大量的用到了fetch框架作为网络请求。 fetch在浏览器中使用

React项目使用React-Router

⒈初始化React项目（略） 　　请参考　　初始化一个React项目（TypeScript环境） ⒉集成React-Router 　　在React世界里，公认最好用的路由是React-Router。那我们直接来集成它吧。 yarn add react-router history #如果是type环境 yarn add react-router @types/react-router hist