ربط/ اضافة ملف App.js React بملف index.html.

مبتدئ بالبرمجة · 3 أغسطس 2022

مرحبا جميعا

اواجه مشكلة في محاولة ربط ملف App.js React بملف index.html.

لدي ملف App.js يحوي الدالة الرئيسية () App التي يوجد بداخلها عدة دوال اخرى. اريد ان اضع هذه الدالة الرئيسية () App بكل ما تحويه من دوال و اكواد في صفحة index.html تحت العنوان الرئيسي. بحيث يعمل الكود المبرمج في صفحة html هذه.

لقد حاولت تطبيق الطريقةالمشروحة في موقع React الرسمي من خلال مثال صغير و لكن لم ينجح الامر . هل يعلم احد منكم كيف يمكنني فعل ذلك حيث انني بحاجة ضرورية لجعل الكود يعمل في صفحة ال html.

Add React to a Website – React (reactjs.org) < https://reactjs.org/docs/add-react-to-a-website.html

محاولتي كانت من خلال المثال التالي

import React from "react";
import './App.css';
const e = React.createElement;
function App() {

  function CircleA (){
    return(
    <div style= {{
      display:"inline-flex",
      height:"12px",
      width:"12px",
      paddingBottom: "1px",
      backgroundColor:"#32cd32",
      borderRadius:"50%"}}>
        <circle
        cx="50"
        cy="55"
        r="45"
        fil="none"
        stroke="#F0CE01"
        strokeWidth="4"
        />
        </div>
    )
  }

function CircleB(){
return(
    <div style= {{
      display:'inline-flex',
      height:"12px",
      width:"12px",
      backgroundColor:"#ffd700",
      paddingBottom: "1px",
      borderRadius:"50%"}}>
        <circle
        cx="50"
        cy="55"
        r="45"
        fil="none"
        stroke="#F0CE01"
        strokeWidth="4"
        />
        </div>
    )
  }

  return e(
        <div> {CircleA(} {CircleB(}</div> 
)}
const domContainer = document.querySelector('#app_code');
const root = ReactDOM.createRoot(domContainer);
root.render(e(App));

html

<html lang="en">
  <head>
    <meta charset="UTF-8">
</head>
<body>
<h1> my React code (function App)</h1>
<div id="app_code"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="App.js"></script>
</body>
</html>

تم التعديل في 3 أغسطس 2022 بواسطة مبتدئ بالبرمجة

سامح أشرف · 3 أغسطس 2022

في البداية عليك ربط الملف App.js في ملف index.html بالشكل التالي:

<!-- بابل عبارة عن مترجم يقوم بتحويل كو JSX إلى كود جافاسكريبت ليسهل التعامل مع الأكواد -->
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<!-- يجب أن نحدد نوع ملف جافاسكريبت من خلال الخاصية type -->
<script src="App.js" type="text/babel"></script>

الآن حاول تعديل الملف App.js ليصبح بالشكل التالي:

const e = React.createElement;

function App() {

  function CircleA() {
    return (
      <div style={{
        display: "inline-flex",
        height: "12px",
        width: "12px",
        paddingBottom: "1px",
        backgroundColor: "#32cd32",
        borderRadius: "50%"
      }}>
        <svg>
            {/* العنصر circle لا يعمل في المتصفح بدون وجوده داخل svg */}

          <circle
            cx="50"
            cy="55"
            r="45"
            fil="none"
            stroke="#F0CE01"
            strokeWidth="4"
          /></svg>
      </div>
    )
  }

  function CircleB() {
    return (
      <div style={{
        display: 'inline-flex',
        height: "12px",
        width: "12px",
        backgroundColor: "#ffd700",
        paddingBottom: "1px",
        borderRadius: "50%"
      }}>
        <svg>
      {/* العنصر circle لا يعمل في المتصفح بدون وجوده داخل svg */}
          <circle
            cx="50"
            cy="55"
            r="45"
            fil="none"
            stroke="#F0CE01"
            strokeWidth="4"
          /></svg>
      </div>
    )
  }

  // نقوم بإرجاع العناصر مباشرة
  return <div> {CircleA(CircleB())}</div>
  
  // يمكن كذلك إرجاع العناصر بشكل JSX
  return <div> <CircleA><CircleB></CircleB></CircleA></div>


}

const domContainer = document.querySelector('#app_code');
const root = ReactDOM.createRoot(domContainer);
root.render(e(App));

لاحظ أننا لا نقوم بإستدعاء React في بداية الملف لأننا قمن بذلك من خلال عنصر script بالفعل في ملف index.html.

أيضًا حاول إستدعاء ملفات CSS من خلال عنصر link مباشرة ضمن ملف index.html:

<link rel="stylesheet" href="App.css">

مبتدئ بالبرمجة · 6 أغسطس 2022

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

سامح أشرف · 6 أغسطس 2022

بتاريخ 17 دقائق مضت قال مبتدئ بالبرمجة:

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

حاول التأكد من كتابة الكود بشكل صحيح، وكذلك تحقق من أنك أضفت كل المكتبات المطلوبة أولًا.

هنا شكل الكود النهائي:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1> my React code (function App)</h1>
  <div id="app_code"></div>
  
  <script src="https://unpkg.com/@babel/standalone/babel.js"></script>

  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <script type="text/babel">
    const e = React.createElement;

    function App() {

      function CircleA() {
        return (
          <div style={{
            display: "inline-flex",
            height: "12px",
            width: "12px",
            paddingBottom: "1px",
            backgroundColor: "#32cd32",
            borderRadius: "50%"
          }}>
            <svg>
              {/* العنصر circle لا يعمل في المتصفح بدون وجوده داخل svg */}

              <circle
                cx="50"
                cy="55"
                r="45"
                fil="none"
                stroke="#F0CE01"
                strokeWidth="4"
              /></svg>
          </div>
        )
      }

      function CircleB() {
        return (
          <div style={{
            display: 'inline-flex',
            height: "12px",
            width: "12px",
            backgroundColor: "#ffd700",
            paddingBottom: "1px",
            borderRadius: "50%"
          }}>
            <svg>
              {/* العنصر circle لا يعمل في المتصفح بدون وجوده داخل svg */}
              <circle
                cx="50"
                cy="55"
                r="45"
                fil="none"
                stroke="#F0CE01"
                strokeWidth="4"
              /></svg>
          </div>
        )
      }

      // نقوم بإرجاع العناصر مباشرة
      return <div> {CircleA(CircleB())}</div>

      // يمكن كذلك إرجاع العناصر بشكل JSX
      return <div> <CircleA><CircleB></CircleB></CircleA></div>


    }

    const domContainer = document.querySelector('#app_code');
    const root = ReactDOM.createRoot(domContainer);
    root.render(e(App));

  </script>
</body>

</html>

مبتدئ بالبرمجة · 7 أغسطس 2022

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

ربط/ اضافة ملف App.js React بملف index.html.

السؤال

مبتدئ بالبرمجة

4 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

مبتدئ بالبرمجة

سامح أشرف

مبتدئ بالبرمجة

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية