من React إلى Next.js
حتى الآن، استكشفنا كيفية البدء مع React. هذا هو شكل الكود النهائي. إذا كنت تبدأ من هنا، الصق هذا الكود في ملف index.html في محرر الأكواد الخاص بك.
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById("app")
function Header({ title }) {
return <h1>{title ? title : "Default title"}</h1>
}
function HomePage() {
const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
const [likes, setLikes] = React.useState(0)
function handleClick() {
setLikes(likes + 1)
}
return (
<div>
<Header title="Develop. Preview. Ship." />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div>
)
}
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);
</script>
</body>
</html>في الفصول القليلة الماضية، تعرفت على ثلاثة مفاهيم أساسية في React: المكونات (components)، الخصائص (props)، والحالة (state). امتلاك أساس قوي في هذه المفاهيم سيساعدك على البدء في بناء تطبيقات React.
عندما يتعلق الأمر بتعلم React، أفضل طريقة للتعلم هي البناء. يمكنك تبني React تدريجياً باستخدام <script> وما تعلمته حتى الآن لإضافة مكونات صغيرة إلى موقع ويب موجود. ومع ذلك، وجد العديد من المطورين أن تجربة المستخدم والمطور التي يوفرها React قيمة بما يكفي للغوص مباشرة وكتابة واجهة التطبيق الأمامية بالكامل باستخدام React.
من React إلى Next.js
بينما يتفوق React في بناء واجهات المستخدم، فإنه يتطلب بعض الجهد لتحويل تلك الواجهة إلى تطبيق كامل الوظائف وقابل للتوسع بشكل مستقل. هناك أيضًا ميزات جديدة في React، مثل مكونات الخادم والعميل (Server and Client Components)، التي تتطلب إطار عمل. الخبر السار هو أن Next.js يتولى الكثير من الإعداد والتكوين ويوفر ميزات إضافية لمساعدتك في بناء تطبيقات React.
التالي، سنقوم بترحيل المثال من React إلى Next.js، ونناقش كيفية عمل Next.js، ونقدم لك الفروق بين مكونات الخادم والعميل.