зеркало из https://github.com/mozilla/gecko-dev.git
73 строки
2.5 KiB
Markdown
73 строки
2.5 KiB
Markdown
|
|
||
|
|
# 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](https://wiki.mozilla.org/DevTools/CodingStandards#React_.26_Redux)
|
||
|
|
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:
|
||
|
|
|
||
|
|
```js
|
||
|
|
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:
|
||
|
|
|
||
|
|
```js
|
||
|
|
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.
|