脚本宝典收集整理的这篇文章主要介绍了react的单文件编写方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
single-react-loader
通过该插件,你可以使用单文件形式编写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'
}
]
}
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下有语法高亮代码提示功能呢
打开vscode,找到用户设置,这个文件名应该叫settings.json
输入如下代码
{
"files.associations": {
"*.react": "htML"
}
}
sublime
具体操作
下一步计划
1.支持组件样式的私有化
2.支持sourceMap
之后会编写常见编辑器的代码补全和语法高亮插件
如果你有任何好的想法请与我联系
以上是脚本宝典为你收集整理的react的单文件编写方式全部内容,希望文章能够帮你解决react的单文件编写方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。