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

具体操作

打开*.react的文件
点击view-->syntax-->open all with current extension as.. --> HTML

下一步计划

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

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

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

react的单文件编写方式相关推荐

FPGA Vivado XDC 约束文件编写方式语法笔记
参考手册: UG625:https://china.xilinx.com/support/documentation/sw_manuals/xilinx14_7/cgd.pdf UG903:https ...
004_Photoshop CS5 文件的置入、导出和单文件保存方式
文章目录一.置入文件二.导出文件三.单个图层以单个文件保存方式一.置入文件 PS 中通过 "置入" 命令可以将 AI 格式的文件置入到当前编辑的文件中(PS CS5 ...
Vue（组件化编程：非单文件组件、单文件组件）
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
DEVC++(1)单文件实现重载运算符的十六进制数类
本文运用DEVC++软件,通过C++类的定义和重载运算符来实现十六进制数类的运算操作,代码以单文件的方式来构建. 题目描述如下: 设计1~4位的无符号十六进制数据类class HEX. 可以创建如 A ...
vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)
今日份主题 Spring Boot文件上传(Form表单和Ajax方式) 在Spring Boot中,和文件上传的主要和MultipartResolver接口有关,他有两个实现类 StandardSe ...
IOS开发基础之单文件上传基础最原始的方式
IOS开发基础之单文件上传基础最原始的方式 info.plist 加入一行代码 <key>NSAppTransportSecurity</key><dict>< ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
单文件快速体验使用react输出hello_world
看了下react官方的hello world教程, 感觉对新手很不友好.codepen虽然好用, 但是封装太多东西, 看起来太抽象. 还是喜欢像学习jQuery那样, 直接在单文件中引入必要的js文 ...
java序列化表单同步请求_Ajax serialize() 表单进行序列化方式上传文件
通过传统的 form 表单提交的方式上传文件上传文件: 不过传统的 form 表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用 Ajax 的方式进行请求的. 使用 ...

react的单文件编写方式