initial

joplin notion extension/Web Development/React/next/Tips.md

@@ -0,0 +1,45 @@
+Tips
+
+- To import anything relative to src directory use `@` like following code
+Structure
+```text
+src
+	app
+		page.jsx
+	components
+		card.jsx
+```
+In `src/app/page.jsx`
+```jsx
+import Card from '@/components/card'
+
+export default function App(){
+	<>
+		<Card>Tools</Card>
+	</>
+}
+```
+In `src/components/card`
+```jsx
+export default function Card({ children }) {
+  const cardStyle = {
+    padding: "100px",
+    margin: "10px",
+    boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)",
+    border: "1px solid #ddd",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  };
+
+  return <div style={cardStyle}>{children}</div>;
+}
+
+```
+- multiple root layouts
+ https://www.youtube.com/watch?v=X9_XqeqWBR0
+ &nbsp;
+ Route grouping will be used so remove layout,jsx from root and instead use them in route group folders. Multiple layouts at same root is possible but not multiple pages so at whichever route there is page.jsx that will be considered as default route
+ Next.js App Router Multiple Root Layouts： Explained With Examples.mp4
+ https://files.catbox.moe/eiy18h.mp4
+