一、 react组件两种导入方式React组件可以通过两种方式导入另一个组件import(常用)import component from './component'requireconst component = require('./component')两种方式有什么区别?提出的规范不同 import是ES6语法,reuqire是CommonJs提出的.import会通过babel转换成Co
转载 2023-08-28 10:07:06
230阅读
React状态管理 React内置的hooks来管理局部状态:useState, useReducer useContextTips 局部状态: React 的 useState, useReducer, useContext Hooks通过 Graph QL 的远程状态: Apollo Client通过 REST 的远程状态: React Hooks or Redux/MobX/
使用 Enzyme 库测试 react。这样可以使你的程序将更加可靠,并且更加容易避免回归。我们在这里用了 Jest,不过 Enzyme 也可以与 Mocha 和 Chai 之类的库一起使用。 Enzyme 基础 Enzyme 是一个库,用于在测试时处理你的 react 组件。它由 Airbnb 开
转载 2020-10-17 14:55:00
237阅读
2评论
  搭建react项目时,刚开始路由的配置文件都是写死的,每写一个组件然后都需要自己去路由的配置文件中进行配置路由。其实刚开始觉得也很正常,因为动态import感觉很难实现。但是项目需求后台需要记录那些组件的路径以及路由 跳转的路径。所以就想到了哪些数据都由后台返回,前端只需要根据后台返回的路径动态的引入组件。  一开始后台返回的是完整路径,比如说自己写的组件在pages目录下,然后在router
转载 2023-12-13 22:29:59
141阅读
React 中, React 认为结构和逻辑是密不可分的, 所以在 React 中结构代码也是通过 JS 来编写的 正是受到 React 这种思想的影响, 所以就有很多人开发了用 JS 来编写 CSS 的库 比较火热的库有:styled-components / emotion 利用 JS 来编
原创 2022-05-10 21:40:00
144阅读
Bootstrap的下载一. 使用Bootstrap第一步,先将生成环境的Bootstrap下载下来。然后将下载,然后引入到自己建好的当前目录中二、点到起步中的基本模板将看到的整段代码复制粘贴到建好的index.html文件中官网明确表示: 使用此给出的这份超级简单的HTML模板,或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴本来是想在这里写Book,但发
转载 2023-12-08 13:36:46
70阅读
路由是用来管理应用程序中的路径和组件之间关系的。它可以帮助你在不同的路径之间切换组件,从而实现单页面应用程序(Single-Page Application,简称SPA)的效果。React Router是一个基于React的路由库,它可以帮助你在React应用中轻松地实现路由功能。要使用React Router,你需要先安装它:npm install react-router-dom然后在你的Re
React相信各位伙伴都不陌生,那么你的React技术还好吗?来跟我一起重学一遍React,看看有什么知识是你没有记住的呢?一起来查漏补缺
原创 2022-10-21 16:28:22
447阅读
引入方法有:1、行内样式;2、声明样式,行内样式类似,区别只是声明一个变量保存样式表绑定给style属性;3、import引入React组件一般是一个文件夹,文件夹里包含对应的js和css,只要在js中引入同级的css即可。本教程操作环境:windows7系统、CSS3&&HTML5版、Dell ...
转载 2021-07-25 14:24:00
80阅读
2评论
Css Module (推荐) React 的脚手架已经内置了 css modules 的配置: .css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等; 在以前我们的文件是这样的 index.css 如果使用了 CSS
原创 2022-05-10 12:12:00
511阅读
本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm i babel-plugin-import -D 安装一个babel插件用于做组件的按需加载(否则项
转载 2018-03-13 19:23:00
263阅读
2评论
安装npm install redux -s在src目录下新建store文件夹,新增index.js文件导入redux基本模块import { createStore
原创 2022-07-06 16:49:37
137阅读
javaee引入css js引入css
转载 2017-12-25 15:21:00
213阅读
styled-components 特性 props 在前面的文章当中介绍了一个 styled-compoents 的一个动态修改状态的特性,这个特性就是借助 props 来实现的,如下, 假如我现在有这么一个需求就是点击一个按钮修改一下 p 标签的颜色: import React from 're
原创 2022-05-10 22:14:00
63阅读
文章目录1. 第一个 react 应用2. jsx2.1 jsx 介绍2.2 使用 jsx 重构页面显示结构2.3 jsx 表达式2.4 jsx 动态属性赋值2.5 jsx 列表渲染 1. 第一个 react 应用引入文件:react 开发需要引入多个依赖文件,其中 react.js、react-dom.js 这两个文件是我们创建 react 应用程序必须要引入的依赖文件。# react.js
1.说明以下内容全部来自于我的github文章全集内容。欢迎在github阅读,star , issue welcomed!2.如何在react组件中加js文件export default class Script extends React.Component { static propTypes = { attributes: RPT.object, // eslint-disab
转载 2023-11-02 08:21:59
313阅读
当今互联网技术发展迅速,越来越多的Web应用需要提供流畅、高效、优美的用户体验。为了实现这一目标,前端开发人员需要掌握各种技术和工具。在这些技术和工具中,React作为一款流行的JavaScript库,得到了广泛的应用和认可。而React生态圈中的第三方库和组件,则进一步丰富了开发者的工具箱,使得开发更加高效、便捷。1. React JoyrideReact Joyride 用于为Web应用程序添
前言:下面举例默认支持less和sass。1、引入外联样式index.less(外联样式文件).out-css{ .text{ font-size: 20px; color: red; } }OutCss.js(react组件)import React from 'react'; // 引入外联样式,一经加载将全局有效,所以类名在命名的时候要特别注
转载 2023-12-02 13:26:26
504阅读
一、React概述React是一个是一个开源的js库,用来为数据渲染视图的,由facebook,Instagram社区维护的。(例如美团、阿里、airbnb都在使用React开发)为什么会出现React:频繁的数据操作-->① 大量的DOM操作(自动操作DOM);②逻辑会比较复杂(状态与内容对应起来)React发展历史:2011年 react受php当中xhp框架的影响,部署在faceboo
重新设计 React 组件库 诚身 7 个月前 在 react + redux 已经成为大部分前端项目底层架构的今天,让我们再次回到软件工程界一个永恒问题的探讨上来,那就是如何提升一个开发团队的开发效率? 从宏观的角度来讲,其实只有良好的抽象才能真正提高一个团队的开发效率,而囿于不同产品所面临的不同业务需求,当我们抽丝剥茧般地将一个个前端工程抽象到最后一层,那么剩下的其实就只有
转载 2024-08-26 10:07:51
61阅读
  • 1
  • 2
  • 3
  • 4
  • 5