مرحبا جميعا
اواجه مشكلة في محاولة ربط ملف 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>
