correct naming specification for react components

Question

I am trying to find the best naming convention for components in a React.js app. This is how I have currently been doing it...

Imagine I have a searchBar component that I want to render in my table component.

search-bar.js

var React = require('react');

var SearchBar = React.createClass({
  /* code for search component */
});

module.exports = SearchBar;    

table.js

var React = require('react');
var SearchBar = require('search-bar');

var Table = React.createClass({
    render: function() {
        return (
                <SearchBar />
        );
    }
});
module.exports = Table;

Is this naming convention okay or is it standard?

• hyphen-delimited for component file names
• PascalCase for the component function declarations.

Answer 1

In a general sense it seems that react is young enough that there aren't yet many particularly strong style conventions, but what you've outlined is reflective of what I've seen for the most part. The react docs all PascalCase their component names and if there is in fact a style convention for module file names hyphen delimited seems far and above the most common.