react的單文件編寫方式

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

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

single-react-loader

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

特性

將jsx和css組合在一個文件內(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.編寫你的單文件組件（例子上面已經(jīng)寫了）,然后引入

import About from "About.react"

如何使用css預編譯

// app.react

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

// app.react

語法高亮和代碼提示 vscode

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

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

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

輸入如下代碼

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

sublime

具體操作

打開*.react的文件

點擊view-->syntax-->open all with current extension as.. --> HTML

下一步計劃

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

之后會編寫常見編輯器的代碼補全和語法高亮插件

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87989.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

cyrils 2019-08-22 17:32 評論0 收藏0