Skip to content

Commit d1dc5f1

Browse files
HuXn-WebDevHuXn-WebDev
committed
useEffect
1 parent ffa231c commit d1dc5f1

14 files changed

+4665
-0
lines changed

‎11. useEffect/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎11. useEffect/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎11. useEffect/README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎11. useEffect/app/globals.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎11. useEffect/app/layout.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { Metadata } from 'next'
2+
import { Inter } from 'next/font/google'
3+
import './globals.css'
4+
5+
const inter = Inter({ subsets: ['latin'] })
6+
7+
export const metadata: Metadata = {
8+
title: 'Create Next App',
9+
description: 'Generated by create next app',
10+
}
11+
12+
export default function RootLayout({
13+
children,
14+
}: {
15+
children: React.ReactNode
16+
}) {
17+
return (
18+
<html lang="en">
19+
<body className={inter.className}>{children}</body>
20+
</html>
21+
)
22+
}

‎11. useEffect/app/page.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client";
2+
3+
import MyComponent from "@/components/MyComponent";
4+
5+
export default function Home() {
6+
return (
7+
<>
8+
<MyComponent />
9+
</>
10+
);
11+
}

‎11. useEffect/components/MyComponent.tsx

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { useState, useEffect } from "react";
2+
3+
type Product = {
4+
id: number;
5+
title: string;
6+
description: string;
7+
price: number;
8+
discountPercentage: number;
9+
rating: number;
10+
stock: number;
11+
brand: string;
12+
category: string;
13+
thumbnail: string;
14+
images: string[];
15+
};
16+
17+
const MyComponent = () => {
18+
// State with type annotation
19+
const [data, setData] = useState<Product | null>(null);
20+
21+
useEffect(() => {
22+
const fetchData = async () => {
23+
try {
24+
const response = await fetch("https://dummyjson.com/product/1");
25+
const result = await response.json();
26+
setData(result);
27+
} catch (error) {
28+
console.error("Error fetching data:", error);
29+
}
30+
};
31+
32+
fetchData();
33+
}, []);
34+
35+
return (
36+
<div>
37+
{data ? (
38+
<div>
39+
<p>ID: {data.id}</p>
40+
<p>Title: {data.title}</p>
41+
<p>description: {data.description}</p>
42+
<p>price: {data.price}</p>
43+
<p>discountPercentage: {data.discountPercentage}</p>
44+
<p>rating: {data.rating}</p>
45+
<p>stock: {data.stock}</p>
46+
<p>brand: {data.brand}</p>
47+
<p>category: {data.category}</p>
48+
<p>thumbnail: {data.thumbnail}</p>
49+
{data.images.map((img) => (
50+
<img src={img} />
51+
))}
52+
</div>
53+
) : (
54+
<p>Loading...</p>
55+
)}
56+
</div>
57+
);
58+
};
59+
60+
export default MyComponent;

‎11. useEffect/data.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"products": [
3+
{
4+
"id": 1,
5+
"title": "iPhone 9",
6+
"description": "An apple mobile which is nothing like apple",
7+
"price": 549,
8+
"discountPercentage": 12.96,
9+
"rating": 4.69,
10+
"stock": 94,
11+
"brand": "Apple",
12+
"category": "smartphones",
13+
"thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
14+
"images": [
15+
"https://i.dummyjson.com/data/products/1/1.jpg",
16+
"https://i.dummyjson.com/data/products/1/2.jpg",
17+
"https://i.dummyjson.com/data/products/1/3.jpg",
18+
"https://i.dummyjson.com/data/products/1/4.jpg",
19+
"https://i.dummyjson.com/data/products/1/thumbnail.jpg"
20+
]
21+
}
22+
],
23+
"total": 100,
24+
"skip": 0,
25+
"limit": 30
26+
}

‎11. useEffect/next.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {}
3+
4+
module.exports = nextConfig

0 commit comments

Comments
 (0)