init - book component

Author: oguzsh

app/javascript/components/Book/book.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface Props {
+  title: string;
+}
+
+const Book: React.FC<Props> = ({ title }) => <li>{title}</li>;
+
+export default Book;

app/javascript/components/Book/book_container.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Book from './book';
+
+const dummyData = {
+  books: [{ id: '1', title: 'Active Rails' }],
+};
+
+const loading = false;
+
+const Books = () => {
+  if (loading) {
+    return <span>Loading...</span>;
+  }
+
+  return (
+    <div>
+      <h1>Books</h1>
+      <ul>
+        {dummyData.books.map((book) => (
+          <Book {...book} key={book.id} />
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Books;

app/javascript/hello_react.jsx

@@ -5,10 +5,10 @@ import mount from '../mount';
 import "channels"
 
 // React Components
-import Hello from "../hello_react"
+import Books from "../components/Book/book_container"
 
 Rails.start()
 Turbolinks.start()
 ActiveStorage.start()
 
-mount({Hello})
+mount({Books})

app/javascript/packs/application.js

@@ -1,2 +1,2 @@
 <h1>Home</h1>
-<%= react_component "Hello", { name: "Test" } %>
+<%= react_component "Books" %>

app/views/home/index.html.erb

@@ -17,6 +17,7 @@
   },
   "version": "0.1.0",
   "devDependencies": {
+    "@types/react": "^17.0.39",
     "webpack-dev-server": "^3"
   }
 }

package.json

@@ -13,7 +13,8 @@
     },
     "sourceMap": true,
     "target": "es5",
-    "noEmit": true
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true
   },
   "exclude": [
     "**/*.spec.ts",