Creating a Dojo components Introduction

Translation https://github.com/dojo/framework/blob/master/docs/en/creating-widgets/introduction.md

Dojo encouraged to write simple, modular components, and called component , which implements only a single duty applications in high demand. Member is designed to be combined and multiplexed in various scenarios, the response can be connected together in a manner to meet the more complex web application requirements.

Render node using the virtual member function returns the expected structure description thereof. Then, when the application is running, the Dojo rendering system will continue to render the components of each layer is converted to the corresponding content, effective DOM updated.

Features	description
Responsive design	Dojo around the core member is responsive design principles, so that a change in the state propagation time of application, can ensure predictable, consistent behavior.
Sealing member	Create separate encapsulated components that can be configured in various combinations together, to create a beautiful and sophisticated user interfaces.
DOM abstract	Framework provides the right abstraction, which means that Dojo application does not need to deal directly with the imperative DOM.
Efficient rendering	Dojo rendering system can detect the state change of the specific sub-node hierarchy member, so that when an update occurs, only the affected part of the efficient re-render application.
Enterprise	Cross-cutting application requirements, such as internationalization, localization, and style themes, you can easily add components to the user created.

Basic Usage

Defined member

• Use the built-increate() to member function is defined as a rendering factory
• Back member defines a configuration of a virtual DOM node , as used herein, TSX grammar

src/widgets/MyWidget.tsx

import { create, tsx } from '@dojo/framework/core/vdom';

const factory = create();

export default factory(function MyWidget() {
    return <div>Hello from a Dojo widget!</div>;
});

Attribute setting means

• In order to better enable the multiplexing member, use the type attribute of the interface to abstract State , configuration, and event handlers
• Use createfactory member to provide intermediate
• By specifying a node keyattribute to distinguish different types of sibling elements, in this example two divelements. So that when the application state changes, DOM node needs to be updated, the frame can be efficiently and accurately locate the relevant elements

src/widgets/Greeter.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';

const factory = create({ icache }).properties<{
    name: string;
    onNameChange?(newName: string): void;
}>();

export default factory(function Greeter({ middleware: { icache }, properties }) {
    const { name, onNameChange } = properties();
    let newName = icache.get<string>('new-name') || '';
    return (
        <div>
            <div key="appBanner">Welcome to a Dojo application!</div>
            {name && <div key="nameBanner">Hello, {name}!</div>}
            <label for="nameEntry">What's your name?</label>
            <input
                id="nameEntry"
                type="text"
                value={newName}
                oninput={(e: Event) => {
                    icache.set('new-name', (e.target as HTMLInputElement).value);
                }}
            />
            <button
                onclick={() => {
                    icache.set('new-name', undefined);
                    onNameChange && onNameChange(newName);
                }}
            >
                Set my name
            </button>
        </div>
    );
});

Combining means

• By combining member to form a multilayer structure, in order to meet the needs of more sophisticated applications
• Providing state and event handlers as the sub-component attributes (Properties)
• The use of icachemiddleware management state, and when the state change, or failure to re-render the affected parts

src / widgets / NameHandler.tsx

import { create, tsx } from '@dojo/framework/core/vdom';
import icache from '@dojo/framework/core/middleware/icache';

import Greeter from './Greeter';

const factory = create({ icache });

export default factory(function NameHandler({ middleware: { icache } }) {
    let currentName = icache.get<string>('current-name') || '';
    return (
        <Greeter
            name={currentName}
            onNameChange={(newName) => {
                icache.set('current-name', newName);
            }}
        />
    );
});

Render to the DOM

• Using the frame rendererfunction member mounted to the DOM
• It can also position Dojo application rendered on the page to do more control to steadily employ smaller sub-assemblies, and even support multiple applications or frameworks exist in a page

src/main.tsx

import renderer, { tsx } from '@dojo/framework/core/vdom';

import NameHandler from './widgets/NameHandler';

const r = renderer(() => <NameHandler />);
r.mount();