diff --git a/src/Documentation/doc/index.md b/src/Documentation/doc/index.md index 44dd3009f..d8425c572 100644 --- a/src/Documentation/doc/index.md +++ b/src/Documentation/doc/index.md @@ -47,6 +47,7 @@ - [Learn to program](programming/learn.md) - [Remote API](programming/remote_api.md) - [Game frozen or stuck?](programming/game_frozen.md) +- [React](programming/react.md) - [Tools & Resources](help/tools_and_resources.md) - [Changelog](changelog.md) - [Changelog - Legacy v1](changelog-v1.md) diff --git a/src/Documentation/doc/programming/react.md b/src/Documentation/doc/programming/react.md new file mode 100644 index 000000000..6e0c36fb2 --- /dev/null +++ b/src/Documentation/doc/programming/react.md @@ -0,0 +1,29 @@ +# How to use React in game + +Since v2.7.0, Bitburner supports React and TypeScript out of the box. You can use the jsx syntax inside `.jsx` and `.tsx` files. + +## Example + +Use `ns.printRaw` and `ns.tprintRaw` to render React elements in the logs and terminal. + +```tsx +// timer.tsx +function Timer() { + const [seconds, setSeconds] = React.useState(0); + + React.useEffect(() => { + const interval = setInterval(() => { + setSeconds((seconds) => seconds + 1); + }, 1000); + return () => clearInterval(interval); + }, []); + + return
Seconds: {seconds}
; +} + +export async function main(ns: NS) { + ns.tail(); + ns.printRaw(); + await ns.asleep(10000); +} +``` diff --git a/src/Documentation/pages.ts b/src/Documentation/pages.ts index 950b0e953..6b2da82e6 100644 --- a/src/Documentation/pages.ts +++ b/src/Documentation/pages.ts @@ -59,7 +59,8 @@ import file56 from "./doc/programming/game_frozen.md?raw"; import file57 from "./doc/programming/go_algorithms.md?raw"; import file58 from "./doc/programming/hackingalgorithms.md?raw"; import file59 from "./doc/programming/learn.md?raw"; -import file60 from "./doc/programming/remote_api.md?raw"; +import file60 from "./doc/programming/react.md?raw"; +import file61 from "./doc/programming/remote_api.md?raw"; import type { Document } from "./root.ts"; @@ -124,4 +125,5 @@ AllPages["programming/game_frozen.md"] = file56; AllPages["programming/go_algorithms.md"] = file57; AllPages["programming/hackingalgorithms.md"] = file58; AllPages["programming/learn.md"] = file59; -AllPages["programming/remote_api.md"] = file60; +AllPages["programming/react.md"] = file60; +AllPages["programming/remote_api.md"] = file61;