Extract to React
大小:0.48MiB版本:v 1.0.2更新时间:2019-01-16
Chrome/Chromium extension that allows easy HTML to React conversion.
Extract to React 的使用方法详解,最全面的教程
Extract to React 描述:
用户数:1000
分类:开发者工具插件
扩展大小:0.48M
最后更新时间:2019-01-16
版本:v 1.0.2
Extract to React 插件简介:
这是来自Chrome商店的 Extract to React 浏览器插件,您可以在当前页面下载它的最新版本安装文件,并安装在Chrome、Edge等浏览器上。
Extract to React插件下载方法/流程:
点击下载按钮,关注“扩展迷Extfans”公众号并获取验证码,在网页弹窗中输入验证码,即可下载最新安装文件。
Extract to React插件安装教程/方法:
(1)将扩展迷上下载的安装包文件(.zip)解压为文件夹,其中类型为“crx”的文件就是接下来需要用到的安装文件
(2) 从设置->更多工具->扩展程序 打开扩展程序页面,或者地址栏输入 Chrome://extensions/ 按下回车打开扩展程序页面
(3) 打开扩展程序页面的“开发者模式”
(4) 将crx文件拖拽到扩展程序页面,
完成安装如有其它安装问题,
请扫描网站底部二维码与客服联系如有疑问请参考:
https://www.extfans.com/installation/Extract all the HTML & CSS of any portion of any website directly into a ready-to-go React Component!
----
# Usage
- Quick start:
Inspect an element on the page > "Extract To React" tab > Extract the code to CodePen or JSFiddle.
- Advanced usage:
It is possible to split a monolithic component up into multiple nested components.
Find the elements you wish to become their own component in the "Elements" tab. Add an attribute called `data-component`.
Set the value of `data-component` to be the extracted name of the component:
<h1 class="heading" data-component="Heading">Hello, world!</h1>
<nav class="nav" data-component="Nav">
<ul class="list">
<li class="list-item" data-component="ListItem">#1</li>
<li class="list-item" data-component="ListItem">#2</li>
</ul>
</nav>
Will result in 3 components being extracted: `Heading`, `Nav`, and `ListItem`
----
# Bugs and Features
If you find a bug or have a feature request, please create an issue on GitHub: https://github.com/jesstelford/extract-to-react/issues
----
# Attribution
This project is based on excellent open source software:
* SnappySnippet: Chrome/Chromium extension that allows easy CSS+HTML extraction of specific DOM element. Created snippet can be then exported to CodePen, jsFiddle or JS Bin with one click.
(https://github.com/kdzwinel/SnappySnippet/issues)
* html-to-react-components: Extract annotated portions of HTML into React components as separate modules.
(https://roman01la.github.io/html-to-react-components/)