initial

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

@@ -0,0 +1,252 @@
+Coding
+
+**Routes**
+- Create another folder in app folder named 'about'. In about create a file named page.jsx and type following
+  ```js
+	export default function About() {
+  return <h1>About me</h1>;
+	}
+
+	```
+- Do same with 'Profile'
+    ```js
+	export default function Profile() {
+  return <h1>Profile</h1>;
+	}
+
+	```
+
+File Structure is 
+
+```text
+src/app
+	about
+		page.jsx
+	profile
+		page.jsx
+	page.jsx
+	layout.jsx
+````
+&nbsp;
+**Nested Routes**
+
+- means more folders say (first and second in blog folder and blog in app folder)
+
+Structure
+```text
+src/app
+	blog
+		first
+			page.jsx
+		second
+			page.jsx
+	page.jsx
+	layout.jsx
+````
+ &nbsp;
+**Dynamic routes**
+- pages with custom params in url
+
+Structure
+```text
+src/app
+	products
+		[productId]
+			page.jsx
+		page.jsx
+	page.jsx
+	layout.jsx
+````
+
+`src/app/products/page.jsx`
+```js
+export default function ProductDetails() {
+  return <h1> Details about Product</h1>; 
+}
+
+```
+`src/app/products/[productId]/page.jsx`
+```jsx
+export default function ProductDetails({ params }) {
+  return <h1> Details about Product {params.productId}</h1>;
+}
+
+```
+or if its typescript then
+```tsx
+export default function ProductDetails({ params } : 
+					{params: {productId: string};
+					}) {
+  return <h1> Details about Product {params.productId}</h1>;
+}
+
+```
+
+Each function contains parameter object which has property params. This params is also object which contain property productId which is of type string
+&nbsp;
+
+**Nested Dynamic routes**
+Structure
+```text
+src/app
+	products
+		[productId]
+			reviews
+				[reviewsId]
+					page.jsx
+			page.jsx
+		page.jsx
+	page.jsx
+	layout.jsx
+````
+In `src/app/products/[productId]/reviews/[reviewId]/page.jsx`
+```jsx
+export default function ReviewDetail(prop) {
+  return (
+    <h1>
+      Review {prop.params.reviewId} about product {prop.params.productId}
+    </h1>
+  );
+}
+
+```
+Here prop will contain params, params will contain 2 fiels ie productId and reviewId and these both r strings. in `localhost:3000/products/1/reviews/2` output is
+`params:  { productId: '1', reviewId: '2' }`
+&nbsp;
+**Catching Segments**
+- Even with nested dynamic routes we may not know what type of routes or how much nesting is needed bcz page may contain dynamic links so to solve it catching such segments is required.
+Structure
+```text
+src/app
+	docs
+		[...slug]
+			page.jsx
+	page.jsx
+	layout.jsx
+````
+ In `src/app/docs/[...slug]/page.jsx` 
+ ```jsx
+export default function Slug({ params }) {
+  console.log("params: ", params);
+
+  if (params.slug.length === 1) {
+    return <h1>only 1 {params.slug[0]}</h1>;
+  } else if (params.slug.length === 2) {
+    return (
+      <h1>
+        only 2 {params.slug[0]} and {params.slug[1]}
+      </h1>
+    );
+  }
+
+  return <h1> no one :( </h1>;
+}
+
+```
+here params is object which will contain field named slug which is array of strings and contain all params after that. so if url `localhost:3000/docs/doc1/rev/rev1` then slug will be `['doc1', 'rev','rev1']`
+
+the route `[...slug]` will only be visited if there r params after docs. To make sure that `page.jsx` works too then we need to use optional catch all. to do that enclose `[...slug]` with one more square bracket like this `[[...slug]]`.  and at `localhost:3000/docs`  `no one` will be showed. 
+Optional catch all 
+ In `src/app/docs/[[...slug]]/page.jsx` 
+```jsx
+export default function Slug({ params }) {
+  console.log("params: ", params);
+
+  if (params.slug?.length === 1) {
+    return <h1>only 1 {params.slug[0]}</h1>;
+  } else if (params.slug?.length === 2) {
+    return (
+      <h1>
+        only 2 {params.slug[0]} and {params.slug[1]}
+      </h1>
+    );
+  }
+
+  return <h1>no one :(</h1>;
+}
+
+```
+&nbsp;
+
+**Custom Not-Found**
+- By default when we visit a route which is not configured then error message is displayed of nextjs default configuration. So for custom one
+ Create file named `not-found.jsx` in app folder
+ 
+ In `src/app/not-found.jsx`
+```jsx
+export default function NotFound() {
+  return (
+    <div className="">
+      <h2>Page not found</h2>
+      <p>Not able to find requested resource</p>
+    </div>
+  );
+}
+
+```
+so for unconfigured url this page will be displayed
+In dynamic routes, params can be checked using if and if edge condition for error pass then this page can be displayed
+```jsx
+// importing notFound from 'next/navigation'
+import { notFound } from "next/navigation";
+
+export default function ReviewDetail(prop) {
+  console.log("params: ", prop.params);
+
+  if (Number(prop.params.reviewId) > 1000) {
+    notFound();
+  }
+
+  return (
+    <h1>
+      Review {prop.params.reviewId} about product {prop.params.productId}
+    </h1>
+  );
+}
+
+```
+As `not-found.jsx` is in app folder so all folders under this will inherit this not-found page. So if we wanna have custom one according to folder then create `not-found.jsx` for specific folder
+So in `src/app/products/[productId]/reviews/[reviewId]/page.jsx`
+```jsx
+export default function notfoundRev() {
+  return <h1>Review not found</h1>;
+}
+
+```
+ So now this page will be displayed
+&nbsp;
+
+**File Collocation**
+- `page.jsx` is important as it acts like a index.html for html css project, main() function in java or C. So next will try to find this file inside the folder and there must be one function which must be exported as default using `export default`.
+
+In `src/app/dashboard/line-chart.jsx`
+```jsx
+export default function LineChart() {
+  return <h1>Line Chart</h1>;
+}
+```
+In `src/app/dashboard/page.jsx`
+```jsx
+import LineChart from "./line-chart";
+
+function BarChart() {
+  return <h1>Bar Chart</h1>;
+}
+
+function DashBoard() {
+  return <h1>Dashboard</h1>;
+}
+
+export default function Main() {
+  return (
+    <div className="">
+      <LineChart />
+      <BarChart />
+      <DashBoard />
+    </div>
+  );
+}
+
+```
+
+