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

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

search-bar.js

var React = require('react');

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

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 ponent file names
• PascalCase for the ponent function declarations.

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

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

search-bar.js

var React = require('react');

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

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 ponent file names
• PascalCase for the ponent function declarations.

• javascript
• naming-conventions
• reactjs

2 Answers 2

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 ponent names and if there is in fact a style convention for module file names hyphen delimited seems far and above the most mon.

This is widely adopted naming convention and works just fine. Also, if you are struggling with ponent's name, take a look at its root HTML element class name. I found this a great way.