Dojo encourages writing simple, modular components, called components, that only fulfill a single responsibility in the high demand for applications.Components are designed to be combined and reused in a variety of scenarios and connected in a responsive manner to meet the needs of more complex web applications.

The widget uses the virtual node returned by the rendering function to describe its expected structure.Then, as the application runs, Dojo's rendering system continuously converts the content rendered at each level of the part into corresponding, efficient DOM updates.

Basic Usage

Define Parts

• Use Built-in create() Define the widget as a rendering function factory
• Returns the Virtual DOM Node , used here TSX Syntax

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>;
});

Set Part Properties

• For better reuse of parts, you need to use Typed Property Interface To abstract state , Configuration and Event Handler
• Use the create factory to provide parts middleware
• By specifying for a node key attribute To distinguish sibling elements of the same type, in this case two div elements.This allows the framework to efficiently and accurately locate related elements when the state of the application changes and DOM nodes need to be updated

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>
    );
});

Component

• Components are grouped together to form a multilayer structure to meet more complex application requirements
• Provide state s, event handlers, etc. for widgets Properties
• Use icache Middleware Manage state and invalidate or re-render affected parts when state changes

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 DOM

• Use renderer function in frame to mount parts into DOM
• You can also position the Dojo application as it appears on the page Do more control To steadily adopt smaller subcomponents or even support multiple applications or frameworks in one page

src/main.tsx

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

import NameHandler from './widgets/NameHandler';

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