fet: oneform

OneForm.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export function OneForm({ submit }: any) {
+  return (
+    <form
+      onSubmit={(e: any) => {
+        e.preventDefault();
+        const todo = e.target.children[0].value;
+        submit(todo);
+      }}
+    >
+      <input />
+      <button>Submit</button>
+    </form>
+  );
+}

TodoItem.tsx

@@ -1,13 +1,7 @@
-import * as Rahnemaak from './rahnemaak';
-// @jsx Rahnemaak.createElement
-export class TodoItemComponent extends Rahnemaak.Component {
-  render() {
-    const { todo, toggle } = this.props;
-    const className = todo.checked ? 'checked' : '';
-    return (
-      <li className={className} onClick={() => toggle(todo)}>
-        {todo.text}
-      </li>
-    );
-  }
-}
+import * as React from 'react';
+
+export const TodoItemComponent = ({ todo, toggle }: any) => (
+  <li className={todo.checked ? 'checked' : ''} onClick={toggle}>
+    <div>{todo.text}</div>
+  </li>
+);

index.tsx

@@ -1,6 +1,9 @@
-import * as Rahnemaak from './rahnemaak';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
 import { TodoItemComponent } from './TodoItem';
-// @jsx Rahnemaak.createElement
+import { OneForm } from './OneForm';
+
 const root = document.getElementById('root');
 function removeChildren() {
   for (const child of root.children) {
@@ -19,30 +22,22 @@ interface TodoState {
   status: TodoStatus;
 }
 
-class TodoApplication {
-  state: TodoState = {
+class TodoApplication extends React.Component {
+  state = {
     todos: [{ text: 'Hamid', checked: true }],
     status: 'all'
   };
-  constructor() {
+  constructor(props) {
+    super(props);
     this.addTodo = this.addTodo.bind(this);
     this.toggleTodo = this.toggleTodo.bind(this);
   }
 
-  setState(state: Partial<TodoState>) {
-    this.state = { ...this.state, ...state };
-
-    renderApp();
-  }
-
   private setStatus(status: TodoStatus) {
-    this.setState({ status });
+    this.setState({ status: status });
   }
 
-  private addTodo(e: any) {
-    e.preventDefault();
-    const todo = e.target.children[0].value;
-
+  private addTodo(todo: string) {
     this.setState({
       todos: [...this.state.todos, { text: todo, checked: false }]
     });
@@ -71,15 +66,6 @@ class TodoApplication {
     });
   }
 
-  renderForm() {
-    return (
-      <form onSubmit={this.addTodo}>
-        <input />
-        <button>Submit</button>
-      </form>
-    );
-  }
-
   renderTodoItem(todo: TodoItem) {
     console.log('salam');
     return <TodoItemComponent todo={todo} toggle={this.toggleTodo} />;
@@ -112,21 +98,16 @@ class TodoApplication {
   render() {
     return (
       <div>
-        {this.renderForm()}
+        <OneForm submit={this.addTodo} />
         {this.renderTodoContainer()}
         {this.renderFooter()}
       </div>
     );
   }
 }
 
-const todoApp = new TodoApplication();
-
 function renderApp() {
-  const element = todoApp.render();
-  removeChildren();
-
-  Rahnemaak.render(root, element);
+  ReactDOM.render(<TodoApplication />, root);
 }
 
 renderApp();

package.json

@@ -13,6 +13,10 @@
   },
   "dependencies": {
     "@types/lodash": "^4.14.136",
-    "lodash": "^4.17.15"
+    "@types/react": "^16.8.23",
+    "@types/react-dom": "^16.8.4",
+    "lodash": "^4.17.15",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   }
 }

rahnemaak.ts

@@ -34,9 +34,14 @@ export function render(parentDom: any, element: Element) {
     element.children &&
       element.children.filter(x => x !== null).forEach(x => render(dom, x));
     parentDom.appendChild(dom);
+    return dom;
   } else {
     const type: Component = new element.type(element.props);
-    return render(parentDom, type.render());
+
+    const dom = render(parentDom, type.render());
+    type.__dom = dom;
+
+    return dom;
   }
 }
 
@@ -64,8 +69,20 @@ export function createElement(
 
 export abstract class Component {
   props: any;
+  state: any = {};
+  __dom: HTMLElement;
   constructor(props: any) {
     this.props = props;
   }
+  setState(state: any) {
+    this.state = { ...this.state, ...state };
+    const element = this.render();
+    const parent = this.__dom.parentElement;
+    for (const child of this.__dom.parentElement.children) {
+      this.__dom.parentElement.removeChild(child);
+    }
+    render(parent, element);
+  }
+
   abstract render(): Element;
 }