通过该插件,你可以使用单文件形式编写react组件(将jsx与style组合在一起)
- 将jsx和css组合在一个文件内
- 支持less,sass
- 支持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'
}
]
}
//webpack.config.js
module: {
rules: [
{
test: /\.react$/,
exclude: /node_modules/,
loader: 'single-react-loader'
}
]
}
3.编写你的单文件组件(例子上面已经写了),然后引入
import About from 'About.react'
// app.react
<script>
...
</script>
<style lang="sass(或者 less)">
...
</style>
// app.react
<script>
...
</script>
<style scoped>
...
</style>
强烈推荐前端童鞋使用vscode编写代码,功能强大还很轻量,并且支持中文。
如何使.react
文件在vscode下有语法高亮代码提示功能呢
- 打开vscode,找到用户设置,这个文件名应该叫
settings.json
- 输入如下代码
{
"files.associations": {
"*.react": "html"
}
}
具体操作
- 打开
*.react
的文件 - 点击view-->syntax-->open all with current extension as.. --> HTML
1.支持组件样式的私有化
2.支持sourceMap
之后会编写常见编辑器的代码补全和语法高亮插件
如果你有任何好的想法请与我联系