จำนวนคนเข้าดู: 35

React ตัวอย่างการสร้าง Read Blog data React Step-By-Step

ขั้นตอนนี้ต่อมาจาก ตัวอย่างการใช้งาน React Router https://devtai.com/?p=1503
สร้างเมนูเพิ่มจาก Navbar.jsx ตั้งชื่อเมนูว่า Blogs
แล้วสร้างไฟล์ Blogs.jsx เข้าไปใน components

ตัวอย่าง Blogs.jsx

import React from 'react'
import Content  from '../data/Content'
import { Link } from 'react-router-dom'
import './Blogs.css'
function Blogs() {
  return (
    <div className='blogs-container'>
      <article>
       {Content.map((item) => (
        <Link to={`/blog/${item.id}`} key={item.id}>
        <div className='card'>
            <h3>{item.title}</h3>
            <p>{item.content.substring(0, 250)}</p>
            <hr />
        </div>
        </Link>
        ))}
      </article>
    </div>
  )
}

export default Blogs

import React from 'react'

import Content from '../data/Content'

import { Link } from 'react-router-dom'

import './Blogs.css'

function Blogs() {

return (

{Content.map((item) => (

<h3>{item.title}</h3>

<p>{item.content.substring(0, 250)}</p>

<hr />

</div>

</Link>

))}

</article>

</div>

)

}

export default Blogs

ตัวอย่าง Blogs.css

.blogs-container {
    width: 96%;
    max-width: 1140px;
    margin: 0 auto;
}

.card {
    color: #333;
}

.blogs-container {

width: 96%;

max-width: 1140px;

margin: 0 auto;

}

.card {

color: #333;

}

หลังจากนั้นให้สร้างข้อมูล data เก็บไฟล์ Content.jsx เป็นการจำลองข้อมูลขึ้นมาไว้

ตัวอย่าง Content.jsx

const Content=[
    {
        id:1,
        title:"MacBook Air 13 : M3 chip 8C CPU/10C GPU/8GB/512GB - Midnight (2024)",
        image_url:"https://media.studio7thailand.com/129295/MacBook-Air-13-inch-M3-Midnight-1-square_medium.jpg",
        content:"ชิป M3 ทำให้ MacBook Air รุ่น 13 นิ้ว ที่พกพาง่ายสุดๆ เครื่องนี้มาพร้อมความสามารถอันยอดเยี่ยมขึ้นไปอีก ด้วยแบตเตอรี่ที่ใช้งานได้นานสูงสุด 18 ชั่วโมง คุณจึงพกพาไปที่ไหนก็ได้ แล้วยังรับมือทั้งเรื่องงานและเรื่องเล่นได้อย่างฉับไวด้วย",
        author:"studio7thailand"
    },
    {
        id:2,
        title:"MacBook Pro 14 : M3 chip 8C CPU/10C GPU/16GB/1TB - Silver (2024)",
        image_url:"https://media.studio7thailand.com/129458/MacBook-Pro-M3-Silver-1-square_medium.jpg",
        content:" MacBook Pro รุ่น 14 นิ้วพุ่งทะยานไปอีกระดับด้วยชิป M3 ซึ่งเป็นชิปสุดล้ำอันเหลือเชื่อที่พกพาความเร็วและความสามารถมาอย่างจริงจัง พร้อมแบตเตอรี่ที่ใช้งานได้นานสูงสุด 22 ชั่วโมง และจอภาพ Liquid Retina XDR อันสวยงาม ตัวเครื่องที่ทำจากอะลูมิเนียมทั้งหมดมีความทนทานเป็นเยี่ยมโดยมาในสีเทาสเปซเกรย์และสีเงิน และการอัปเดตซอฟต์แวร์ฟรียังช่วยให้อะไรต่างๆ ทำงานได้อย่างราบรื่นไปอีกนานหลายปี",
        author:"studio7thailand"
    },
    {
        id:3,
        title:"iPhone 15 Pro Max 256GB Natural Titanium",
        image_url:"https://media.studio7thailand.com/134142/STU-19-frame_label_square_medium.png",
        content:"iPhone 15 Pro Max เปลี่ยนวัสดุตัวเครื่องเป็นไทเทเนียมที่แข็งแกร่งและมีน้ำหนักเบาเกรดเดียวกับที่ใช้ในอุตสาหกรรมอวกาศ พร้อมกล้องระดับโปรที่อเนกประสงค์ยิ่งกว่าเดิม ถ่ายภาพระยะใกล้ได้คมชัดจากที่ที่ไกลกว่าเดิมด้วยกล้องเทเลโฟโต้ 5 เท่า ให้คุณได้ภาพจากระยะที่ชอบในมุมที่ใช่",
        author:"studio7thailand"
    },
    {
        id:4,
        title:"iPad Pro 11-inch Wi-Fi 128GB Space Gray 2022 (4th Gen)",
        image_url:"https://media.studio7thailand.com/81209/iPad_Pro_Wi-Fi_11_in_4th_Gen_Space_Gray_1-square_medium.jpg",
        content:" iPad Pro มาพร้อมประสิทธิภาพที่น่าทึ่ง การเชื่อมต่อแบบไร้สายที่เร็วสุดแรง และประสบการณ์การใช้งาน Apple Pencil เจเนอเรชั่นถัดไป บวกกับคุณสมบัติใหม่อันทรงพลังสำหรับประสิทธิภาพการทำงานและการทำงานร่วมกันใน iPadOS 16 นี่แหละ iPad Pro ที่สุดแห่งประสบการณ์ iPad",
        author:"studio7thailand"
    },
    {
        id:5,
        title:"Apple Watch Series 9 GPS 41mm Pink Aluminium Case with Light Pink Sport Band - S/M",
        image_url:"https://media.studio7thailand.com/134143/STU-20-frame_label_square_medium.png",
        content:"Apple Watch Series 9 ช่วยให้คุณต่อติดกับทุกเรื่อง แอ็คทีฟ มีสุขภาพดี และปลอดภัยอยู่เสมอ มาพร้อมคำสั่งนิ้วแตะสองครั้งวิธีที่มหัศจรรย์ในการโต้ตอบกับ Apple Watch จอภาพที่สว่างยิ่งขึ้น รวมไปถึง และคุณสมบัติค้นหาตำแหน่งที่ตั้งจริงสำหรับ iPhone",
        author:"studio7thailand"
    }
]
export default Content;

const Content=[

{

id:1,

title:"MacBook Air 13 : M3 chip 8C CPU/10C GPU/8GB/512GB - Midnight (2024)",

image_url:"https://media.studio7thailand.com/129295/MacBook-Air-13-inch-M3-Midnight-1-square_medium.jpg",

content:"ชิป M3 ทำให้ MacBook Air รุ่น 13 นิ้ว ที่พกพาง่ายสุดๆ เครื่องนี้มาพร้อมความสามารถอันยอดเยี่ยมขึ้นไปอีก ด้วยแบตเตอรี่ที่ใช้งานได้นานสูงสุด 18 ชั่วโมง คุณจึงพกพาไปที่ไหนก็ได้ แล้วยังรับมือทั้งเรื่องงานและเรื่องเล่นได้อย่างฉับไวด้วย",

author:"studio7thailand"

{

id:2,

title:"MacBook Pro 14 : M3 chip 8C CPU/10C GPU/16GB/1TB - Silver (2024)",

image_url:"https://media.studio7thailand.com/129458/MacBook-Pro-M3-Silver-1-square_medium.jpg",

content:" MacBook Pro รุ่น 14 นิ้วพุ่งทะยานไปอีกระดับด้วยชิป M3 ซึ่งเป็นชิปสุดล้ำอันเหลือเชื่อที่พกพาความเร็วและความสามารถมาอย่างจริงจัง พร้อมแบตเตอรี่ที่ใช้งานได้นานสูงสุด 22 ชั่วโมง และจอภาพ Liquid Retina XDR อันสวยงาม ตัวเครื่องที่ทำจากอะลูมิเนียมทั้งหมดมีความทนทานเป็นเยี่ยมโดยมาในสีเทาสเปซเกรย์และสีเงิน และการอัปเดตซอฟต์แวร์ฟรียังช่วยให้อะไรต่างๆ ทำงานได้อย่างราบรื่นไปอีกนานหลายปี",

author:"studio7thailand"

{

id:3,

title:"iPhone 15 Pro Max 256GB Natural Titanium",

image_url:"https://media.studio7thailand.com/134142/STU-19-frame_label_square_medium.png",

content:"iPhone 15 Pro Max เปลี่ยนวัสดุตัวเครื่องเป็นไทเทเนียมที่แข็งแกร่งและมีน้ำหนักเบาเกรดเดียวกับที่ใช้ในอุตสาหกรรมอวกาศ พร้อมกล้องระดับโปรที่อเนกประสงค์ยิ่งกว่าเดิม ถ่ายภาพระยะใกล้ได้คมชัดจากที่ที่ไกลกว่าเดิมด้วยกล้องเทเลโฟโต้ 5 เท่า ให้คุณได้ภาพจากระยะที่ชอบในมุมที่ใช่",

author:"studio7thailand"

{

id:4,

title:"iPad Pro 11-inch Wi-Fi 128GB Space Gray 2022 (4th Gen)",

image_url:"https://media.studio7thailand.com/81209/iPad_Pro_Wi-Fi_11_in_4th_Gen_Space_Gray_1-square_medium.jpg",

content:" iPad Pro มาพร้อมประสิทธิภาพที่น่าทึ่ง การเชื่อมต่อแบบไร้สายที่เร็วสุดแรง และประสบการณ์การใช้งาน Apple Pencil เจเนอเรชั่นถัดไป บวกกับคุณสมบัติใหม่อันทรงพลังสำหรับประสิทธิภาพการทำงานและการทำงานร่วมกันใน iPadOS 16 นี่แหละ iPad Pro ที่สุดแห่งประสบการณ์ iPad",

author:"studio7thailand"

{

id:5,

title:"Apple Watch Series 9 GPS 41mm Pink Aluminium Case with Light Pink Sport Band - S/M",

image_url:"https://media.studio7thailand.com/134143/STU-20-frame_label_square_medium.png",

content:"Apple Watch Series 9 ช่วยให้คุณต่อติดกับทุกเรื่อง แอ็คทีฟ มีสุขภาพดี และปลอดภัยอยู่เสมอ มาพร้อมคำสั่งนิ้วแตะสองครั้งวิธีที่มหัศจรรย์ในการโต้ตอบกับ Apple Watch จอภาพที่สว่างยิ่งขึ้น รวมไปถึง และคุณสมบัติค้นหาตำแหน่งที่ตั้งจริงสำหรับ iPhone",

author:"studio7thailand"

}

]

export default Content;

และขั้นตอนสุดท้าย สร้างหน้ารายละเอียดข้อมูล
ตัวอย่าง Details.jsx

import React from 'react'
import { useParams } from 'react-router-dom'
import { useState, useEffect } from 'react';
import Content from '../data/Content';
import './Details.css'
function Details() {
    const { id } = useParams();
    const [title, setTitle] = useState("");
    const [image, setImage] = useState("");
    const [content, setContent] = useState("");
    const [author, setAuthor] = useState("");

    useEffect(() => {
        const results = Content.find((item) => item.id === parseInt(id))
        setTitle(results.title)
        setImage(results.image_url)
        setContent(results.content)
        setAuthor(results.author)
    }, [id]);

    return (
        <div className='container'>
            <h2 className='blog-title'>{title}</h2>
            <div className='blog-author'>{author}</div>
            <img className='blog-imgae' src={image} alt={title} />
            <div className='blog-detail'>{content}</div>
        </div>
    )
}

export default Details

import React from 'react'

import { useParams } from 'react-router-dom'

import { useState, useEffect } from 'react';

import Content from '../data/Content';

import './Details.css'

function Details() {

const { id } = useParams();

const [title, setTitle] = useState("");

const [image, setImage] = useState("");

const [content, setContent] = useState("");

const [author, setAuthor] = useState("");

useEffect(() => {

const results = Content.find((item) => item.id === parseInt(id))

setTitle(results.title)

setImage(results.image_url)

setContent(results.content)

setAuthor(results.author)

}, [id]);

return (

<h2 className='blog-title'>{title}</h2>

<div className='blog-author'>{author}</div>

<div className='blog-detail'>{content}</div>

</div>

)

}

export default Details

ตัวอย่าง Details.css

.blog-image {
    width: 900px;
    height: 500px;
    margin: 10px auto;
}

.blog-detail {
    width: 80%;
    margin: 30px auto 10px;
}

.blog-image {

width: 900px;

height: 500px;

margin: 10px auto;

}

.blog-detail {

width: 80%;

margin: 30px auto 10px;

}

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ
ทำเว็บไซต์ รับสอนเขียนโปรแกรม
inbox มาที่เพจ หรือติดต่อ 098-373-8651

ช่องทางการชำระเงิน
เงินสด หรือ e-banking
ธนาคารกสิกรไทย
เลขบัญชี : 0951168564
ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

Blog data React

วัยวุฒิ ชุมเมืองปัก

สนใจจ้างพัฒนาระบบ เขียนระบบ ทำเว็บไซต์ รับสอนเขียนโปรแกรม inbox มาที่เพจ หรือติดต่อ 098-373-8651 ช่องทางการชำระเงิน เงินสด หรือ e-banking ธนาคารกสิกรไทย เลขบัญชี : 0951168564 ชื่อบัญชี : นายวัยวุฒิ ชุมเมืองปัก

React ตัวอย่างการสร้าง Read Blog data React Step-By-Step

Share this:

Related

วัยวุฒิ ชุมเมืองปัก