2.5 KiB
Guidelines for Writing React
These are soft rules for writing react devtools code. Try to stick to these for consistency, and if you disagree, file a bug to change these docs and we can talk about it.
Please also read the coding standards for react and redux code. The guidelines here are more general patterns not specific to code style.
Why no JSX?
You probably already noticed we don't use JSX. The answer isn't complicated: we don't build our JS code, and we write directly for our JS engine, SpiderMonkey. It already supports much of ES6, but it does not support JSX (which is not a standard).
This may change if we ever adopt a build step. Even so, the author is not convinced that JSX helps enough to warrant all the syntax. It is clearer sometimes, but it can be noisy switching between JSX and JS a lot.
It's not as bad as you may think! If you are used to JSX it may be an adjustment, but you won't miss it too much.
One component per file
Try to only put one component in a file. This helps avoid large files full of components, but it's also technically required for how we wrap components with factories. See the next rule.
It also makes it easier to write tests because you might not export some components, so tests can't access them.
You can include small helper components in the same file if you really
want to, but note that they won't be directly tested and you will have
to use React.createElement or immediately wrap them in factories to
use them.
Export the component directly and create factory on import
Modules are the way components interact. Ideally every component lives in a separate file and they require whatever they need. This allows tests to access all components and use module boundaries to wrap components.
For example, we don't use JSX, so we need to create factories for components to use them as functions. A simple way to do this is on import:
const Thing1 = React.createFactory(require('./thing1'));
const Thing2 = React.createFactory(require('./thing2'));
It adds a little noise, but then you can do Thing1({ ... }) instead
of React.createElement(Thing1, { ... }). Definitely worth it.
Additionally, make sure to export the component class directly:
const Thing1 = React.createClass({ ... });
module.exports = Thing1;
Do not export { Thing1 } or anything like that. This is required for
the factory wrapping as well as hot reloading.
More to Come
This is just a start. We will add more to this document.