integrate mobx for todos

package.json

@@ -11,6 +11,8 @@
     "@types/node": "^16.7.13",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "mobx": "^6.15.0",
+    "mobx-react-lite": "^4.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-scripts": "5.0.1",

src/App.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import { TodoList } from './state';
 
 test('renders learn react link', () => {
-  render(<App />);
+  render(<App todos={new TodoList()} />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

src/App.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { observer } from 'mobx-react-lite';
+import { TodoList } from './state';
 
-function App() {
+const App = observer(({ todos }: { todos: TodoList }) => {
   return (
     <div className="App">
       <header className="App-header">
@@ -18,9 +20,19 @@ function App() {
         >
           Learn React
         </a>
+        {todos.todos.map((todo, index) => (
+          <div key={index}>
+            <input
+              type="checkbox"
+              checked={todo.done}
+              onChange={() => (todo.done = !todo.done)}
+            />
+            {todo.name}
+          </div>
+        ))}
       </header>
     </div>
   );
-}
+});
 
 export default App;

src/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { TodoList } from './state';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
@@ -9,7 +10,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <App todos={new TodoList()} />
   </React.StrictMode>
 );
 

src/state.tsx

@@ -0,0 +1,31 @@
+import { makeAutoObservable } from 'mobx';
+
+export class Todo {
+  name: string
+  done: boolean
+
+  constructor(name: string, done: boolean) {
+    this.name = name;
+    this.done = done;
+    makeAutoObservable(this);
+  }
+}
+
+export class TodoList {
+  todos: Todo[]
+
+  constructor() {
+    this.todos = [{
+      name: 'Learn MobX',
+      done: false
+    }, {
+      name: 'Learn React',
+      done: false
+    }];
+    makeAutoObservable(this);
+  }
+
+  addTodo(name: string) {
+    this.todos.push(new Todo(name, false));
+  }
+}

yarn.lock

@@ -6509,6 +6509,18 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+mobx-react-lite@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.1.1.tgz#725d74b025235f73dc2ab815766ffe010be2cf8a"
+  integrity sha512-iUxiMpsvNraCKXU+yPotsOncNNmyeS2B5DKL+TL6Tar/xm+wwNJAubJmtRSeAoYawdZqwv8Z/+5nPRHeQxTiXg==
+  dependencies:
+    use-sync-external-store "^1.4.0"
+
+mobx@^6.15.0:
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.15.0.tgz#78b9b82d383724eebb4b6e50c2eb4ae2da861cb5"
+  integrity sha512-UczzB+0nnwGotYSgllfARAqWCJ5e/skuV2K/l+Zyck/H6pJIhLXuBnz+6vn2i211o7DtbE78HQtsYEKICHGI+g==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -9138,6 +9150,11 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-sync-external-store@^1.4.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
+  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"