component.s
Last updated
Last updated
A react component begins than a // @flow
Why ? Flow typings will be used to check the Props and the State
A react component should import React with the following syntax
Why ? To be able o access to the flow defined properties :
The props and the state must be checked by flow
Why ? It allows to :
Check the props are valid when you use the component
Be sure to have done all checks for nullable props
Give a good updated documentation of the props
Ex :
When we open a component file, we should see elements in that orders : props and state typings, class definition, style, hoc and then the final export
Why ? The first thing you want to know when you open a component is his API. So the typing should be as first.
Then You want to know how it works and/or what it contains. So the class should be in seconds.
Styling is the last thing you want to know.
The styling of a component should be in the same file at the end
The style of a component is highlty coupled with his implementation. When you want to change the DOM, you often have to change the style and vice-versa.
If you want to use the same DOM with different styles, add a style
props on your component.
If another component need a part of your style, you have several choices :
Create a third component with that style, used by both of them
Add this part of the style in a theme
The Component should be exported as default
To not have to think of the name of the export.
The render
function should come last
To immediately know where to look for the render
function.
Instance methods should not be prefixed with _
It is common practice to add _
in front of the private methods of your components. It turns out that most component methods are private. It would mean that most of our methods would need a _
.
To not forget any _
, we simply choose to not put any.