Package Exports

single-react-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (single-react-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

single-react-loader

中文版

write react in single file with webpack

feature

combine jsx and css in single file
support less,sass
support style scoped

example

//about.react
<script>
var About = ()=>{
  return (
    <div className='container'>
    about
    </div>
  )
}
export default About;
</script>

<style>
.container{
  color:red;
}
</style>

how to use

1.install the single-react-loader package with npm

npm install single-react-loader

2.config your webpack

For webpack 1.x

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

For webpack 2.x

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

3.write single file react,and import

import About from 'About.react'

change stylesheet lang

// app.react
<script>
...
</script>
<style lang="sass(or less)">
...
</style>

make styleSheet privatization(or scoped)

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

highlight and snippet

vscode

Place the following snippet into your settings file.

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

sublime

show

open *.react file
click view-->syntax-->open all with current extension as.. --> HTML

What next

1.support sourceMap ~~2.support style scope~~

And then i will write plugin with common editor such as sublime for code snnipets and highlight

You can contact me if you have any idea.You also can join us to help single-react stronger.