Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to transfer React components to Vue components". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to transfer React components to Vue components.

Brief introduction

For react-to-vue tools, basic react component is transformed, not all react applications. The definition of basic react component is more based on props and state rendering components, which can also include sending requests.

This paper first introduces the commonness and incompatibility of the components of the two frameworks, and then introduces the use and principle of react-to-vue. In the actual business, more than 100 react basic business components of lufax can be transformed into vue components by react-to-vue.

Take stock of the component commonalities of the two frameworks 1. Props

/ / reactFrontendMagazine.propTypes = {name: PropTypes.string} FrontendMagazine.defaultProps = {name: 'FrontendMagazine'} / / vue {name:' frontend-magazine', props: {name: {type: String, default: 'FrontendMagazine'}} 2. Component's own state

3. Life cycle

Although the life cycle names are different, there are almost corresponding ones.

4. Deal with events

/ / reactclass FrontendMagazine {clickme () {/ / xxxx}} / / vue {name: 'frontend-magazine', methods: {clickme () {/ / xxx}} 5. Component error capture

6. Jsx syntax

React is written based on jsx. For vue, although in many scenarios, you can use template to write, but vue also fully supports jsx syntax. For this tool, it only converts the jsx syntax of react into jsx supported by vue.

The incompatibility of the two frameworks

React in the latest version, there is flagments support, allowing the root node to return multiple nodes, currently do not see vue support, and there is the design of react components, the use of high-level, for this tool, is not supported

Installation and use of react-to-vue tools # installnpm install-g react-to-vue# usageUsage: 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 principle steps

For the input file, first use babylon to parse and generate ast

If the file is typescript, the corresponding ts description will be removed

To traverse the ast, first extract propTypes and defaultProps

Handle function components and class components according to component type

In the class component, you need to transform the life cycle, state and other information

Finally, according to the extracted information, it is spliced into vue components and beautified by prettier-eslint.

Comparison before and after transformation

At this point, I believe you have a deeper understanding of "how to transfer React components to Vue components". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.