Zenn
Open4

Tauri + React TS + Material UI 5(MUI) Tutorial

React
Rust
TypeScript
Tauri
mui
t4ai6it4ai6i

このスクラップについて

  • TAURI/React/Typescriptを使って、Material UI 5(MUI)のTutorialをしていく。
  • スクラッチから始められるようにセットアップ手順の記載を行う。

TAURIとは

Rustで書かれたGUIフレームワークで、windows/macOS/Linuxなどのマルチプラットフォームに対応

t4ai6it4ai6i

セットアップ

Rust

Install Rust

TAURI

Getting Started

> yarn create tauri-app
✔ Project name · tauri-react-ts-mui
✔ Choose your package manager · yarn
✔ Choose your UI template · react-ts
> cd tauri-react-ts-mui
> yarn
> yarn tauri dev

MUI

yarn add @mui/material @emotion/react @emotion/styled

MUI Roboto font

index.html
@@ -4,6 +4,15 @@
     <meta charset="UTF-8" />
-     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+   <link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+  />
+  <style>
+    *{
+      font-family: "Robot", sans-serif;
+    }
+  </style>
    <title>Tauri + React + TS</title>
    </head>

MUI SVG Icons

yarn add @mui/icons-material

Git

> git init .
> gibo dump macOS JetBrains Vim Windows Linux >> .gitignore
> gibo dump Node >> .gitignore
> gibo dump Rust >> .gitignore
> git add .
> git commit -m 'first commit'

ESLint

> npx eslint --init
> yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript eslint-config-react-app

Prettier

> yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks
.prettierrc.json
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}
t4ai6it4ai6i

スクラッチな状態にする

src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
-import "./style.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
src/App.tsx
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import { invoke } from "@tauri-apps/api/tauri";
-import "./App.css";
-
-function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
-
-  async function greet() {
-    setGreetMsg(await invoke("greet", { name }));
-  }
-
+const App: React.FC = () => {
   return (
-    <div className="container">
-      <h1>Welcome to Tauri!</h1>
-
-      <div className="row">
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
-        </a>
-        <a href="https://tauri.app" target="_blank">
-          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-
-      <p>
-        Click on the Tauri, Vite, and React logos to learn more about each
-        framework.
-      </p>
-
-      <div className="row">
-        <div>
-          <input
-            id="greet-input"
-            onChange={(e) => setName(e.currentTarget.value)}
-            placeholder="Enter a name..."
-          />
-          <button type="button" onClick={() => greet()}>
-            Greet
-          </button>
-        </div>
-      </div>
-      <p>{greetMsg}</p>
+    <div>
     </div>
   );
-}
+};

export default App;

Delete files

> git status
On branch main
Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	deleted:    public/tauri.svg
	deleted:    public/vite.svg
	deleted:    src/App.css
	deleted:    src/assets/react.svg
	deleted:    src/style.css