react的單文件編寫方式

single-react-loader

經過該插件，你能夠使用單文件形式編寫react組件（將jsx與style組合在一塊兒）

特性

1. 將jsx和css組合在一個文件內

2. 支持less，sass

3. 支持style樣式的私有化

例子

//about.react
<script>
var About = ()=>{
  return (
    <div className='container'>
    about
    </div>
  )
}
export default About;
</script>

<style>
.container{
  color:red;
}
</style>

如何使用

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.編寫你的單文件組件（例子上面已經寫了）,而後引入

import About from 'About.react'

如何使用css預編譯

// app.react
<script>
...
</script>
<style lang="scss(或者 less)">
...
</style>

如何設置樣式私有化

// app.react
<script>
...
</script>
<style scoped>
...
</style>

語法高亮和代碼提示

vscode

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

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

1. 打開vscode，找到用戶設置，這個文件名應該叫settings.json

2. 輸入以下代碼

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

sublime

具體操做

1. 打開*.react的文件

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

下一步計劃

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

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

若是你有任何好的想法請與我聯繫