Zen Eddin Allaham

متى سيتم تحدسث مسار رياكت من create react app الى React Vite

بدي سوي موقع Movie website وبدي حط افلام في حقيقية كاملة وبدي ارفعه على Netlify و GitHub كيف يمكنني أتجنب مشاكل حقوق طبع ونشر لكن حصراً بدي احط فيديوهات حتى لو نصفها

توجد مشكلة في تسيق media query 640px لماذا تصميم يبدو ك واجهتين Portfolıo.zip

انا لدي مشكلة في فرونت اند مشكلتي انا ماعندي تصاميم اقدر احطها في مشاريعي يعني انا اذا شفت تصميم معين لاي موفع اقدر اسويه واحوله الى كود لكن بدون رؤية تصميم لا يمكنني تصميم اي مشروع وحتى اني اريد حاليا ان ابني بورتفوليو خاص بي لكن ماعندي صورة عامة عن تصميم المبتكر شو الحل برايكم

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Route, Routes } from "react-router-dom"; import BtmHeader from "./Components/BtmHeader"; import TopHeader from "./Components/TopHeader"; import React from "react"; import Home from "./Page/Home"; import Footer from "./Components/Footer"; import ProductDetails from "./Page/ProductDetails"; import Cart from "./Page/Cart"; import { Toaster } from "react-hot-toast"; import Category from "./Page/Category"; import Favorite from "./Page/Favorite"; import SearchResults from "./Page/SearchResults"; import Login from "./Page/Login"; import Register from "./Page/Register"; import Buying from "./Page/Buying"; import Blog from "./Page/Blog"; import Blog1 from "./Page/BlogsPage/Blog1"; import Blog2 from "./Page/BlogsPage/Blog2"; import Blog3 from "./Page/BlogsPage/Blog3"; import Blog4 from "./Page/BlogsPage/Blog4"; import Blog5 from "./Page/BlogsPage/Blog5"; import Blog6 from "./Page/BlogsPage/Blog6"; import Blog7 from "./Page/BlogsPage/Blog7"; import Blog8 from "./Page/BlogsPage/Blog8"; import Blog9 from "./Page/BlogsPage/Blog9"; import Blog10 from "./Page/BlogsPage/Blog10"; import Blog11 from "./Page/BlogsPage/Blog11"; import Blog12 from "./Page/BlogsPage/Blog12"; import About from "./Page/About"; import Services from "./Page/Services"; import Scroll from "./Components/Scroll"; function App() { return (_jsxs(React.Fragment, { children: [_jsx(Scroll, {}), _jsx(Toaster, { position: "bottom-right", toastOptions: { style: { background: "#fff", padding: "15px", borderRadius: "20px", }, } }), _jsxs("header", { children: [_jsx(TopHeader, {}), _jsx(BtmHeader, {})] }), _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Home, {}) }), _jsx(Route, { path: "/product/:id", element: _jsx(ProductDetails, {}) }), _jsx(Route, { path: "/cart", element: _jsx(Cart, {}) }), _jsx(Route, { path: "/category/:category", element: _jsx(Category, {}) }), _jsx(Route, { path: "/favorite", element: _jsx(Favorite, {}) }), _jsx(Route, { path: "/search", element: _jsx(SearchResults, {}) }), _jsx(Route, { path: "/login", element: _jsx(Login, {}) }), _jsx(Route, { path: "/signup", element: _jsx(Register, {}) }), _jsx(Route, { path: "/buying", element: _jsx(Buying, {}) }), _jsx(Route, { path: "/about", element: _jsx(About, {}) }), _jsx(Route, { path: "/services", element: _jsx(Services, {}) }), _jsx(Route, { path: "/blog", element: _jsx(Blog, {}) }), _jsx(Route, { path: "/blog1", element: _jsx(Blog1, {}) }), _jsx(Route, { path: "/blog2", element: _jsx(Blog2, {}) }), _jsx(Route, { path: "/blog3", element: _jsx(Blog3, {}) }), _jsx(Route, { path: "/blog4", element: _jsx(Blog4, {}) }), _jsx(Route, { path: "/blog5", element: _jsx(Blog5, {}) }), _jsx(Route, { path: "/blog6", element: _jsx(Blog6, {}) }), _jsx(Route, { path: "/blog7", element: _jsx(Blog7, {}) }), _jsx(Route, { path: "/blog8", element: _jsx(Blog8, {}) }), _jsx(Route, { path: "/blog9", element: _jsx(Blog9, {}) }), _jsx(Route, { path: "/blog10", element: _jsx(Blog10, {}) }), _jsx(Route, { path: "/blog11", element: _jsx(Blog11, {}) }), _jsx(Route, { path: "/blog12", element: _jsx(Blog12, {}) })] }), _jsx(Footer, {})] })); } export default App; // App.js import { Route, Routes } from "react-router-dom"; import BtmHeader from "./Components/BtmHeader"; import TopHeader from "./Components/TopHeader"; import React from "react"; import Home from "./Page/Home"; import Footer from "./Components/Footer"; import ProductDetails from "./Page/ProductDetails"; import Cart from "./Page/Cart"; import { Toaster } from "react-hot-toast"; import Category from "./Page/Category"; import Favorite from "./Page/Favorite"; import SearchResults from "./Page/SearchResults"; import Login from "./Page/Login"; import Register from "./Page/Register"; import Buying from "./Page/Buying"; import Blog from "./Page/Blog"; import Blog1 from "./Page/BlogsPage/Blog1"; import Blog2 from "./Page/BlogsPage/Blog2"; import Blog3 from "./Page/BlogsPage/Blog3"; import Blog4 from "./Page/BlogsPage/Blog4"; import Blog5 from "./Page/BlogsPage/Blog5"; import Blog6 from "./Page/BlogsPage/Blog6"; import Blog7 from "./Page/BlogsPage/Blog7"; import Blog8 from "./Page/BlogsPage/Blog8"; import Blog9 from "./Page/BlogsPage/Blog9"; import Blog10 from "./Page/BlogsPage/Blog10"; import Blog11 from "./Page/BlogsPage/Blog11"; import Blog12 from "./Page/BlogsPage/Blog12"; import About from "./Page/About"; import Services from "./Page/Services"; import Scroll from "./Components/Scroll"; function App() { return ( <React.Fragment> <Toaster position="bottom-right" toastOptions={{ style: { background: "#fff", padding: "15px", borderRadius: "20px", }, }} /> <header> <TopHeader /> <BtmHeader /> </header> <Scroll /> <Routes> <Route path="/" element={<Home />} /> <Route path="/product/:id" element={<ProductDetails />} /> <Route path="/cart" element={<Cart />} /> <Route path="/category/:category" element={<Category />} /> <Route path="/favorite" element={<Favorite />} /> <Route path="/search" element={<SearchResults />} /> <Route path="/login" element={<Login />} /> <Route path="/signup" element={<Register />} /> <Route path="/buying" element={<Buying />} /> <Route path="/about" element={<About />} /> <Route path="/services" element={<Services />} /> {/* Blog Pages Routes */} <Route path="/blog" element={<Blog />} /> <Route path="/blog1" element={<Blog1 />} /> <Route path="/blog2" element={<Blog2 />} /> <Route path="/blog3" element={<Blog3 />} /> <Route path="/blog4" element={<Blog4 />} /> <Route path="/blog5" element={<Blog5 />} /> <Route path="/blog6" element={<Blog6 />} /> <Route path="/blog7" element={<Blog7 />} /> <Route path="/blog8" element={<Blog8 />} /> <Route path="/blog9" element={<Blog9 />} /> <Route path="/blog10" element={<Blog10 />} /> <Route path="/blog11" element={<Blog11 />} /> <Route path="/blog12" element={<Blog12 />} /> </Routes> <Footer /> </React.Fragment> ); } export default App; //App.tsx import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; const Scroll = () => { const pathname = useLocation(); useEffect(() => { window.scrollBy({ top: 0, left: 0, behavior: 'smooth' }); }, [pathname]); return null; }; export default Scroll; // Scroll.js import { useEffect } from 'react' import { useLocation } from 'react-router-dom' const Scroll = () => { const pathname = useLocation(); useEffect(() => { window.scrollBy({ top: 0, left: 0, behavior: 'smooth' }) },[pathname]) return null; } export default Scroll // Scroll.tsx ال scroll لايعمل من مفترض عند دخول الى اي صفحة يرفع سكرول الى اعلى كي يرى صفحة وليس footer

نحليت مشكلة لكن متصفح لا يقبل اي تعديلات كيف يمكن حل ذالك يعني اي اضفة ضفتها لا يظهر

Applıcatıon فارغ ولا يوجد قيم وايضا يوجد مشكلة في كونسول

بعد تثبيت الامر tsc -b اصبح امر اسوء حيث صفحة مفضلة اصبحت صفحة بيضاء وايضاً مكون scroll لايعمل قبل رفعت مشروع لكن رجعت لتعديله اصبح متصفح لا يقبل اي تعديلات اظن مشكلة من Cashed ان كانت مشكلة كذالك كيف يمكنني حذفه لحفظ تغييرات جديدة amazon-store.zip

توجد مشكلة في صفحةFavorite.tsx حيث منتجات المفضلة لا يتم عرض الصور ومع اني متأكد اني مررت لها صور في interface وحذف تخزين محلي ورجعت حفظتو ومشكلة مستمرة amazon-store.zip

هل ISR يغني عن SSR SSG

هل يمكن شرح SSR SSG CSR SEO بشكل تفصيلي مع كود عملي لفهم ماذا يحدث وهل SSR يمكن استخدامه في فرونت اند

يعني تنصحني اتعلم Nextjs 12 في بداية قبل بعدين شوف الفرقات الاحدث

انا ما اتعلمت Next.js من خلال دورة تطوير تطبيقات JS لان الاصدار قديم هو 12

هل يوجد كورس عربي يشرح Nextjs v15 لو في ياريت تشاركوني رابط

يعني اضيف في Render في build cd server && npm i وفي start cd server && npm start