My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Is there such a thing as a React Single File Component?

Will Stone's photo
Will Stone
·Sep 28, 2017

Having dipped my toe into VueJS, I have fallen in love with their SFCs. Template, Script, Style now seems like such a sensible solution to all this talk of CSS-in-JS. Has there been any discussion for such a venture in React? I can imagine it wouldn't take much to make a webpack loader to translate an ComponentName.react file:

<script>
    import React from 'react'

    const ComponentName = () => {
        return (
            <div className="ComponentName"/>
        )
    }

    export default ComponentName
</script>

<style scoped>
    .ComponentName {
        display: block;
    }
</style>