The "Describing a View" guide introduces users to the two component models in Neo.mjs. A logical next step is a hands-on tutorial that walks them through creating their own component using the modern, functional approach.
This ticket is to create a new tutorial, "Creating a Custom Functional Button", that serves as a practical, step-by-step guide for new users.
Tasks
- Create a new tutorial file at
learn/tutorials/CreatingAFunctionalButton.md.
- The tutorial should guide the user through the following steps:
- Defining a basic functional component with
defineComponent.
- Adding reactive public configs (e.g.,
text_, iconCls_).
- Using the configs within the
createVdom method to build a dynamic VDOM.
- Implementing event handling by adding a
handler_ and an onClick method.
- Providing a complete, live-preview example that demonstrates how to use the newly created custom component within a view.
- The introduction must clarify that Neo.mjs already has a feature-rich functional button (
Neo.functional.button.Base) and that this tutorial is for educational purposes to teach the core concepts of functional component creation.
- Update
learn/tree.json to add the new tutorial to the "Tutorials" section, making it discoverable in the navigation tree.
The "Describing a View" guide introduces users to the two component models in Neo.mjs. A logical next step is a hands-on tutorial that walks them through creating their own component using the modern, functional approach.
This ticket is to create a new tutorial, "Creating a Custom Functional Button", that serves as a practical, step-by-step guide for new users.
Tasks
learn/tutorials/CreatingAFunctionalButton.md.defineComponent.text_,iconCls_).createVdommethod to build a dynamic VDOM.handler_and anonClickmethod.Neo.functional.button.Base) and that this tutorial is for educational purposes to teach the core concepts of functional component creation.learn/tree.jsonto add the new tutorial to the "Tutorials" section, making it discoverable in the navigation tree.