使用React和基于Rust编译的WebAssembly样板应用程序
使用React和基于Rust编译的WebAssembly样板应用程序
React 其它杂项
共27Star
详细介绍
A large portion of this boilerplate was built at the guidance of this article: https://prestonrichey.com/blog/react-rust-wasm/
Getting Started
Clone Repo
git clone https://github.com/robtaussig/React-WASM-boilerplate
cd React-WASM-boilerplate
Install npm dependencies
npm install
Setup Rust
This can take a while and might appear to have hung if none of the dependencies have been installed to your machine before.
npm run setup-rust
Build initial WASM files
npm run build-wasm
Link WASM files
npm run link-wasm
Start app
npm start
Writing Rust code
With the code below, wasm.greet will be available in javascript. All changes must be compiled with npm run build-wasm
before reflecting in the client.
//wasm/src/lib
#[wasm_bindgen]
extern {
fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet() {
alert("👋 from Wasm");
}
Using from Javascript
The wasm object to be used must be fetched and compiled asyncronously, and thus is not immediately available at runtime. With a basic custom hook, and using React's context API, we build the wasm object at the parent component level, and pass it down via context. It is advisable to defer rendering children until it is ready.
import React from 'react';
import { useWasm, useLoadedWasm, WASM_READY_STATE } from './useWasm';
const App = () => {
const [WasmProvider, wasmObject] = useWasm();
return (
<WasmProvider value={wasmObject}>
<div id="App">
{wasmObject.readyState === WASM_READY_STATE.READY && <TestComponent/>}
</div>
</WasmProvider>
);
};
const TestComponent = () => {
const { wasm, readyState } = useLoadedWasm();
return (
<div>
<button onClick={wasm.greet}>Click</button>
</div>
);
};
Developing
Changes to your javascript code will hot-reload your app if it's running -- otherwise they will be built at the npm start
command. Changes to your Rust code must be compiled to wasm before they are accessible to the client. This must be done manually with npm run build-wasm
.
-
15679 Star
-
17 Star
-
595 Star
-
1455 Star
-
60 Star
-
250 Star
-
261 Star
-
1 Star
-
62 Star
-
497 Star