React JS https://react.dev/learn/start-a-new-react-project npx create-next-app@latest npx create-react-app@latest {project name} Create Project C:\react-js>npx create-react-app@latest my-app Run C:\react-js\my-app> npm start Install tailwindcss https://tailwindcss.com/docs/guides/create-react-app npm install -D tailwindcss npx tailwindcss init Install react-router-dom https://www.npmjs.com/package/react-router-dom Install axios src\App.js
//src\App.js
import { BrowserRouter, Routes, Route } from "react-router-dom"; //npm i react-router-dom https://www.npmjs.com/package/react-router-dom
import Home from "./elements/Home";
import ViewPage from "./elements/ViewPage";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/posts/:slug" element={<ViewPage />} />
</Routes>
</BrowserRouter>
);
}
export default App;
src\elements\Home.js
//src\elements\Home.js
import React from 'react';
import Posts from './Posts'
import { Suspense } from "react";
import { IoSearch } from "react-icons/io5"; //https://www.npmjs.com/package/react-icons npm install react-icons --save
function Home() {
return (
<div className="w-screen py-20 flex justify-center flex-col items-center">
<div className="flex items-center justify-between gap-1 mb-5">
<h1 className="text-4xl font-bold">React.js + WordPress Load Posts with Featured Image and View Single Page | Tailwind CSS</h1>
</div>
<div className="overflow-x-auto py-10">
<div className="mb-2 w-full text-right">
<div className="relative flex flex-1">
<input
type="text"
className="w-full border border-gray-200 py-2 pl-10 text-sm outline-2 rounded-sm"
placeholder="Search..."
/>
<IoSearch className="absolute left-3 top-2 h-5 w-5 text-gray-500" />
</div>
</div>
<Suspense fallback="Loading...">
<Posts/>
</Suspense>
</div>
</div>
)
}
export default Home
src\elements\Posts.js
//src\elements\Posts.js
import React, { useEffect, useState } from 'react';
export default function Posts() {
const [posts, setPosts] = useState([]);
useEffect(() => {
async function loadPosts() {
const response = await fetch('http://localhost:8888/cairocoders/wp-json/wp/v2/posts?_embed');
if(!response.ok) {
// oups! something went wrong
return;
}
const posts = await response.json();
setPosts(posts);
}
loadPosts();
}, [])
return (
<div className="grid md:grid-cols-3 gap-5 mt-10">
{posts.map((post, index) => (
<div key={index} className="max-w-sm border border-gray-200 rounded-md shadow">
<div className="relative aspect-video">
<img src={post._embedded["wp:featuredmedia"][0].media_details.sizes.full.source_url}
alt={post.title.rendered}
fill
priority
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
className="rounded-t-md object-cover"/>
</div>
<div className="p-5">
<h1>
<a
href={`/posts/${post.slug}`}>
{post.title.rendered}
</a>
</h1>
</div>
</div>
))}
</div>
);
}
src\elements\ViewPage.js
//src\elements\ViewPage.js
import React from 'react';
import { useEffect, useState } from 'react';
import { useParams } from "react-router-dom";
export default function Posts() {
const {slug}=useParams();
const [posts, setData] = useState(null);
useEffect(()=>{
fetchPost();
},[slug]);
const fetchPost=async()=>{
try{
const response = await fetch("http://localhost:8888/cairocoders/wp-json/wp/v2/posts?_embed&slug="+slug);
if(!response.ok) {
// oups! something went wrong
return;
}
const posts = await response.json();
//console.log(posts);
setData(posts);
}catch(err){
console.log("Something Wrong");
}
}
return (
<div className="min-h-screen flex items-center justify-center bg-slate-100">
<div className="bg-white rounded-sm shadow p-8">
{posts && posts.map((post, index) => (
<div key={index}>
<h1 className="text-2xl font-bold mb-5">{post.title.rendered}</h1>
<div className="mb-4">
<div
dangerouslySetInnerHTML={{ __html: post['content']['rendered'] }}
/>
</div>
</div>
))}
</div>
</div>
);
}
themes\cairocoders\functions.php
//themes\cairocoders\functions.php
<?php
/**
* Theme functions and definitions
*
* @package cairocoders
*/
add_action('rest_api_init', 'register_rest_images' );
function register_rest_images(){
register_rest_field( array('post'),
'fimg_url',
array(
'get_callback' => 'get_rest_featured_image',
'update_callback' => null,
'schema' => null,
)
);
}
function get_rest_featured_image( $object, $field_name, $request ) {
if( $object['featured_media'] ){
$img = wp_get_attachment_image_src( $object['featured_media'], 'app-thumb' );
return $img[0];
}
return false;
}
Run C:\react-j\my-app>npm start http://localhost:3000/
