react-styleguidist是一个基于JSDOC可以帮助react项目快速构建项目文档的一个插件。 一、简单入门 1.1 环境准备 准备一个新鲜的react项目(非必需) npx create-react-app react-app 添加react-styleguidist npm inst
转载 2022-07-13 09:42:50
97阅读
最近一直在捣鼓如何搭建React组件,至于为什么会产生这个想法,主要是因为组件对于前端生态来说究极重要,每一个着眼于长远发展、看重开发效率的的互联网公司基本上都会量身定制自己的组件,它的好处不用多说。对于前端工程师而言,去理解以及掌握它,可以让我们在今后的工作中以及应聘过程中多出一项特殊技能,并且对自身的纵向发展也就是很有利的。下面是我记录我在搭建组件的过程。初始化工程搭建工程不打算采用
原创 2021-05-18 16:14:32
1041阅读
这几个,你知道吗?
转载 2021-07-15 17:53:06
349阅读
(给前端开发博客加星标,提升前端技能)作者丨Max Rozen译者丨王强策划丨小智本文最初发布于 maxro
翻译 2021-06-30 13:51:26
137阅读
   目录React项目:... 1win下开发环境的搭建:... 1简介:... 5例,测试程序:... 7例,组件状态:... 9例,复杂例子:... 11   React项目: win下开发环境的搭建: react-mobx-starter-master.zip   #解压此文件到指定位置,该位置即为项目根目录 $ npm install   #或$npm i,会按照package.json
原创 2019-05-15 09:57:18
344阅读
文|ronghangon前端一个系统拥有大量的业务场景和业务代码,相似的页面和代码层出不穷,如何管理和抽象这些相似的代码和模块,这肯定是诸多团队都会遇到的问题。不断的拷代码?还是抽象成UI组件或业务组件?显然后者更高效。那么现在就面临一个选择:一是选择React生态中已有的组件,例如antDesign、Material-UI等比较成熟的组件;二是团队再开发一套属于自己的组件。有赞前端团队选择
原创 2021-05-03 06:08:04
348阅读
vuepress项目部署到github pages上准备工作修改config.js中的basevuepress项目中添加文件新建github仓库部署体验 准备工作在这里vuepress项目的编写就不多加赘述了,这篇文章默认已经拥有vuepress项目并且会创建远程仓库。这里推荐项目名称和远程仓库名称一致修改config.js中的base在.vuepress目录下有个config.js文件,添加配
# 如何使用VuePress搭建组件 ## 简介 在本篇文章中,我将教会你如何使用VuePress搭建组件。VuePress是一个基于Vue.js的静态网站生成器,可以用来快速搭建文档网站。使用VuePress搭建组件可以帮助我们更好地组织和展示组件,方便其他开发者使用和理解。 ## 流程图 ```mermaid flowchart TD A(准备工作) B(创建项目
原创 7月前
69阅读
react的目的是将前端页面组件化,用状态机的思维模式去控制组件组件组件之间肯定是有关系得,通过合理得组件设计,给每一个组件划定合适得边界,可以有效降低当我们对页面进行重构时对其他组件之间得影响。同时也可以使我们得代码更加美观。1、高耦合低内聚。高耦合:将功能联系紧密得部分放到一个容器组件内对外暴漏出index.js,目录结构如下:├── components│ └── App└── inde
重新设计 React 组件 诚身 7 个月前 在 react + redux 已经成为大部分前端项目底层架构的今天,让我们再次回到软件工程界一个永恒问题的探讨上来,那就是如何提升一个开发团队的开发效率? 从宏观的角度来讲,其实只有良好的抽象才能真正提高一个团队的开发效率,而囿于不同产品所面临的不同业务需求,当我们抽丝剥茧般地将一个个前端工程抽象到最后一层,那么剩下的其实就只有
前言俗话说:“麻雀虽小,五脏俱全”,搭建一个组件,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险~目前团队内已经有较为成熟的 Vue 技术栈的 NutUI 组件[1] 和 React 技术栈的 yep-react 组件[2]。然而这些组件大都从零开始搭建,包括 Webpack 的繁杂配置,Markdown 文件转 Vue 文件功能的开发,单元测试功能的开
原创 2021-05-10 17:46:59
10000+阅读
React组件 React组件介绍 组件React的一等公民,使用React就是在用组件 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点:可复用、独立、可组合 React组件的两种创建方式 使用函数创建组件 函数组件:使用JS的函数(或箭头函数)创建的组件 约定1:函数名称必须以大 ...
转载 2021-08-02 01:13:00
190阅读
2评论
React轻巧源于React组件的思想。就像没有函数的概念之前,计算一个长方形的面积,每次都是相同的计算长和宽的乘积,然后输出。React允许我们自定义组件,在以后的工作过程中,我们想渲染不同的组件,都可以自定义,通过render函数返回DOM元素节点。React组件示例:<!DOCTYPE html><html> <head> &...
原创 2021-07-28 09:50:19
215阅读
一、组件执行的生命周期:           1、初始没有改变state、props 的生命周期:render  2、改变 state 后的生命周期:    a、父组件的 state 改变:render、【子组件的 componentWillReceiveProps、子组件对应父组件这4个周期函数】、componentDidUpdate父组件的的s
一,对组件化的理解1,组件的封装-视图-数据-变化逻辑(数据驱动视图变化)例:import React, { Component } from 'react'; import List from './list/index.js'; import Input from './input/index.js'; class Todo extends Component { const
传递props import React, {Component, VFC, ReactNode } from 'react'; const Hello: VFC<{ body: ReactNode }> = ({ body }) => { return <div>{body}</div>; };
转载 2018-08-27 16:35:00
678阅读
2评论
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/react.js"></script> <script src="js/react-dom.js"></scrip
转载 2017-08-09 09:16:00
138阅读
原文链接:https://.newline.co/fullstack-react/30-days-of-react/day-3/ Let's revisit the "Hello world" app we introduced on day one <!DOCTYPE html> <html
转载 2020-02-24 16:50:00
79阅读
2评论
学习目标 了解组件模式 组件分类 类组件又称为动态组件,类组件中可自定义方法,一般有事件
原创 2022-06-27 11:20:35
171阅读
React组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。以下实例创建一个名称扩展为 React.Component 的 ES6 类,在 render() 方法中使用 this.state 来修改当前的时间。
  • 1
  • 2
  • 3
  • 4
  • 5