نظام React البيئي والخطوات التالية

// مثال Next.js - pages/index.js export default function Home({ posts }) { return ( <div> <h1>مدونتي</h1> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p>{post.excerpt}</p> </article> ))} </div> ); } // هذا يعمل على الخادم export async function getStaticProps() { const res = await fetch('https://api.example.com/posts'); const posts = await res.json(); return { props: { posts }, revalidate: 60, // إعادة توليد الصفحة كل 60 ثانية }; } // Next.js App Router (جديد) - app/page.tsx async function getPosts() { const res = await fetch('https://api.example.com/posts'); return res.json(); } export default async function Page() { const posts = await getPosts(); return ( <div> <h1>مدونتي</h1> {posts.map(post => ( <article key={post.id}> <h2>{post.title}</h2> <p>{post.excerpt}</p> </article> ))} </div> ); }

// مثال Remix - routes/posts.$postId.tsx import { json, LoaderFunctionArgs } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; // تحميل البيانات من جانب الخادم export async function loader({ params }: LoaderFunctionArgs) { const post = await getPost(params.postId); return json({ post }); } // طفرة من جانب الخادم export async function action({ request, params }: ActionFunctionArgs) { const formData = await request.formData(); await updatePost(params.postId, { title: formData.get("title"), content: formData.get("content"), }); return redirect(`/posts/${params.postId}`); } export default function Post() { const { post } = useLoaderData<typeof loader>(); return ( <article> <h1>{post.title}</h1> <div>{post.content}</div> </article> ); }

// مثال React Native import React from 'react'; import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; export default function App() { const [count, setCount] = React.useState(0); return ( <View style={styles.container}> <Text style={styles.title}>مرحباً React Native!</Text> <Text style={styles.count}>العدد: {count}</Text> <TouchableOpacity style={styles.button} onPress={() => setCount(count + 1)} > <Text style={styles.buttonText}>زيادة</Text> </TouchableOpacity> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20, }, count: { fontSize: 18, marginBottom: 20, }, button: { backgroundColor: '#007AFF', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8, }, buttonText: { color: 'white', fontSize: 16, }, });

// 1. React Query / TanStack Query - جلب البيانات import { useQuery, useMutation, queryClient } from '@tanstack/react-query'; function Posts() { const { data, isLoading, error } = useQuery({ queryKey: ['posts'], queryFn: fetchPosts, }); const mutation = useMutation({ mutationFn: createPost, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['posts'] }); }, }); if (isLoading) return <Spinner />; if (error) return <Error message={error.message} />; return <PostList posts={data} onCreate={mutation.mutate} />; } // 2. Zustand - إدارة حالة بسيطة import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function Counter() { const { count, increment, decrement } = useStore(); return ( <div> <button onClick={decrement}>-</button> <span>{count}</span> <button onClick={increment}>+</button> </div> ); } // 3. React Hook Form - التحقق من صحة النماذج import { useForm } from 'react-hook-form'; function LoginForm() { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = (data) => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('email', { required: true, pattern: /^\S+@\S+$/i })}/> {errors.email && <span>البريد الإلكتروني الصحيح مطلوب</span>} <input type="password" {...register('password', { minLength: 8 })}/> {errors.password && <span>كلمة المرور يجب أن تكون 8+ أحرف</span>} <button type="submit">تسجيل الدخول</button> </form> ); } // 4. Framer Motion - الرسوم المتحركة import { motion } from 'framer-motion'; function AnimatedBox() { return ( <motion.div initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -50 }} transition={{ duration: 0.5 }} > مرحباً بالعالم </motion.div> ); }

// خريطة طريق رحلة React الخاصة بك const reactJourney = { immediate: [ 'ابنِ 2-3 مشاريع كاملة من الصفر', 'تعلم أساسيات TypeScript', 'أتقن حلاً واحداً لإدارة الحالة', 'قم بإعداد ملف تعريف GitHub مع مشاريعك', ], shortTerm: [ 'تعلم Next.js أو Remix', 'ادرس تحسين أداء React', 'تعلم الاختبار (Jest + React Testing Library)', 'ساهم في مشروع React مفتوح المصدر', 'ابنِ تطبيقاً متكاملاً مع تكامل API', ], mediumTerm: [ 'أتقن أنماط React المتقدمة', 'تعلم React Native لتطوير الهاتف المحمول', 'ادرس تصميم النظام والهندسة المعمارية', 'أنشئ وانشر حزمة npm', 'ابدأ مدونة تقنية أو قناة YouTube', ], longTerm: [ 'كن قائد تقني أو مهندس معماري', 'تحدث في المؤتمرات أو اللقاءات', 'ساهم بشكل كبير في مشاريع المصدر المفتوح الكبرى', 'أرشد المطورين المبتدئين', 'ابقَ في طليعة ابتكارات React', ], };