-
Notifications
You must be signed in to change notification settings - Fork 8.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Angular to React Migration: Leaf Components #10312
Comments
As part of the style guide, we should also decide whether or not to namespace functions by exporting an object, or to directly export the named functions (per @kjbekkelund's suggestion #10259 (comment)). |
Here are some other ideas explored in stacey-gammon#3:
And as noted in #10434 (review), I think we should follow the process of gradual abstraction. Let's write React views with all of the necessary logic for handling user input and deriving state encapsulated within the view, without creating new abstractions. This also means writing large |
Closing in favor of elastic/eui#500. |
Migrating leaf components
ui_framework/services
and should also be accompanied by jest tests.ui_framework/components/index.js
src/ui/public/react_components.js
src/ui/public/react_components.js
as well.src/core_plugins/kibana/public/kibana.js
includesui/react_components
, so if your code lies under there, you're all set to use it in html, just like an angular directive. If it's outside of that folder, you'll have to includesrc/ui/public/react_components.js
.Goals
Example
React Toolbar Search Box: #10821
Gotchas
props.children
:tooltip
prop cause both the react component to display a tooltip, and the angular side of the component as well.Style Guidance
Prefer
Stateless functional components
where possible.When it isn't possible, use ES6 style React Classes.
Prefer reactDirective over react-component
Don't include spaces when embedding brackets inside html.
Prefer
over
This is the opposite of our current eslint rule to use spaces (notice both examples use spaces for the destructured props. This is open for debate but I started with the latter and into an issue because react retained the spaces (can't have
#text
inside atd
).When to prefix ui_framework elements with
kui
?I'm not sure where I stand on this one. One option is to do this with the simplest elements, but once the elements get more complicated, dropping the kui prefix, but this is inconsistent and it's unclear where to draw the line. My only worry is creating long names for elements. e.g.
kui_landing_page_table
orlanding_page_table
.Action function names and prop function names
Name action functions in the form of a strong verb and passed properties in the form of on<Subject><Change>. E.g:
Avoid creating a function and passing that as a property, in render functions.
E.g. avoid:
Background: https://facebook.github.io/react/docs/handling-events.html
Prefer primitives over objects when storing in state.
E.g. prefer:
instead of:
The text was updated successfully, but these errors were encountered: