Tauri 2.0 with React Complete Integration Tutorial

# Create new Tauri + React project with TypeScript
npm create tauri-app@latest my-react-tauri-app

# Interactive prompts:
# 1. Choose package manager: npm (or yarn, pnpm)
# 2. Choose UI template: React
# 3. Choose variant: TypeScript (recommended)

# Navigate to project
cd my-react-tauri-app

# Install dependencies
npm install

# Start development server
npm run tauri dev

# What you get:
# - React 18 with TypeScript
# - Vite for fast HMR (Hot Module Replacement)
# - Tauri 2.0 with Rust backend
# - Pre-configured project structure
# - Example component with Tauri API usage

# Project structure:
# my-react-tauri-app/
# ├── src/                    # React application
# │   ├── App.tsx            # Main component
# │   ├── App.css            # Styles
# │   ├── main.tsx           # React entry point
# │   └── assets/            # Static files
# ├── src-tauri/             # Rust backend
# │   ├── src/main.rs        # Tauri commands
# │   └── tauri.conf.json    # Configuration
# ├── package.json           # Node dependencies
# ├── vite.config.ts         # Vite configuration
# └── tsconfig.json          # TypeScript config

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

// Mount React application to DOM
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// StrictMode benefits:
// - Detects unsafe lifecycle methods
// - Warns about deprecated APIs
// - Highlights potential problems
// - Double-invokes components (dev only) to detect side effects

// src/App.tsx - Main application component
import { useState } from "react";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";

function App() {
  // State management
  const [greetMsg, setGreetMsg] = useState<string>("");
  const [name, setName] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>("");

  // Call Rust backend command
  async function greet() {
    try {
      setLoading(true);
      setError("");
      
      // Invoke Rust command with parameters
      const result = await invoke<string>("greet", { name });
      
      setGreetMsg(result);
    } catch (err) {
      setError(`Error: ${err}`);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="container">
      <h1>Welcome to Tauri + React!</h1>

      <div className="row">
        <input
          id="greet-input"
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter a name..."
          disabled={loading}
        />
        <button
          type="button"
          onClick={greet}
          disabled={loading || !name.trim()}
        >
          {loading ? "Greeting..." : "Greet"}
        </button>
      </div>

      {greetMsg && (
        <p className="success">{greetMsg}</p>
      )}

      {error && (
        <p className="error">{error}</p>
      )}
    </div>
  );
}

export default App;

// Tauri API imports - organized by functionality

// Core - Command invocation
import { invoke } from "@tauri-apps/api/core";

// Window management
import { appWindow, Window } from "@tauri-apps/api/window";
import { WebviewWindow } from "@tauri-apps/api/webviewWindow";

// File system
import { readTextFile, writeTextFile, exists } from "@tauri-apps/plugin-fs";

// Dialogs
import { open, save, message, ask } from "@tauri-apps/plugin-dialog";

// Events
import { listen, emit } from "@tauri-apps/api/event";

// Path utilities
import { appDataDir, join } from "@tauri-apps/api/path";

// Shell
import { open as shellOpen } from "@tauri-apps/plugin-shell";

// Notifications
import { sendNotification } from "@tauri-apps/plugin-notification";

// Example usage in React component
import { useState, useEffect } from "react";
import { invoke } from "@tauri-apps/api/core";
import { appWindow } from "@tauri-apps/api/window";

function MyComponent() {
  const [windowTitle, setWindowTitle] = useState("");

  useEffect(() => {
    // Get window title on mount
    appWindow.title().then(setWindowTitle);

    // Listen for window resize
    const unlisten = appWindow.onResized(({ payload }) => {
      console.log("Window resized:", payload);
    });

    return () => {
      unlisten.then((fn) => fn());
    };
  }, []);

  return <h1>{windowTitle}</h1>;
}

// src/hooks/useTauriCommand.ts
import { useState, useCallback } from "react";
import { invoke } from "@tauri-apps/api/core";

interface CommandState<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

/**
 * Custom hook for invoking Tauri commands with state management
 * @param commandName - Name of the Rust command
 * @returns State and execute function
 */
export function useTauriCommand<T = unknown, P = Record<string, unknown>>(
  commandName: string
) {
  const [state, setState] = useState<CommandState<T>>({
    data: null,
    loading: false,
    error: null,
  });

  const execute = useCallback(
    async (params?: P) => {
      setState({ data: null, loading: true, error: null });

      try {
        const result = await invoke<T>(commandName, params);
        setState({ data: result, loading: false, error: null });
        return result;
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : String(err);
        setState({ data: null, loading: false, error: errorMessage });
        throw err;
      }
    },
    [commandName]
  );

  return { ...state, execute };
}

// src/hooks/useSystemInfo.ts
import { useEffect } from "react";
import { useTauriCommand } from "./useTauriCommand";

interface SystemInfo {
  os: string;
  arch: string;
  version: string;
}

/**
 * Hook to fetch system information on mount
 */
export function useSystemInfo() {
  const { data, loading, error, execute } = useTauriCommand<SystemInfo>("get_system_info");

  useEffect(() => {
    execute();
  }, [execute]);

  return { systemInfo: data, loading, error };
}

// Usage in component:
function SystemInfoDisplay() {
  const { systemInfo, loading, error } = useSystemInfo();

  if (loading) return <div>Loading system info...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!systemInfo) return null;

  return (
    <div>
      <p>OS: {systemInfo.os}</p>
      <p>Arch: {systemInfo.arch}</p>
      <p>Version: {systemInfo.version}</p>
    </div>
  );
}

// src/components/FileManager.tsx
import { useState } from "react";
import { open, save } from "@tauri-apps/plugin-dialog";
import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";

function FileManager() {
  const [content, setContent] = useState<string>("");
  const [currentFile, setCurrentFile] = useState<string | null>(null);
  const [status, setStatus] = useState<string>("");

  // Open and read file
  async function openFile() {
    try {
      // Show file picker dialog
      const selected = await open({
        multiple: false,
        filters: [{
          name: "Text Files",
          extensions: ["txt", "md", "json"]
        }]
      });

      if (selected && typeof selected === "string") {
        // Read file content
        const fileContent = await readTextFile(selected);
        setContent(fileContent);
        setCurrentFile(selected);
        setStatus(`Opened: ${selected}`);
      }
    } catch (err) {
      setStatus(`Error opening file: ${err}`);
    }
  }

  // Save current content to file
  async function saveFile() {
    try {
      let filePath = currentFile;

      // If no current file, show save dialog
      if (!filePath) {
        const selected = await save({
          filters: [{
            name: "Text Files",
            extensions: ["txt"]
          }]
        });

        if (!selected) return;
        filePath = selected;
      }

      // Write content to file
      await writeTextFile(filePath, content);
      setCurrentFile(filePath);
      setStatus(`Saved: ${filePath}`);
    } catch (err) {
      setStatus(`Error saving file: ${err}`);
    }
  }

  // Save as new file
  async function saveAsFile() {
    try {
      const selected = await save({
        defaultPath: currentFile || undefined,
        filters: [{
          name: "Text Files",
          extensions: ["txt"]
        }]
      });

      if (selected) {
        await writeTextFile(selected, content);
        setCurrentFile(selected);
        setStatus(`Saved as: ${selected}`);
      }
    } catch (err) {
      setStatus(`Error saving file: ${err}`);
    }
  }

  return (
    <div className="file-manager">
      <div className="toolbar">
        <button onClick={openFile}>Open File</button>
        <button onClick={saveFile} disabled={!content}>
          Save
        </button>
        <button onClick={saveAsFile} disabled={!content}>
          Save As
        </button>
      </div>

      {status && <div className="status">{status}</div>}

      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="File content will appear here..."
        rows={20}
        style={{ width: "100%", fontFamily: "monospace" }}
      />

      {currentFile && (
        <div className="file-info">
          Current file: {currentFile}
        </div>
      )}
    </div>
  );
}

export default FileManager;

// Install Zustand
// npm install zustand

// src/store/useAppStore.ts - Zustand store
import { create } from "zustand";
import { invoke } from "@tauri-apps/api/core";

interface AppState {
  user: User | null;
  settings: Settings;
  loading: boolean;
  error: string | null;
  
  // Actions
  login: (username: string, password: string) => Promise<void>;
  logout: () => void;
  updateSettings: (settings: Partial<Settings>) => void;
  fetchData: () => Promise<void>;
}

interface User {
  id: string;
  username: string;
  email: string;
}

interface Settings {
  theme: "light" | "dark";
  fontSize: number;
  autoSave: boolean;
}

export const useAppStore = create<AppState>((set, get) => ({
  user: null,
  settings: {
    theme: "light",
    fontSize: 14,
    autoSave: true,
  },
  loading: false,
  error: null,

  // Login action with Tauri command
  login: async (username, password) => {
    set({ loading: true, error: null });
    try {
      const user = await invoke<User>("login", { username, password });
      set({ user, loading: false });
    } catch (err) {
      set({ error: String(err), loading: false });
      throw err;
    }
  },

  // Logout action
  logout: () => {
    invoke("logout").catch(console.error);
    set({ user: null });
  },

  // Update settings (persists to Rust backend)
  updateSettings: (newSettings) => {
    const updated = { ...get().settings, ...newSettings };
    set({ settings: updated });
    invoke("save_settings", { settings: updated }).catch(console.error);
  },

  // Fetch data from backend
  fetchData: async () => {
    set({ loading: true, error: null });
    try {
      const data = await invoke("fetch_app_data");
      // Update store with fetched data
      set({ loading: false });
    } catch (err) {
      set({ error: String(err), loading: false });
    }
  },
}));

// Usage in component:
import { useAppStore } from "./store/useAppStore";

function Header() {
  const { user, logout } = useAppStore();

  return (
    <header>
      {user ? (
        <div>
          <span>Welcome, {user.username}</span>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <span>Please log in</span>
      )}
    </header>
  );
}

function SettingsPanel() {
  const { settings, updateSettings } = useAppStore();

  return (
    <div>
      <label>
        Theme:
        <select
          value={settings.theme}
          onChange={(e) => updateSettings({ theme: e.target.value as "light" | "dark" })}
        >
          <option value="light">Light</option>
          <option value="dark">Dark</option>
        </select>
      </label>
      
      <label>
        Font Size: {settings.fontSize}px
        <input
          type="range"
          min="12"
          max="24"
          value={settings.fontSize}
          onChange={(e) => updateSettings({ fontSize: Number(e.target.value) })}
        />
      </label>
    </div>
  );
}

// Install Material-UI
// npm install @mui/material @emotion/react @emotion/styled

// src/App.tsx - Using Material-UI with Tauri
import { useState } from "react";
import { invoke } from "@tauri-apps/api/core";
import {
  ThemeProvider,
  createTheme,
  CssBaseline,
  AppBar,
  Toolbar,
  Typography,
  Button,
  TextField,
  Container,
  Box,
  Alert,
} from "@mui/material";

const theme = createTheme({
  palette: {
    mode: "dark",
    primary: {
      main: "#1976d2",
    },
  },
});

function App() {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    try {
      const result = await invoke<string>("greet", { name });
      setMessage(result);
      setError("");
    } catch (err) {
      setError(String(err));
      setMessage("");
    }
  }

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6">Tauri + React + MUI</Typography>
        </Toolbar>
      </AppBar>

      <Container maxWidth="sm" sx={{ mt: 4 }}>
        <Box component="form" onSubmit={handleSubmit} sx={{ mt: 2 }}>
          <TextField
            fullWidth
            label="Enter your name"
            variant="outlined"
            value={name}
            onChange={(e) => setName(e.target.value)}
            margin="normal"
          />
          <Button
            fullWidth
            variant="contained"
            type="submit"
            sx={{ mt: 2 }}
            disabled={!name.trim()}
          >
            Greet
          </Button>
        </Box>

        {message && (
          <Alert severity="success" sx={{ mt: 2 }}>
            {message}
          </Alert>
        )}

        {error && (
          <Alert severity="error" sx={{ mt: 2 }}>
            {error}
          </Alert>
        )}
      </Container>
    </ThemeProvider>
  );
}

export default App;

// src/components/ErrorBoundary.tsx
import React, { Component, ReactNode } from "react";

interface Props {
  children: ReactNode;
  fallback?: (error: Error, resetError: () => void) => ReactNode;
}

interface State {
  hasError: boolean;
  error: Error | null;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error("Error caught by boundary:", error, errorInfo);
    // Optional: Log to Rust backend
    // invoke("log_error", { error: error.toString(), info: errorInfo });
  }

  resetError = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError && this.state.error) {
      if (this.props.fallback) {
        return this.props.fallback(this.state.error, this.resetError);
      }

      return (
        <div className="error-boundary">
          <h2>Something went wrong</h2>
          <details>
            <summary>Error details</summary>
            <pre>{this.state.error.toString()}</pre>
          </details>
          <button onClick={this.resetError}>Try again</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// Usage in App:
import ErrorBoundary from "./components/ErrorBoundary";

function App() {
  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <div style={{ padding: "20px" }}>
          <h1>Application Error</h1>
          <p>{error.message}</p>
          <button onClick={reset}>Reload Application</button>
        </div>
      )}
    >
      {/* Your app components */}
    </ErrorBoundary>
  );
}