Zenn
Open1

Tauri React App

React
Tauri
t13801206t13801206

React Bootstrapでスタイリング

npm install react-bootstrap bootstrap

cssをインポートし忘れないように！

App.tsx
import { invoke } from '@tauri-apps/api/tauri'
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';

tauri.conf.jsonのbuildを変更する必要はない

Rustコマンドの戻り値をボタンに表示する

App.tsx
const RustInvoke = () => {
  const [message, setMessage] = useState('Loading...');

  new Promise(resolve => setTimeout(resolve, 5000))
    .then(() => invoke('greeting'))
    .then(res => setMessage(res as string))
    .catch(err => setMessage(err))

  return <Button variant='primary'>{message}</Button>
}

1. コマンド呼び出しが正常の場合

5秒間Loading...が表示されたあとに、Helloが表示される

ok

2. コマンド呼び出しが異常の場合

同じく5秒間Loading...が表示されたあとに、エラーメッセージそのものが表示される

ng