Merge branch 'main' of https://github.com/academind/react-complete-guide-course-resources

Author: maxschwarzmueller

attachments/18 Practice Project - Food Order/01-starting-project.zip

@@ -0,0 +1,12 @@
+export default function ClientDemo({ children }) {
+  console.log('ClientDemo rendered');
+  return (
+    <div className='client-cmp'>
+      <h2>A React Client Component</h2>
+      <p>
+        Will be rendered on the client <strong>AND</strong> the server.
+      </p>
+      {children}
+    </div>
+  );
+}

attachments/19 Redux Basics/01-starting-project.zip

@@ -0,0 +1,22 @@
+import fs from 'node:fs/promises';
+
+export default async function DataFetchingDemo() {
+  const data = await fs.readFile('dummy-db.json', 'utf-8');
+  const users = JSON.parse(data);
+
+  return (
+    <div className='rsc'>
+      <h2>RSC with Data Fetching</h2>
+      <p>
+        Uses <strong>async / await</strong> for data fetching.
+      </p>
+      <ul>
+        {users.map((user) => (
+          <li key={user.id}>
+            {user.name} ({user.title})
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

attachments/21 Routing/01-starting-project.zip

@@ -0,0 +1,14 @@
+export default async function RSCDemo() {
+  console.log('RSCDemo rendered');
+  return (
+    <div className='rsc'>
+      <h2>A React Server Component</h2>
+      <p>
+        Will <strong>ONLY</strong> be rendered on the server or at build time.
+      </p>
+      <p>
+        <strong>NEVER</strong> on the client-side!
+      </p>
+    </div>
+  );
+}

attachments/21 Routing/12-adv-starting-project.zip

@@ -0,0 +1,42 @@
+import fs from 'node:fs';
+
+export default function ServerActionsDemo() {
+  async function saveUserAction(formData) {
+    'use server';
+    const data = fs.readFileSync('dummy-db.json', 'utf-8');
+    const instructors = JSON.parse(data);
+    const newInstructor = {
+      id: new Date().getTime().toString(),
+      name: formData.get('name'),
+      title: formData.get('title'),
+    };
+
+    instructors.push(newInstructor);
+    fs.writeFileSync('dummy-db.json', JSON.stringify(instructors));
+  }
+
+  return (
+    <div className='rsc'>
+      <h2>Server Actions</h2>
+      <p>
+        A "Form Action" converted to a "Server Action" via{' '}
+        <strong>"use server"</strong>.
+      </p>
+      <p>Can be defined in a server component or a separate file.</p>
+      <p>Can be called from inside server component or client component.</p>
+      <form action={saveUserAction}>
+        <p>
+          <label htmlFor='name'>User name</label>
+          <input type='text' id='name' name='name' required />
+        </p>
+        <p>
+          <label htmlFor='title'>Title</label>
+          <input type='text' id='title' name='title' required />
+        </p>
+        <p>
+          <button>Save User</button>
+        </p>
+      </form>
+    </div>
+  );
+}