Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/developer/typescript/02_hello_world/04_component.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Create a custom Component
# Create a scene component

So far, your **Hello World system** successfully creates a sphere. However, there is a **critical issue:**

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ Structure your code effectively to make it easier to read, maintain, and collabo

Use automated formatting and linting tools to keep your code clean and consistent:

- <a href="https://prettier.io/docs/install" target="_blank">**Prettier**</a>: Automatically formats your code.
- <a href="https://www.npmjs.com/package/eslint" target="_blank">**ESLint**</a>: Analyzes your code and enforces best practices.
- <a href="https://prettier.io/docs/install" target="_blank">Prettier</a>: Automatically formats your code.
- <a href="https://www.npmjs.com/package/eslint" target="_blank">ESLint</a>: Analyzes your code and enforces best practices.

Ensure both tools are installed and enabled in your development environment.

Expand Down Expand Up @@ -170,3 +170,6 @@ export const HelloSystem = ECS.defineSystem({
})
```

## ➡️ Next steps

Now that you’ve structured your code correctly, continue learning about [Custom Components](./02_custom_component.md).
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Custom Components
# Defining components

Learn how to define custom components in iR Engine using `defineComponent()`, structure component data with `ComponentPartial`, and configure essential properties.

Expand Down Expand Up @@ -56,7 +56,9 @@ The `name` property defines a **human-readable label** for the component. This n
name: 'ir-engine.tutorial.HelloComponent'
```

📌 **Follow the naming conventions** outlined in [Coding Style and Best Practices](https://www.notion.so/styling#id-naming-convention).
:::hint{type="info"}
📌 **Follow the naming conventions** outlined in [Coding style and best practices](./01_styling_code.md).
:::

***

Expand All @@ -68,9 +70,9 @@ The `jsonID` property assigns an **internal identifier** used when **serializing
jsonID: 'IR_ENGINE_TUTORIAL_HELLO'
```

:::hint{type="info"}
📌 **Follow the required JSON naming format** outlined in [Coding Style and Best Practices](https://www.notion.so/styling#jsonid-naming-requirements).

***
:::

### 3. `onInit` (Optional, but commonly used)

Expand All @@ -82,7 +84,7 @@ onInit: () => ({ initialized: false })

This function **returns an object** that describes the component’s **runtime data structure**.

📌 **How does **`onInit`** work?**
**How does **`onInit`** work?**

The `onInit` function returns the shape of the component’s runtime data, which has the type `Schema`.

Expand Down Expand Up @@ -145,8 +147,8 @@ The following is the full interface for `ComponentPartial`, as defined in <a hre

***

## Next steps
## ➡️ Next steps

Now that you know how to define a custom component, the next step is **using queries** to find and process entities dynamically.

📌 **Continue to** Defining Queries.
📌 Continue to [Define a Query](./../02_hello_world/05_query.md).