react的单文件编写方式
发布时间:2020-12-15 08:21:47 所属栏目:百科 来源:网络整理
导读:single-react-loader 通过该插件,你可以使用单文件形式编写react组件(将jsx与style组合在一起) 特性 将jsx和css组合在一个文件内 支持less,sass 支持style样式的私有化 例子 //about.reactscriptvar About = ()={ return ( div className='container' ab
single-react-loader通过该插件,你可以使用单文件形式编写react组件(将jsx与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编写代码,功能强大还很轻量,并且支持中文。 如何使
{ "files.associations": { "*.react": "html" } } sublime
具体操作
下一步计划
之后会编写常见编辑器的代码补全和语法高亮插件 如果你有任何好的想法请与我联系 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |