রিয়েক্ট অ্যাপ – API থেকে ডেটা কল করা এবং দেখানো

npx create-react-app .

npm start

import React, { useEffect, useState } from "react";

function App() {
  const [posts, setPosts] = useState([]);
  const [selectedPost, setSelectedPost] = useState(null);

  // Fetch posts from API
  useEffect(() => {
    fetch("https://dummyjson.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data.posts));
  }, []);

  return (
    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
      <h1>📰 Dummy Posts</h1>

      {selectedPost ? (
        <div>
          <button onClick={() => setSelectedPost(null)}>⬅ Back</button>
          <h2>{selectedPost.title}</h2>
          <p>{selectedPost.body}</p>
        </div>
      ) : (
        <ul>
          {posts.map((post) => (
            <li
              key={post.id}
              onClick={() => setSelectedPost(post)}
              style={{
                marginBottom: "10px",
                cursor: "pointer",
                background: "#f5f5f5",
                padding: "10px",
                borderRadius: "8px",
              }}
            >
              <strong>{post.title}</strong>
              <p>{post.body.slice(0, 60)}...</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

import React, { useEffect, useState } from "react";

function App() {
..

const [posts, setPosts] = useState([]);
const [selectedPost, setSelectedPost] = useState(null);

const [posts, setPosts] = useState([]);

useEffect(() => {
  // this code runs after the component renders
});

useEffect(() => {
  // side effect code
}, [dependencies]);

 // Fetch posts from API
  useEffect(() => {
    fetch("https://dummyjson.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data.posts));
  }, []);

return (
  <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
    <h1>📰 Dummy Posts</h1>

    {selectedPost ? (
      ...
    ) : (
      ...
    )}
  </div>
);

/* App.css */

.app-container {
  padding: 20px;
  font-family: sans-serif;
  background-color: #fafafa;
  min-height: 100vh;
}

.app-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}

.post-list {
  list-style: none;
  padding: 0;
}

.post-item {
  margin-bottom: 10px;
  cursor: pointer;
  background: #f5f5f5;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.post-item:hover {
  background: #e3e3e3;
}

.back-button {
  margin-bottom: 16px;
  background-color: #1976d2;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
}

.back-button:hover {
  background-color: #125aa0;
}

.post-detail {
  max-width: 700px;
}

.post-detail h2 {
  margin-bottom: 10px;
  font-size: 24px;
}

.post-detail p {
  font-size: 16px;
  line-height: 1.6;
}

import React, { useEffect, useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);
  const [selectedPost, setSelectedPost] = useState(null);

  useEffect(() => {
    fetch("https://dummyjson.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data.posts));
  }, []);

  return (
    <div className="app-container">
      <h1 className="app-title">📰 Dummy Posts</h1>

      {selectedPost ? (
        <div className="post-detail">
          <button className="back-button" onClick={() => setSelectedPost(null)}>
            ⬅ Back
          </button>
          <h2>{selectedPost.title}</h2>
          <p>{selectedPost.body}</p>
        </div>
      ) : (
        <ul className="post-list">
          {posts.map((post) => (
            <li
              key={post.id}
              className="post-item"
              onClick={() => setSelectedPost(post)}
            >
              <strong>{post.title}</strong>
              <p>{post.body.slice(0, 60)}...</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

// src/components/PostCard.js
import React from "react";
import "../App.css";

function PostCard({ post, onSelect }) {
  return (
    <div className="post-card" onClick={() => onSelect(post)}>
      <h3 className="post-title">{post.title}</h3>
      <p className="post-snippet">{post.body.slice(0, 80)}...</p>
      <div className="post-footer">
        <span>💬 {post.reactions.likes + post.reactions.dislikes}</span>
        <span>🧑‍💻 {post.userId}</span>
      </div>
    </div>
  );
}

export default PostCard;

// src/components/PostDetailCard.js
import React from "react";
import "../App.css";

function PostDetailCard({ post, onBack }) {
  return (
    <div className="post-detail-card">
      <button className="back-button" onClick={onBack}>
        ⬅ Back
      </button>
      <h2 className="detail-title">{post.title}</h2>
      <p className="detail-body">{post.body}</p>
      <div className="detail-footer">
        <span>💬 {post.reactions.likes + post.reactions.dislikes}</span>
        <span>🧑‍💻 User: {post.userId}</span>
      </div>
    </div>
  );
}

export default PostDetailCard;

import React, { useEffect, useState } from "react";
import "./App.css";
import PostCard from "./components/PostCard";
import PostDetailCard from "./components/PostDetailCard";

function App() {
  const [posts, setPosts] = useState([]);
  const [selectedPost, setSelectedPost] = useState(null);

  useEffect(() => {
    fetch("https://dummyjson.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data.posts));
  }, []);

  return (
    <div className="app-container">
      <h1 className="app-title">📰 Dummy Posts</h1>

      {selectedPost ? (
        <PostDetailCard post={selectedPost} onBack={() => setSelectedPost(null)} />
      ) : (
        <div className="post-grid">
          {posts.map((post) => (
            <PostCard key={post.id} post={post} onSelect={setSelectedPost} />
          ))}
        </div>
      )}
    </div>
  );
}

export default App;

.app-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  font-family: sans-serif;
}

.app-title {
  text-align: center;
  margin-bottom: 30px;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.post-card {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.post-title {
  margin-bottom: 8px;
}

.post-snippet {
  color: #555;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #777;
  margin-top: 10px;
}

.post-detail-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  margin: 0 auto;
}

.back-button {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 20px;
}

.detail-footer {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #777;
  margin-top: 10px;
}