react的單文件編寫(xiě)方式

HtmlCssJs 發(fā)布于2019-08-21 14:41 / 2933人閱讀

摘要：如何使文件在下有語(yǔ)法高亮代碼提示功能呢打開(kāi)，找到用戶設(shè)置，這個(gè)文件名應(yīng)該叫輸入如下代碼具體操作打開(kāi)的文件點(diǎn)擊下一步計(jì)劃支持組件樣式的私有化支持之后會(huì)編寫(xiě)常見(jiàn)編輯器的代碼補(bǔ)全和語(yǔ)法高亮插件如果你有任何好的想法請(qǐng)與我聯(lián)系

single-react-loader

通過(guò)該插件，你可以使用單文件形式編寫(xiě)react組件（將jsx與style組合在一起）

特性

將jsx和css組合在一個(gè)文件內(nèi)

支持less，sass

支持style樣式的私有化

例子

//about.react

如何使用

1.用npm下載single-react-loader

npm install single-react-loader

2.配置你的webpack

//webpack.config.js
module: {
    loaders: [
        {
        test: /.react$/,
        exclude: /node_modules/,
        loader: "single-react"
        }
    ]
}

3.編寫(xiě)你的單文件組件（例子上面已經(jīng)寫(xiě)了）,然后引入

import About from "About.react"

如何使用css預(yù)編譯

// app.react

如何設(shè)置樣式私有化

// app.react

語(yǔ)法高亮和代碼提示 vscode

強(qiáng)烈推薦前端童鞋使用vscode編寫(xiě)代碼，功能強(qiáng)大還很輕量，并且支持中文。

如何使.react文件在vscode下有語(yǔ)法高亮代碼提示功能呢

打開(kāi)vscode，找到用戶設(shè)置，這個(gè)文件名應(yīng)該叫settings.json

輸入如下代碼

{
  "files.associations": {
    "*.react": "html"
  }
}

sublime

具體操作

打開(kāi)*.react的文件

點(diǎn)擊view-->syntax-->open all with current extension as.. --> HTML

下一步計(jì)劃

~~1.支持組件樣式的私有化~~
2.支持sourceMap

之后會(huì)編寫(xiě)常見(jiàn)編輯器的代碼補(bǔ)全和語(yǔ)法高亮插件

如果你有任何好的想法請(qǐng)與我聯(lián)系

云服務(wù)器 GPU云服務(wù)器頭文件編寫(xiě) 頭文件的編寫(xiě)頭 html模板文件編寫(xiě) java編寫(xiě)文件系統(tǒng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87989.html

相關(guān)文章

基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)

摘要：原作者原鏈接基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁(yè)面應(yīng)用。原作者：@LinuxerPHL原鏈接：基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明警告：本作品遵循署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（CC BY-...

big_cat 2019-08-26 10:37 評(píng)論0 收藏0
基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)

摘要：原作者原博文地址基于多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn)法律聲明警告本作品遵循署名非商業(yè)性使用禁止演繹未本地化版本協(xié)議發(fā)布。這是什么背景現(xiàn)代化的前端項(xiàng)目中很多都使用了客戶端渲染的單頁(yè)面應(yīng)用。原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服務(wù)端渲染的方案及實(shí)戰(zhàn) 法律聲明警告：本作品遵循署名-非商業(yè)性使用-禁止演繹3.0 未本地化版本（...

Lavender 2019-08-26 10:37 評(píng)論0 收藏0
基于Redux架構(gòu)的單頁(yè)應(yīng)用開(kāi)發(fā)總結(jié)

摘要：系統(tǒng)架構(gòu)介紹本項(xiàng)目開(kāi)發(fā)基于框架，利用進(jìn)行模塊化構(gòu)建，前端編寫(xiě)語(yǔ)言是，利用進(jìn)行轉(zhuǎn)換。單頁(yè)是為單頁(yè)應(yīng)用量身定做的你可以把拆成很多，這些由路由來(lái)加載。前者用來(lái)獲取的狀態(tài)，后者用來(lái)修改的狀態(tài)。系統(tǒng)架構(gòu)介紹本項(xiàng)目開(kāi)發(fā)基于 React + Redux + React-Route 框架，利用 webpack 進(jìn)行模塊化構(gòu)建，前端編寫(xiě)語(yǔ)言是 JavaScript ES6，利用 babel進(jìn)行轉(zhuǎn)換。...

fish 2019-08-21 10:56 評(píng)論0 收藏0
React 單文件組件的解決方案 Omil 和 Omi Snippets

摘要：屬性我們還可以使用來(lái)書(shū)寫(xiě)樣式，它會(huì)自動(dòng)幫我們編譯為格式內(nèi)容語(yǔ)法高亮建議使用配合該擴(kuò)展支持語(yǔ)法高亮擴(kuò)展開(kāi)發(fā)項(xiàng)目，當(dāng)然你可以把文件當(dāng)作對(duì)待。 Omil 是什么？ Omil是一個(gè) webpack 的 loader，它允許你以一種名為單文件組件(SFCs)的格式撰寫(xiě) Omi 組件： ${this.data.title} export default class { test(){...

lowett 2019-08-26 10:10 評(píng)論0 收藏0
webpack實(shí)戰(zhàn)

摘要：和類似的預(yù)處理器還有等。的用處非常多，包括給自動(dòng)加前綴使用下一代語(yǔ)法等，目前越來(lái)越多的人開(kāi)始用它，它很可能會(huì)成為預(yù)處理器的最終贏家。 webpack實(shí)戰(zhàn) 查看所有文檔頁(yè)面：全棧開(kāi)發(fā)，獲取更多信息。快馬加鞭，加班加點(diǎn)，終于把這個(gè)文檔整理出來(lái)了，順便深入地學(xué)習(xí)一番，鞏固知識(shí)，就是太累人，影響睡眠時(shí)間和質(zhì)量。極客就是想要把事情做到極致，開(kāi)始了就必須到達(dá)終點(diǎn)。原文鏈接：webpack實(shí)戰(zhàn)，原...

cyrils 2019-08-22 17:32 評(píng)論0 收藏0