Development
March 20, 2024
•
12 min read
Building Scalable React Applications: Advanced Patterns and Best Practices
Discover advanced React patterns that will help you build maintainable and scalable applications. Learn about component composition, state management strategies, and performance optimization techniques.
Michael Rodriguez
Senior Frontend Developer
<article class="max-w-4xl mx-auto group">
<div class="flex flex-col sm:flex-row gap-6 p-6 bg-white hover:bg-gray-50 rounded-xl transition-all duration-300 border border-gray-100 hover:border-gray-200 hover:shadow-md">
<div class="sm:w-48 w-full flex-shrink-0">
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-gray-100">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=300&h=200&fit=crop" alt="Blog post thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-3 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Development</span>
<span class="text-sm text-gray-500">March 20, 2024</span>
<span class="text-sm text-gray-400">•</span>
<span class="text-sm text-gray-500">12 min read</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3 group-hover:text-violet transition-colors leading-tight">
Building Scalable React Applications: Advanced Patterns and Best Practices
</h3>
<p class="text-gray-600 mb-4 leading-relaxed">
Discover advanced React patterns that will help you build maintainable and scalable applications. Learn about component composition, state management strategies, and performance optimization techniques.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop&crop=face" alt="Author" class="w-10 h-10 rounded-full">
<div>
<p class="text-sm font-medium text-gray-900">Michael Rodriguez</p>
<p class="text-xs text-gray-500">Senior Frontend Developer</p>
</div>
</div>
<div class="flex items-center gap-4 text-sm text-gray-500">
<button class="flex items-center gap-1 hover:text-gray-700 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
24
</button>
<button class="flex items-center gap-1 hover:text-gray-700 transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
8
</button>
</div>
</div>
</div>
</div>
</article>
<template>
<article class="max-w-4xl mx-auto group">
<div class="flex flex-col sm:flex-row gap-6 p-6 bg-white hover:bg-gray-50 rounded-xl transition-all duration-300 border border-gray-100 hover:border-gray-200 hover:shadow-md">
<div class="sm:w-48 w-full flex-shrink-0">
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-gray-100">
<img :src="post.thumbnail" :alt="post.title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-3 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{{ post.category }}</span>
<span class="text-sm text-gray-500">{{ formatDate(post.publishedAt) }}</span>
<span class="text-sm text-gray-400">•</span>
<span class="text-sm text-gray-500">{{ post.readTime }} min read</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3 group-hover:text-violet transition-colors leading-tight">
{{ post.title }}
</h3>
<p class="text-gray-600 mb-4 leading-relaxed">
{{ post.excerpt }}
</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<img :src="post.author.avatar" :alt="post.author.name" class="w-10 h-10 rounded-full">
<div>
<p class="text-sm font-medium text-gray-900">{{ post.author.name }}</p>
<p class="text-xs text-gray-500">{{ post.author.role }}</p>
</div>
</div>
<div class="flex items-center gap-4 text-sm text-gray-500">
<button @click="toggleLike" class="flex items-center gap-1 hover:text-gray-700 transition-colors">
<HeartIcon class="w-4 h-4" />
{{ post.likes }}
</button>
<button class="flex items-center gap-1 hover:text-gray-700 transition-colors">
<ChatBubbleLeftIcon class="w-4 h-4" />
{{ post.comments }}
</button>
</div>
</div>
</div>
</div>
</article>
</template>
<script setup>
import { HeartIcon, ChatBubbleLeftIcon } from '@heroicons/vue/24/outline'
const props = defineProps({
post: {
type: Object,
required: true
}
})
const emit = defineEmits(['like'])
const formatDate = (date) => {
return new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
})
}
const toggleLike = () => {
emit('like', props.post.id)
}
</script>
import React from 'react'
import { HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
const BlogListItem = ({ post, onLike }) => {
const formatDate = (date) => {
return new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric'
})
}
const handleLike = () => {
if (onLike) onLike(post.id)
}
return (
<article className="max-w-4xl mx-auto group">
<div className="flex flex-col sm:flex-row gap-6 p-6 bg-white hover:bg-gray-50 rounded-xl transition-all duration-300 border border-gray-100 hover:border-gray-200 hover:shadow-md">
<div className="sm:w-48 w-full flex-shrink-0">
<div className="aspect-[4/3] rounded-lg overflow-hidden bg-gray-100">
<img src={post.thumbnail} alt={post.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
</div>
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-3">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">{post.category}</span>
<span className="text-sm text-gray-500">{formatDate(post.publishedAt)}</span>
<span className="text-sm text-gray-400">•</span>
<span className="text-sm text-gray-500">{post.readTime} min read</span>
</div>
<h3 className="text-xl font-semibold text-gray-900 mb-3 group-hover:text-violet transition-colors leading-tight">
{post.title}
</h3>
<p className="text-gray-600 mb-4 leading-relaxed">
{post.excerpt}
</p>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<img src={post.author.avatar} alt={post.author.name} className="w-10 h-10 rounded-full" />
<div>
<p className="text-sm font-medium text-gray-900">{post.author.name}</p>
<p className="text-xs text-gray-500">{post.author.role}</p>
</div>
</div>
<div className="flex items-center gap-4 text-sm text-gray-500">
<button onClick={handleLike} className="flex items-center gap-1 hover:text-gray-700 transition-colors">
<HeartIcon className="w-4 h-4" />
{post.likes}
</button>
<button className="flex items-center gap-1 hover:text-gray-700 transition-colors">
<ChatBubbleLeftIcon className="w-4 h-4" />
{post.comments}
</button>
</div>
</div>
</div>
</div>
</article>
)
}
export default BlogListItem
