single-react-loader

通过该插件，你可以使用单文件形式编写react组件（将jsx与style组合在一起）

特性

1. 将jsx和css组合在一个文件内

2. 支持less，sass

3. 支持style样式的私有化

例子

@H_403_22@//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

@H_403_22@npm install single-react-loader

2.配置你的webpack

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

3.编写你的单文件组件（例子上面已经写了）,然后引入

@H_403_22@import About from 'About.react'

如何使用css预编译

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

如何设置样式私有化

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

语法高亮和代码提示

vscode

强烈推荐前端童鞋使用vscode编写代码，功能强大还很轻量，并且支持中文。

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

1. 打开vscode，找到用户设置，这个文件名应该叫settings.json

2. 输入如下代码

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

sublime

具体操作

1. 打开*.react的文件

2. 点击view-->Syntax-->open all with current extension as.. --> HTML

下一步计划

1.支持组件样式的私有化
2.支持sourceMap

之后会编写常见编辑器的代码补全和语法高亮插件

如果你有任何好的想法请与我联系

原文链接：https://www.f2er.com/react/305581.html