精华内容
下载资源
问答
  • vue 转react尝试

    2019-09-18 05:34:39
    今天学习了一下react,感觉跟vue 语法类似。于是举一反三搜索了一下,发现由个工具,可以提供这样子的服务: https://tools.w3cub.com/vue-to-react vuereact 的生命周期 created: 'componentWillMount', ...

    今天学习了一下react,感觉跟vue 语法类似。于是举一反三搜索了一下,发现由个工具,可以提供这样子的服务:

    https://tools.w3cub.com/vue-to-react

    vue 和 react 的生命周期

    created: 'componentWillMount',
    mounted: 'componentDidMount',
    updated: 'componentDidUpdate',
    beforeDestroy: 'componentWillUnmount',
    errorCaptured: 'componentDidCatch',
    render: 'render'

    react 没有 computeds

    react 没有 computed, 需要支持 手动 setState

    hooks 语法

    hooks 下如何还原 setState 类似的操作:

    可以使用 useReducer

    const [state, setState] = useReducer(
        (state, action) => {
          return {
            ...state,
            ...action
          };
        },{ name: '小熊猫',category: '小熊猫科' })
    setState({ name: '金鱼' })
    展开全文
  • Vue组件转换为React组件的工具。 现在支持转换SFC(.vue)文件。 有两种使用转换工具的方法:网页或cli。 网页 为了获得更好的性能,建议通过Chrome访问它。 演示屏幕在这里。 命令行界面 安装 npm i vue2...
  • VUE转向react 第一天

    2020-04-21 20:12:03
    在之前找工作过程中感觉到react确实在国内的使用场合更多一点。 学习嘛,不能停。 环境搭建 用webpack一套标准的搭建流程,具体搭建还是跟随着官方文档中的自己构建工具链来一步一步搭起来的。大致分为几个步骤 1. ...

    入手原因

    • 新公司需要。
    • 在之前找工作过程中感觉到react确实在国内的使用场合更多一点。
    • 学习嘛,不能停。

    环境搭建

    用webpack一套标准的搭建流程,具体搭建还是跟随着官方文档中的自己构建工具链来一步一步搭起来的。大致分为几个步骤
    1. 初始化npm和git(如果需要);
    2. 构建大致文件结构;
    3. 配置babel,安装babel下的core、cli、preset-env、preset-react,配置 .babelrc 文件
    4. 配置webpack,这里从实际项目出发,发现普遍的做法是将webpack内容中的不同部分拆分出一个单独的文件夹。方便管理和编写很多。
    5. 安装react,react-dom
    6. 配置热更新,对应的包叫做react-hot-loader
    7. 写config中的script,配置开发指令。

    基础学习

    基础组件方面没有太多难点。有几个需要注意的点在这里列一下。

    • JSX就是一个可以带着HTML标签的表达式,其中HTML标签内再引用变量需要用{}括起来。
    • 元素渲染是用ReactDOM.render()来执行的,传入参数分别是渲染成什么和渲染到哪。
    • 函数就可以作为组件,当然类更好(之后因为有hooks的存在,所以推荐还是用函数组件)
    • 数据是单向流动的,这个和vue一样,数据通过props从父到子传播。
    • 状态state之前一般定义在class上(现在有hooks了)基本上是在构造函数的时候新建this.state属性,给这个组件增加class。修改属性要调用this.setState()来修改。
    • 生命周期:他的生命周期一般叫做DidMount、Unmount等。
    • 事件处理:记着要在构造函数中新增绑定bind来确保调用时候的this指向。
    • 条件渲染:因为这里很多都是js直接写,所以通过return不同值直接改变会返回的内容。因此可以用一些短路(&&)或者三元运算符等进行操作。return null会默认不渲染,但是他的生命周期还是会走一遍。
    • 列表用map去遍历,挨个返回元素就好。注意,每个列表具体项都应该对应一个key以便tree shaking
    • 表单:还要再看。
    • 状态提升:从来都是用传入的props来作为数据来源,用来使用统一的数据来源。
    • 组合继承:可以通过props.children来获取组件被组件包裹的子组件。

    hooks应用

    今天明确的会用了两个hooks

    1. 用来修改state的自带hook stateHook,他的存在就是为啥现在可以不用class去写了。再函数组件内可以调用useState(default)来新建这个组件的state,返回第一个数属性名,第二个是设置属性方法。
    2. context 这个是一个全局的状态。其实之后再reduce里面还会多次看到这个钩子。新建context是使用React.createContext来创建,他会产生一个新的全局state对象。在<myContext.Provider>中包裹的内容会在其值改变的时候重新渲染,也可以通过组件函数的.contentType来挂载给class组件。组件内使用context需要调用对应的context(就是调用create的时候的返回值)
    展开全文
  • React转Vue

    2019-09-18 05:34:38
    从Babel AST 角度分析来看,相比Vue转React,React转Vue是相对于比较简单的,比如关键字 setState 关键字。因为Vue 用 this.xxx 来做赋值操作,而react 用 setState,React转Vue只需要搜索setState 关键字,而Vue转...

    从Babel AST 角度分析来看,相比Vue转React,React转Vue是相对于比较简单的,比如关键字 setState 关键字。因为Vue 用 this.xxx 来做赋值操作,而react 用 setState,React转Vue只需要搜索setState 关键字,而Vue转React则需要搜索this 赋值关键字,操作比较烦琐。

    生命周期对比:

    React转Vue

    props对比:
    React转Vue

    更多查看工具:

    https://tools.w3cub.com/react-to-vue

    展开全文
  • javascript Web项目的交互式开发工具,例如vue react ui界面的开发设计,如果有可视化设计工具的帮助,切实可行的解决事件半功倍的效果。在web项目组件化的时代。一个优秀的可视化工具会在概要设计,网站总体设计...
  • 前端转换神器react-to-vue

    千次阅读 2018-05-21 22:23:17
    近年来,前端技术不断火热,尤其以ReactVue技术最为火爆,这两个前端框架也是目前国内使用得最多的两个框架。虽然,在使用的广度上React虐胜...答案是有的,react-to-vue就是这么一款不错的工具软件。 简介 ...

    近年来,前端技术不断火热,尤其以React和Vue技术最为火爆,这两个前端框架也是目前国内使用得最多的两个框架。虽然,在使用的广度上React虐胜一筹,但Vue框架的发展趋势也不容小觑,特别是去年React的MIT风波,越来越大的企业开始将目光转向了Vue。那么有没有一款软件或者工具可以实现两个框架之间组件的可复用呢?答案是有的,react-to-vue就是这么一款不错的工具软件。

    简介

    对于react-to-vue工具,转化的是基本的react component,而不是全部的react应用。而基本react component的定义更多是基于props和state来渲染的组件,其中也可以包括发请求。
    本文先介绍两个框架的组件共性和不兼容的地方,再介绍react-to-vue的使用和原理。在实际业务中,陆金所100多个的react基础业务组件,react-to-vue可以转化90%以上,变成vue组件。

    react与vue组件共性

    下面通过对比来认识一下react与vue组件的共性。

    props

    框架 说明
    React 通过propTypes来定义属性名和属性类型,defaultProps用来设置默认值
    Vue 通过添加props属性

    下面是一个具体的使用实例:

    // react
    FrontendMagazine.propTypes = {
        name: PropTypes.string
    }
    FrontendMagazine.defaultProps = {
        name: 'FrontendMagazine'
    }
    // vue
    {
        name: 'frontend-magazine',
        props: {
            name: {
                type: String,
                default: 'FrontendMagazine'
            }
        }
    }

    组件状态

    框架 说明
    React 在初始化的时候,通过this.state = {xxx}来设置初始状态
    Vue 通过data 返回函数来设置值,不同于react的state,vue是响应式

    生命周期对比

    虽然两个框架的生命周期名不一样,但是差不多都是有对应关系的。
    React生命周期
    这里写图片描述
    Vue生命周期
    这里写图片描述

    事件处理

    框架 说明
    React 相应的事件都加到了组件的实例方法上
    Vue 设计上比较好,处理事件都加在一个methods对象下面,方便查找,更直观
    // react
    class FrontendMagazine {
        clickme () {
            // xxxx
        }
    }
    
    // vue
    {
        name: 'frontend-magazine',
        methods: {
            clickme () {
                // xxx
            }
        }
    }

    异常捕获

    两个框架在捕捉异常方面的实现策略相似,只是实现的函数不一样。

    框架 说明
    React componentDidCatch
    Vue errorCaptured

    jsx语法

    react是基于jsx来写的,对于vue来说,虽然在好多场景下,可以使用template来写,但是vue也完全支持jsx语法的,对于本工具,也只是把react的jsx语法转换成vue支持的jsx

    两个框架不兼容的地方

    react在最新版本里面,有flagments的支持,允许根节点返回多个节点,目前没有看到vue支持的,还有就是在设计react组件的时候,使用了高阶,对于本工具,也是不支持的。

    react-to-vue介绍

    react-to-vue是一款可以把 React 组件转为 Vue 组件的工具,并且支持 TypeScript 语法解析。使用有以下几步:

    安装及使用

    # install
    
    npm install -g react-to-vue
    
    # usage
    
    Usage: rtv [options] file(react component)
    
    
    Options:
    
      -V, --version         output the version number
      -o --output [string]  the output file name
      -t --ts               it is a typescript component
      -h, --help            output usage information
    
     # demo
    
     rtv demo.js

    步骤

    1. 对于输入的文件首先使用babylon来解析,生成ast;
    2. 如果文件是typescript,会去掉相应的ts描述;
    3. 对ast进行遍历,首先提取propTypes和defaultProps;
    4. 根据组件类型,处理函数组件和类组件;
    5. 在类组件里面,需要转换生命周期,state等信息;
    6. 最后根据提取到的信息拼接成vue组件,通过prettier-eslint来美化。

    转换前后对比

    这里写图片描述

    总结

    项目地址: https://github.com/vicwang163/react-to-vue/

    展开全文
  • 基于目前ReactVue比较火,开发react-to-vue 工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具,转化的是基本的react component,而不是全部的react...
  • 编译为VueReact,Solid,Angular,Svelte和Liquid。 从Figma和Builder.io导入代码 试试看 请尽早尝试我们的,请! 为什么 组件库 管理对跨框架提供UI组件的库的支持是一件痛苦的事情,尤其是在无法使用Web组件...
  • 基于目前ReactVue比较火,开发react-to-vue工具的目的是为了进一步提高组件的可复用用性,让组件复用不仅仅局限在一个框架里面 简介 对于react-to-vue工具,转化的是基本的react component,而不是全部的react...
  • 如果您希望为Android应用程序创建网站并需要保持一致,那么Material Kit是一个很棒的工具,从而给人留下视觉上相似的元素的印象。 它本身也是一种很棒的资源,看起来很漂亮,可以帮助您构建网页。 Material Kit...
  • react源码分析

    2015-10-25 15:34:00
    前端的发展特别快,经历过jQuery一统天下的工具库时代后,现在各种框架又开始百家争鸣了。angular,ember,backbone,vue,avalon,ploymer还有reactjs,作为一个前端真是稍不留神就感觉要被淘汰了,就在去年大家还...
  • 文章自:...同其它的一些工具结合在一起,它也可以成为一个新“框架”。通过阅读我们最近一次在 ValueCoders 上发表的 文章, 你会了解到 Vue.js 是顶级...
  •  最近为了能够写一份值得参考的webpack文档,特意的去查了好多相应的书籍,...是因为我在开发vuereact的时候遇到了这个工具,然后最近在看人家的招聘要求的时候,总是会带上这个。 然后我就趁着下班时间研...
  •  最近为了能够写一份值得参考的webpack文档,特意的去查了好多...是因为我在开发vuereact的时候遇到了这个工具,然后最近在看人家的招聘要求的时候,总是会带上这个。 然后我就趁着下班时间研究了一下这个东西...
  • Storybook是一个开源工具,用于为ReactVue,Angular等隔离开发UI组件。 它使构建令人惊叹的UI井井有条且高效。 如何使用 运行: git clone https://github.com/luannguyen252/react-storybook <your> 到您的...
  • vuereact运行命令一样。 首先,我们 npm init 新建一个项目工程,新建我们项目的核心文件json2excel.js ,并运行node json2exce.js,然后控制台就可以打印东西了。 把一个文件转化成另一个文件,我们要知道这个...
  • 第一次接触React会被它繁琐的依赖搞蒙,对于 Vue 来说我们只依赖一个Vue.js文件,但是react居然要依赖三个库 cdn引入 本地引入 npm包管理 snippet-generator.app //代码片段生成器 认识JSX const element =
  • 使用AngularJS、ReactVue.js等框架进行前端开发已经成为趋势。因此我也开始了vue.js的修炼之路(之所以选择vue.js是因其入门门槛低)。 一、安装 为了让我们创建Vue项目更加容易,我们使用vue.js的脚手架工具Vue...
  • Vuex 主流的react应用状态管理工具,基于redux vue-cli4 基于vue的前端脚手架 Less css预编译语言,轻松编写结构化分明的css Element-Ui 优秀的饿了么vue组件库 axios 强大的前端请求库 mand-mobile 基于vue的移动端...
  • 1 . 初识ReactReact类似Vue... 管理React框架的工具:(1)babel : 把ES6语法转换成ES5,兼容各种浏览器 babel 组件主要包含 babel-cli/babel-polify/babel-core; a . 全局安装babel : npm install babel ...
  • HiApp使用不同的构建工具来构建同一项目,希望它将帮助您选择合适的构建工具。 f7-vue-webpack起源/主服务器 f7-webpack在 fis3在 要求 科尔多瓦^9.0.0 框架7 ^4.5.0 framework7-vue ^4.5.0 要构建和运行应用,...
  • 谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如VueReact,Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣;从早期的王者Browserify,Grunt,到后来赢得宝座的Gulp, 以及独树一帜的fis3, 以及下...
  • React 例子:demo-react.md 声明 本项目只提供行情图形库及麦语法脚本执行器. 页面中所有的行情数据都来自互联网或测试假数据, 不能确保数据的正确性, 仅供开发调试使用. 任何行情数据问题都与本项目无关. 请自行去...
  • TypeScript实战-25-ESLint代码检测

    千次阅读 2019-09-25 08:49:21
    使用VueReact开发时,通常使用ESLint做代码检测 TypeScript有自己的检查工具TSLint 但由于ESLint在VueReact的影响及更好的性能 TypeScript也决定使用ESLint做TS的代码检测工具 二,ESLint TypeScript + ESLint: ...
  • 前端构建工具整理

    2018-08-10 13:10:56
    前端开发不仅限于直接编写html,css和javascript,Web应用日益庞大,代码也更加庞大,因此许多新的思想(例如模块化和工程化等)和框架(ReactVue等),以及新的语言(Es6 TypeScript)随之出现,而构建工具则承担...
  • 支持实时刷新, ReactVue 可以热刷新; 支持自动生成雪碧图; 支持自动转换 px 到 rem; 支持 SourceMap,方便调试; 可以自定义 Webpack, Postcss 配置。 安装 npm i -g ada 使用帮助 运行 ada,启动开发服务器,...
  • webpack打包工具

    2018-04-09 21:18:43
    通常与ReactVue结合起来用 npm init //初始化 npm install webpack –save-dev //安装 webpack xxx.js xxx.bundle.js //打包 webpack自身只理解JavaScript,支持AMD,CMD,ES6,不支持CSS样式的引入,loader...

空空如也

空空如也

1 2 3 4 5
收藏数 87
精华内容 34
关键字:

vue转react工具

vue 订阅