عبد النور محمد

6 سبتمبر 2021

هذا هو سير العمل الحالي الخاص بي لاستيراد الصور والأيقونات في webpack عبر ES6:

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'

<img src={doggy} />

لكن هذا سرعان ما يصبح فوضوي وأريد شئ مثل هذا

import * from './images'

<img src={doggy} />
<img src={turtle} />

هل هناك طريقة ما لاستيراد جميع الملفات ديناميكيًا من دليل معين كملحق لاسمها ، ثم استخدام هذه الملفات حسب الحاجة.

6 سبتمبر 2021

لماذا عند ارفاق src لصورة خارجية في مكون image احصل على خطا أنه لا يمكن جلب تلك الصورة

<Image
    alt=""
    src="https://images.unsplash.com/photo-1464375117522-1311d6a5b81f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2250&q=80"
    width={2250}
    height={1390}
    layout="responsive"
/>

5 سبتمبر 2021

لدي مشروع PHP حالي مع jquery و bootstrap ، ولا يستخدم أي إطار عمل للواجهة الأمامية.

أحاول استخدام أداة تجميع وحدات webpack لإنشاء نقطة دخول واحدة لموارد مشروعي ، وإدارة تبعيات js باستخدام مدير حزم العقدة js ، وتشغيل المهام على شكل تصغير js css ، وإعادة حجم الصورة ... إلخ. وتحسين وقت تحميل المتصفح المطلوب لتحميل صفحة واحدة.

صادفت برامج webpack التعليمية وحصلت على تثبيتها وتثبيتها على خادم dev الخاص بها ، ولكن المشكلة هي أنني لست قادرًا على فهم كيفية تحويل جميع نصوص js وروابط css الحالية في المشروع (حيث لدي الكثير من مكتبات jquery و CSS المستخدمة لتوفير ميزات متعددة في المشروع) لاستخدام حزمة الويب.

هل يجب علي إعادة كتابة جميع ملفات JS و CSS الخاصة بي بطريقة تناسب webpack ؟

بالإضافة إلى ذلك ، لا يمكنني تشغيل تطبيق php الحالي الخاص بي على webpack dev-server ، فهل من المفترض أن يعمل هناك في المقام الأول؟

لقد قمت بإنشاء ملف test index.js واستخدمت تكوين حزمة الويب التالية:

var path = require('path');
var webpack = require('webpack');

module.exports =
{
    entry: [
        './public/js/index.js',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080'
    ],
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.join(__dirname, "public/dist/js"),
        publicPath : "http://localhost:8080/my_proj/public/dist/js",
        filename: "bundle.js"
    }

};

<script type="text/javascript" src="public/dist/js/bundle.js"></script>
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/jquery.migrate.js"></script>
<script type="text/javascript" src="public/js/jquery.bxslider.min.js"></script>
<script type="text/javascript" src="public/js/jquery.appear.js"></script>
<script type="text/javascript" src="public/js/jquery.countTo.js"></script>
<script type="text/javascript" src="public/js/bootstrap.js"></script>

5 سبتمبر 2021

أنا أتعلم React / javascript بسرعة كبيرة وارى الجميع يتكلمون عن next و gatsby كنت أتساءل متى سيصل الناس إلى إطار عمل مثل Next.js أو Gatsby.js مقابل تطبيق Create React .

أستخدم create react كثيرا لكن هل هناك سبب في المستقبل سيحتم علي استبدال الاطار واستخدام اطار مثل gatsby او nextjs

5 سبتمبر 2021

لا أفهم سبب عدم قراءة webpack-config.js في مشروعي.

إذا ارتكبت خطأً في بناء الجملة في webpack-config.js ، فلن يظهر الخطأ حتى.

package.json:

{
  "name": "ff",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development --hot --progress --open",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "path": "^0.12.7",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

webpack-config.js:

const path = require('path');

const conf = {
    entry: './src/index.js', 
    output: {
        path: path.resolve(__dirname, './dist'), 
        filename: 'main.js', 
        publicPath: 'dist/'
    }, 
    devServer: {
        overlay:true
    }
};

module.exports = conf;

5 سبتمبر 2021

كيف يمكنني إزالة أو تحديث معلمات الاستعلام بدون تحديث الصفحة في Next JS (React)؟

المستخدم موجود على

URL / about؟ login = success & something = yes

انقر فوق الزر وإزالة

login = success & something = yes

كيف يمكنني تحقيق ذلك؟

4 سبتمبر 2021

أود استخدام قوالب html التي يقدمها webpack عبر HtmlWebpackPlugin. تبدو قوالب html كما يلي:

<!DOCTYPE html>
[...]
<body>
    <h1 class="text-red-600">Test: include HTML partial with standard lodash functionality</h1>
    <%= require('./partials/header').default %>
</body>
</html>

header.html

<h2>Header in H2 as Test</h2>

webpackconfig

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 module {
  rules: [
   {
    test: /\.html$/,
    exclude: /node_modules/,
    use: ['html-loader']
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: './src/templates/index.html',
  })
 ]
}

عند تشغيل

npm run dev

أحصل على

Cannot Get /

4 سبتمبر 2021

CSS Loader و Style Loader هما محملان webpack. لم أستطع فهم الفرق بين الاثنين. لماذا يتعين علي استخدام محملتين عندما يقوم كلاهما بنفس المهمة؟

4 سبتمبر 2021

كيف نستهدف الرابط النشط في Next.js مثل الطريقة التي نقوم بها في React-Router؟ بمعنى ، أعطي الرابط النشط class عندما يكون مساره نشطًا؟

4 سبتمبر 2021

مرحبا لدي صفحة تحتوي على form للاضافة وعند زيارتها يظهر لي الخطأ window is not defined لكنه لا يشير لشيء معين يسبب المشكلة وهذا هو مكون الصفحة

import React, { useState } from 'react';
import {
  Flex,
  Box,
  FormControl,
  FormLabel,
  Input,
  Textarea,
  Stack,
  Button,
  Heading,
  FormErrorMessage,
  useColorModeValue,
  useToast,
} from '@chakra-ui/react';
import axios from 'axios';
import { useForm } from 'react-hook-form';
import { useRouter } from 'next/router';

import {Editor} from "react-draft-wysiwyg"
import { EditorState, convertToRaw } from 'draft-js';

import draftToHtml from 'draftjs-to-html';
// import htmlToDraft from 'html-to-draftjs';
import 'node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

export default function EditorConvertToHTML() {
  const router = useRouter();
  const toast = useToast();
  const [state, setState] = useState({
    editorState: EditorState.createEmpty(),
  });

  const onEditorStateChange = (editorState) => {
    setState({
      editorState,
    });
  };

  const {
    handleSubmit,
    register,
    formState: { errors, isSubmitting },
  } = useForm();

  async function onSubmit(values, e) {
    e.preventDefault();
    console.log({
      ...values,
      content: draftToHtml(convertToRaw(state.editorState.getCurrentContent())),
    });

    try {
      const res = await axios.post(`${process.env.NEXT_PUBLIC_API}/article/add`, {
        ...values,
        content: draftToHtml(convertToRaw(state.editorState.getCurrentContent())),
      });

      router.push('/');
    } catch (error) {
      console.log(error);
      toast({
        title: 'فشل في عملية الارسال',
        status: 'error',
        duration: 9000,
        // isClosable: true,
      });
    }
  }

  //title
  //description
  //content
  //imageUrl

  return (
    <Box>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box p="4" w="50%" mb="8" bg="white">
          <FormControl id="email" isInvalid={errors.title}>
            <FormLabel>العنوان</FormLabel>
            <Input
              {...register('title', {
                required: 'هذا مطلوب',
              })}
            />
            <FormErrorMessage>{errors.title && errors.title.message}</FormErrorMessage>
          </FormControl>
          <FormControl id="email" isInvalid={errors.description}>
            <FormLabel>وصف</FormLabel>
            <Textarea
              {...register('description', {
                required: 'هذا مطلوب',
              })}
            />
            <FormErrorMessage>{errors.description && errors.description.message}</FormErrorMessage>
          </FormControl>
          <FormControl id="email" isInvalid={errors.imageUrl}>
            <FormLabel>الصورة</FormLabel>
            <Input
              {...register('imageUrl', {
                required: 'هذا مطلوب',
              })}
            />
            <FormErrorMessage>{errors.imageUrl && errors.imageUrl.message}</FormErrorMessage>
          </FormControl>
        </Box>
        <Box shadow="md" dir="ltr" w="50%" mb="8" bg="white">
          <Editor
            editorState={state.editorState}
            wrapperClassName="demo-wrapper"
            editorClassName="demo-editor"
            onEditorStateChange={onEditorStateChange}
          />
        </Box>
        <Box w="50%" bg="white">
          <Textarea
            disabled
            value={draftToHtml(convertToRaw(state.editorState.getCurrentContent()))}
          />
        </Box>
        <Button
         
          type="submit"
          isLoading={isSubmitting}
          isDisabled={isSubmitting}
          bg={'blue.400'}
          color={'white'}
          _hover={{
            bg: 'blue.500',
          }}
        >
          سجل الدخول
        </Button>
      </form>
    </Box>
  );
}

3 سبتمبر 2021

لدي ملف .env.local وفي الملف لدي المتغير البيئي

API=.......

يمكنني استخدام هذا المتغير في getServerSideProps لكن لا يمكنني استخدامه في جسد المكون

3 سبتمبر 2021

أستخدم nextjs في مشاريع صغيرة ولحد الان لم أستخدم المكون الخاص بهم للصور image والسبب هو انه لا يسمح لك بوضعه دون تحديد المقاسات width و height والمشكلة أحيانا يكون لدي صور تأتي من الخادم غير معروفة المقاسات وكنت أبحث عن حل لأنني اريد الاستفادة من مكون ال Image الخاص بهم

import Image from 'next/image'



const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

3 سبتمبر 2021

لدي صفحة index وأردت إعادة التوجيه إلى صفحة orders عندما يدخل إلى صفحة index. ما هي الطريقة الصحيحة للقيام بذلك؟ أنا أستخدم Next JS React.

import { useRouter } from 'next/router'

const Index = () => {
  const router = useRouter()
  return router.replace('/orders')
}

30 أغسطس 2021

لماذا مكون ال head لا يعرض معلومات ال meta ويرسلها أثناء server side rendering

function Book({ getBook, addBook, removeBook, auth, cart, book }) {
 .......

  return (
    <Box m={['0', '5%']}>
      {data && <Filter categories={data.bookCategories} publishers={data.publishers}></Filter>}
      <Box mt="50px">
       

        <Box>
          {!data && (
            <Box textAlign="center">
              <Spinner size="xl" />
            </Box>
          )}
          <Grid
            pr={['2%', '2%', '7%', '7%']}
            pl={['2%', '2%', '7%', '7%']}
            templateColumns={['1fr', '1fr', '0.5fr 2fr', '0.5fr 2fr']}
            gap="10px"
          >
            {data ? (
              <>
              <Head>
          			<title>{book?.title}</title>
          			<meta name="title" content={book?.title} />
          			<meta name="description" content={book?.description} />

          			<meta property="og:title" content={book?.title} />
          
          			<meta property="og:url" content={`${process.env.NEXT_PUBLIC_BASE}/book/${book?.id}`} />
          			<meta property="og:type" content="book" />
          			<meta property="og:description" content={book?.description} />
         			<meta property="og:image" content={`${process.env.NEXT_PUBLIC_STORAGE}/${book?.cover}`} />
               </Head>
              </Grid>
        </Box>
      </Box>
    </Box>
  );
}

const mapStateToProps = (state) => {
  return { cart: state.cart, auth: state.auth };
};

const mapDispatchToProps = (dispatch) => {
  return {
    getBook: (id) => dispatch(getBook(id)),
    addBook: (book) => dispatch(addBook(book)),
    removeBook: (book) => dispatch(removeBook(book)),
  };
};

export async function getServerSideProps({ params }) {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_API}/books/${params.id}`);
  return {
    props: {
      book: res.data,
    },
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Book);

30 أغسطس 2021

مرحبا قمت بأنهاء مشروع react وقمت باستضافته وكل شيء يعمل دون مشاكل باستثناء مشاركة صفحات الموقع لا تظهر معلومات الخاصة بالصفحات مثلا صفحة الكتاب الواحد لدي أضفت فيها المعلومات بمكتيه helmet

  <Helmet>
                <title>{data.title}</title>
                <meta name="title" content={data.title} />
                {/* <meta name="description" content={data.description} /> */}

                <meta property="og:title" content={data.title} />
                <meta
                  property="og:url"
                  content={`....${data.id}`}
                />
                <meta property="og:type" content="book" />
                {/* <meta property="og:description" content={data.description} /> */}
                <meta
                  property="og:image"
                  content={`${process.env.REACT_APP_STORAGE}/${data.cover}`}
                />
              </Helmet>

المشكلة ان المعلومات تظهر تظهر في ادوات المطور element لكن لا تظهر في page source وعند مشاركة الصفحة في وسائل التواصل الاجتماعي لا تظهر مغلومات ال meta فما المشكلة

16 أغسطس 2021

هذا هو رمز مجلد nextjs _app.js الخاص بي.

import "../styles/globals.css";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

function MyApp({ Component, pageProps }) {
 return <Component {...pageProps} />;
}

export default MyApp;

لدي هذا الخطأ

module.exports = require("bootstrap/dist/js/bootstrap.min.js");;

كيف يمكنني استخدام offcanvas في nexjts؟ كيف يمكنني استيراد ملف js الخاص بي؟

16 أغسطس 2021

لدي مشروع في material-ui ، nextjs. أحاول جعل شريط التنقل الخاص بي يعمل مع nextjs:

import * as React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Link from "next/link";
import {Tab, Tabs} from "@material-ui/core";

export default function NavBar() {
  return (
        <AppBar position="static">
          <Tabs>
              <Tab label="Timer"><Link href="timer" /> </Tab>
              <Tab label="Home" to="/" component={Link}  />
          </Tabs>
        </AppBar>
  );
}

لكنه يتسبب في فشل البناء. هل هناك شيء مفقود؟

16 أغسطس 2021

أنا أعمل على مشروع NextJS وأريد استخدام خطاف ويب GITHUB لنشر برنامج نصي يحتوي على إرشادات النشر.

لقد قمت بإعداد خطاف ويب للدفع في GITHUB

حاولت إضافة الكود التالي في ملف server.ts الخاص بي واختباره الآن مع ngrok

// testing
server.post("/webhooks/github", function(req, res) {
  var sender = req.body.sender;
  var branch = req.body.ref;

  if (branch.indexOf("master") > -1 && sender.login === githubUsername) {
    deploy(res);
  }
});

function deploy(res: any) {
  childProcess.exec("sh deploy.sh", function(err, stdout, stderr) {
    if (err) {
      console.error(err, stderr);
      return res.send(500);
    }
    console.log(stdout);
    res.send(200);
  });
}

هذا الملف هو ملف NODEالخاص بي لتطبيق JS التالي

لكنني أحصل على 502 في سجلات ngrok الخاصة بي

أرغب في معرفة المكان الذي يجب أن أضع فيه نقطة نهاية خطاف الويب هذا في تطبيق NextJS الخاص بي لتشغيله

15 أغسطس 2021

لقد أنشأت تطبيق next.js الأساسي باستخدام "npx create-next-app" وملف .eslintrc.json الذي تم إنشاؤه لإضافة قواعد eslint. ولكنه لا يعمل. كيف أضيف قواعد الفحص إلى nextjs

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "standard"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "React": "writable"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off"
    }
}

15 أغسطس 2021

لدي مكون يتحقق من اسم المسار ويعمل عليه:

 const router = useRouter();
  const path = router.pathname;//props.location.pathname;

  const p = path.split('/').filter((s) => s !== "")
  let submissionId = p[0] == 's' && p[1]
  const submission = useQuery(SUBMISSION, {
    variables: {
      id: submissionId
    },
    skip: submissionId === false
  })

يعمل هذا بشكل جيد في تطبيق react ولكن nextjs يعيد التوجيه إلى 404. هل هناك طريقة لإعداد نمط لـ nextjs لتجاهل المسارات غير الموجودة والسماح لرمز المكون بمعالجته؟

15 أغسطس 2021

أرغب في استخدام NextJS مع وظائف سحابة Firebase وأنا أقوم بإنشاء وظيفة سحابية:

import * as functions from 'firebase-functions';
import cors from 'cors';
import express from 'express';
import next from 'next';

const nextApp = next({ dev: false });
const handle = nextApp.getRequestHandler();

nextApp
  .prepare()
  .then(() => {
    const server = express();
    server.use(cors({ origin: true }));

    server.get('/a', (req, res) => {
      return nextApp.render(req, res, '/b', req.query);
    });

    server.get('/b', (req, res) => {
      return nextApp.render(req, res, '/a', req.query);
    });

    server.get('*', (req, res) => {
      return handle(req, res);
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

export let app = functions.https.onRequest(nextApp);

يقوم NextJS بإنشاء مجلد مع إنشاء تطبيق JS الخاص بي.

المشكلة هي أنه لا يمكنني تحميل مجلد بناء NextJS على السحابة. كيف يمكنني تضمين هذا المجلد؟

14 أغسطس 2021

أنا أبحث عن نصيحة حول كيفية بدء fastify-cli مع fastify-nextjs

لقد حاولت إضافة رمز بسيط إلى المكان المقترح ، لكنه لا يعمل.

const path = require('path');
const AutoLoad = require('fastify-autoload');

module.exports = function (fastify, opts, next) {

  fastify.register(require('fastify-nextjs')).after(() => {
    fastify.next('/hello');
  });

  fastify.register(AutoLoad, {
    dir: path.join(__dirname, 'plugins'),
    options: Object.assign({}, opts),
  });

 
  fastify.register(AutoLoad, {
    dir: path.join(__dirname, 'services'),
    options: Object.assign({}, opts),
  });
  next();
};

14 أغسطس 2021

اعمل مع NextJS ورأيت مثالاً لصفحة

class IndexPage extends Component {
  static async getInitialProps(context) {
    return {};
  }
  render() {
    return <div>hello world</div>;
  }
}
export default withRouter(IndexPage);

ما هي بالضبط طريقة getInitialProps في NextJS؟

14 أغسطس 2021

أين هو المجلد العام لمشروع nextjs؟

أعني ، هل هناك مكان ما يمكنني وضع favicon.png فيه ، أو التحقق من موقع google ، أو manifest.json ، أو robots.txt ، وما إلى ذلك؟

2 يوليو 2021

هناك تحذير يطلع معي

Warning :

componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount. Please update the following components: Container, Text, TouchableOpacity, Transitioner, View

المشروع يعمل بدون مشاكل لكن أريد اصلاح التحذير

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة عبد النور محمد