كان React JS أحد أكثر أطر التطوير شيوعا لعدة سنوات حتى الآن. هناك أكثر من 150,000 مستودع React على GitHub وحده. إنه يتفوق بانتظام على أطر التطوير الشائعة الأخرى مثل Vue JS أو Angular.
React هي واحدة من أسرع وأسهل الطرق لإنشاء تصميمات وتطبيقات ويب سريعة الاستجابة دون الحاجة إلى القيام بالكثير من الترميز. لقد أطلق عليه "مستقبل تطوير الويب" ، وهذا لا يبدو ممتدا كثيرا. يصبح React JS أكثر شعبية مع مرور كل عام.
اليوم ، سوف نوضح لك كيفية تعلم React JS في غضون دقائق.
يعني بناء الأصول الرقمية باستخدام React JS أن مواقع الويب والتطبيقات الخاصة بك ستبدو معاصرة وحديثة. تم إنشاء Instagram بالكامل باستخدام مكتبة JavaScript ، على سبيل المثال. وكذلك دروببوإكس.
إذا كنت تبحث عن أفضل برنامج تعليمي لتعلم React JS ، فلا مزيد من البحث! سنقوم بإعدادك وتشغيله في أقل من أي وقت من الأوقات ، لذا يمكنك تجربة React JS بنفسك!
كيف تتعلم رد فعل JS: الشروع في العمل
إذا كنت قد بدأت في تعلم React JS ، فسنفترض أن لديك بعض الإلمام بالبرمجة والتطوير. إذا لم يكن كذلك ، فلا بأس بذلك أيضا. React JS قريب من التوصيل والتشغيل كما يمكن أن تكون مكتبة جافا سكريبت.
لتحقيق أقصى استفادة من هذا البرنامج التعليمي React JS ، ستحتاج إلى:
- فهم أساسي ل HTML و CSS
- فهم أساسي لجافا سكريبت
- الإلمام جافا سكريبت ES6
في هذا البرنامج التعليمي React JS ، ستتعلم كيفية إنشاء تطبيق React JS أساسي. سنستعرض كل خطوة بمشط ذو أسنان دقيقة ، لذا إذا كنت جديدا في تعلم React JS ، فلا داعي للخوف. ستكون جاهزا للبرمجة في أي وقت من الأوقات.
سنستعرض أيضا بعض المبادئ الأساسية لتعلم React JS. بحلول الوقت الذي تصل فيه إلى النهاية ، لن تعرف فقط كيفية استخدام React JS ولكن أيضا سبب نجاحه.
هناك أيضا مستودع GitHub يتماشى مع هذا البرنامج التعليمي في حالة رغبتك في رؤية النتيجة النهائية أو لديك فرصة للتحقق من عملك.
ما هو رد فعل؟
نظرا لأن هذا يهدف إلى أن يكون برنامجا تعليميا لتعلم React JS للمبتدئين ، فسنبدأ بالأساسيات. ما هو رد الفعل بالضبط؟
React JS هي مكتبة للغة برمجة جافا سكريبت. يتم استخدامه بشكل أساسي لإنشاء واجهات المستخدم بسرعة وسهولة. تم إنشاؤه بواسطة Facebook في عام 2011 للسماح للمطورين بإنشاء واجهات مستخدم معقدة باستخدام مقتطفات أصغر قابلة لإعادة الاستخدام من التعليمات البرمجية.
على عكس بعض الأطر الأخرى ، يمكن أن يتطلب React JS أحيانا مكتبات إضافية لتعمل بشكل صحيح.
بالنظر إلى كيفية عمل React من خلال توصيل مكونات أصغر قابلة لإعادة الاستخدام ، فإنه يشبه كيفية عمل الخدمات المصغرة. إذا كنت معتادا بالفعل على الخدمات المصغرة ، فلن تواجه مشكلة في تشغيل React وتشغيله. إذا لم تكن كذلك، فسيكون لديك فهم أفضل بكثير للخدمات المصغرة والحاويات بحلول الوقت الذي تنتهي فيه من هذا البرنامج التعليمي.
تهيئة البيئة
هناك العديد من الطرق التي يمكنك من خلالها إعداد البيئة للعمل مع React. في هذا البرنامج التعليمي ، سنستخدم ببساطة سطر الأوامر.
للبدء ، ابدأ بفتح المحطة. انتقل إلى مجلد البرمجة الخاص بك. قم بإنشاء دليل يسمى "رد فعل - تودوس - البرنامج التعليمي". هناك أمر يقوم تلقائيا بإنشاء تطبيق React سننظر إليه بعد قليل. في غضون ذلك ، سنوضح لك كيفية البدء في استخدام HTML الأساسي.
كتابة تطبيق React باستخدام HTML
للبدء ، ستقوم بإنشاء مستند HTML مجردة باستخدام محرر النصوص الذي تختاره. سنستخدم Notepad ++ لأنه يسمح لك بحفظ الملفات بأي تنسيق تريده.
أدخل ما يلي:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>React Tutorial</title>
<script src=”https://unpkg.com/react@16/umd/react.development.js”></script>
<script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js”></script>
</head>
<body>
<div id=”root”></div>
<script type=”text/babel”>
const element = <h1>Hello from React</h1>;
وحدة التحكم .log (عنصر) ؛
</script>
</body>
</html>
ثم احفظ هذه الملفات بتنسيق Index.html.
يقوم HTML هذا بتحميل جميع ملفات البرنامج النصي التي ستحتاجها لهذا البرنامج التعليمي. البرامج النصية المعنية هي React و ReactDOM و Babel. كما ترى ، على الرغم من أنه مكتوب بلغة JavaScript ، إلا أن بعض التعليمات البرمجية مكتوبة بلغة HTML القياسية. هذا لأنه JSX ، وهو بناء جملة لامتداد JavaScript لوصف واجهات المستخدم بسهولة.
إنشاء تطبيق React باستخدام CLI
يتعامل React مع معظم هذا التنسيق نيابة عنك. نعرض لك فقط HTML الخام لمساعدتك على تصور ما يحدث تحت غطاء محرك React JS بشكل أفضل.
لإنشاء تطبيق React باستخدام واجهة سطر الأوامر (CLI) ، ستحتاج إلى تثبيت Node.js. سيتيح لك ذلك الوصول إلى وظيفة مدير حزم العقدة (npm) الخاصة به.
في الجهاز ، انتقل إلى المجلد الذي أنشأته لهذا البرنامج التعليمي. أدخل الأمر التالي:
NPX إنشاء رد فعل التطبيق رد فعل تودو التطبيق
يؤدي هذا إلى إنشاء مجلد يسمى react-todo-app ويتضمن جميع ملفات بدء التشغيل الضرورية.
ندعوك لقضاء بعض الوقت في استكشاف المجلدات بمجرد إنشائها. سيساعدك هذا على تصور ما يحدث داخل تطبيق React.
في هذا البرنامج التعليمي ، نحن مهتمون فقط بملف الفهرس .js داخل مجلد src. هذا هو المكان الذي ستكتب فيه تطبيقك.
بعد ذلك ، انتقل إلى مجلد تطبيق رد الفعل الذي أنشأته. الآن ابدأ تشغيل التطبيق بالأمر التالي:
npm start
سيؤدي هذا إلى تشغيل تطبيق React الخاص بك على خادم محلي. إذا قمت بتحميل localhost: 3000 في شريط المتصفح ، فيجب أن ترى تطبيقك الافتراضي.
إنشاء تطبيق ToDo
عند إنشاء تطبيق React ، قام تلقائيا بإنشاء الملفات الضرورية لأحد التطبيقات. نظرا لأن هذا برنامج تعليمي للمبتدئين في React JS ، فسنستمر في المضي قدما وكتابتها من البداية حتى تتمكن من فهم ما يحدث. لتجنب الالتباس ، احذف الملفات من مجلد src حتى تتمكن من إنشاء ملفات جديدة.
أولا ، ستقوم بإنشاء ملف فهرس .js. افتح ملفا جديدا في محرر النصوص وأدخل ما يلي:
استيراد رد فعل من "رد فعل"
استيراد ReactDOM من "رد فعل دوم"
const element = <h1>Hello from Create React App</h1>
ReactDOM.render(element, document.getElementById("root"))
عند حفظ هذا الملف ، سترى النص من الرأس معروضا على المضيف المحلي.
ستلاحظ أن هذا الرمز لا يختلف عما أنشأناه باستخدام ملف HTML الخام. نحن فقط نستورد React و ReactDOM بدلا من ذلك. لا يتعين علينا أيضا أن نهتم ب JSX لأن CLI يعتني بذلك نيابة عنك.
إنشاء المكونات
في وقت سابق ، تحدثنا عن أوجه التشابه بين React والخدمات المصغرة. تتكون تطبيقات React أيضا من مكونات أصغر ، مما يسمح أيضا بإعادة استخدامها في تطبيقات أخرى.
تأتي مكونات React في فئتين - الآباء والأطفال. الخطوة التالية في إنشاء تطبيق React الخاص بنا هي إنشاء مجلد داخل مجلد src للمكونات. إنشاء مجلد مكونات ثم قم بإنشاء ملف فارغ وقم بتسميته ToedoContainer.js. ثم أدخل ما يلي:
استيراد رد فعل من "رد فعل"
فئة TodoContainer يمتد رد فعل. المكون {
تقديم () {
العودة (
<div>
<h1>Hello from Create React App</h1>
<p>I am in a React Component!</p>
</div>
)
}
}
تصدير TodoContainer الافتراضي
عد الآن إلى ملف .js الفهرس الخاص بك وقم بتحديثه بهذا الرمز:
استيراد رد فعل من "رد فعل"
استيراد ReactDOM من "رد فعل دوم"
//component file
استيراد TodoContainer من "./components/TodoContainer.js"
ReactDOM.render(<TodoContainer />, document.getElementById(“root”))
إنشاء قائمة المهام
تم بناء React حول فرضية توجيه البيانات بين المكونات. سيتحكم المكون الأصلي في البيانات التي تذهب نحو الطفل. ومع ذلك ، يمكن أن يكون لمكونات الأطفال سماتها المحلية أيضا.
تعرف هذه باسم الدول والدعائم.
أولا ، ستقوم بإنشاء مكون آخر. قم بإنشاء ملف يسمى TodosList .js داخل مجلدات المكونات. يدرج ما يلي:
استيراد رد فعل من "رد فعل"
استيراد TodoItem من "./TodoItem";
const TodosList = الدعائم = > {
العودة (
<ul>
{props.todos.map(todo => (
<TodoItem
key={todo. id}
todo={todo}
handleChangeProps={props.handleChangeProps}
deleteTodoProps={props.deleteTodoProps}
setUpdate = {props.setUpdate}
/>
))}
</ul>
)
}
تصدير قائمة المهام الافتراضية
سنضيف بعض الحالات إلى ملف TodoContainer.js. أدخل ما يلي فوق طريقة render() :
الدولة = {
تودوس: [
{
المعرف: 1,
العنوان: "بيئة تطوير الإعداد" ،
مكتمل: صحيح
},
{
المعرف: 2,
العنوان: "تطوير موقع الويب وإضافة محتوى" ،
مكتمل: خطأ
},
{
المعرف: 3,
العنوان: "النشر على الخادم المباشر" ،
مكتمل: خطأ
}
]
};
ثم قم بتحديث وظيفة render () :
تقديم () {
العودة (
<ul>
{this.state.todos.map(todo => (
<li>{todo.title}</li>
))}
</ul>
);
}
ستحتاج أيضا إلى استيراد مكون TodosList. أضف هذا السطر إلى بداية TodosContainer.js:
استيراد TodosList من "./TodosList";
ستلاحظ أن كل عنصر يحصل على معرف فريد مرفق به ، وهو أمر مهم لفرز البيانات ومعالجتها. للوصول إلى معرف العنصر، قم بتضمين ما يلي في قائمة Todos.js:
<li key={todo.id}>{todo.title}</li>
بعد ذلك ، ستقوم بإنشاء ملف آخر داخل مجلد المكونات. استدعاء هذا واحد TodoItem.js. أدخل هذا الرمز:
استيراد رد فعل ، { useState ، useEffect } من "رد فعل"
استيراد الأنماط من "./TodoItem.module.css"
import { FaTrash } from “react-icons/fa”;
const TodoItem = (الدعائم) = > {
const [تحرير ، setEditing] = useState (خطأ)
useEffect(() => {
إرجاع () = > {
وحدة التحكم.log("التنظيف...")
}
}, [])
const handleEditing = () = > {
setEditing(صواب)
}
const handleUpdatedDone = (حدث) = > {
إذا (الحدث.key === "أدخل" ) {
setEditing(خطأ)
}
}
const completedStyle = {
نمط الخط: "مائل" ،
اللون: "#595959" ،
التعتيم: 0.4 ،
النصالديكور: "خط من خلال" ،
}
const {مكتمل ، معرف ، عنوان} = props.todo
let viewMode = {};
let editMode = {};
إذا (تحرير) {
viewMode.display = "لا شيء" ؛
} آخر {
editMode.display = 'لا شيء' ؛
}
العودة (
<li className={styles.item}>
<div onDoubleClick={handleEditing} style={viewMode}>
<input
النوع = "خانة الاختيار"
اسم الفئة = {مربع الاختيار الأنماط}
تم التحقق = {مكتمل}
onChange={() => props.handleChangeProps(id)}
/>
<button onClick={() => props.deleteTodoProps(id)}>
<FaTrash style={{color: “orangered”, fontSize: “16px”}}/>
</button>
<span style={completed ? completedStyle : null} >{title}</span>
</div>
<input
النوع = "نص"
النمط = {وضع التحرير}
اسم الفئة = {أنماط.نص الإدخال}
القيمة = {العنوان}
onChange={(e)=> {props.setUpdate(e.target.value, id)}}
onKeyDown={handleUpdatedDone}
/>
</li>
)
}
تصدير TodoItem الافتراضي
الآن ستقوم باستيراد مكون TodoItem هذا داخل TodosList:
استيراد TodoItem من "./TodoItem";
الآن قم بتحديث طريقة map() :
<TodoItem key={todo.id} todo={todo} />
الآن بيانات الحالة متاحة ل TodoItem. الآن ستقوم بتحديث مكون TodoItem.js.
استيراد رد فعل من "رد فعل"
فئة TodoItem يمتد رد فعل. المكون {
تقديم () {
return <li>{this.props.todo.title}</li>
}
}
تصدير TodoItem الافتراضي
تحويل إلى مكونات وظيفية
حتى الآن ، مكون واحد فقط ، TodoContainer ، يقوم بتخزين البيانات. لجعله بحيث يمكن لمكونات متعددة الاحتفاظ بالبيانات ، سنقوم بتحويل أحد المكونات إلى مكون وظيفة.
قم بتحديث ملف TodosItem.js بما يلي:
استيراد رد فعل من "رد فعل"
وظيفة TodoItem(الدعائم) {
return <li>{props.todo.title}</li>
}
تصدير TodoItem الافتراضي
الآن يمكن للمكونات الفردية الاحتفاظ ببيانات الدولة أيضا.
بعد ذلك ، ستقوم بتحديث ملف Header.js:
استيراد رد فعل من "رد فعل"
const header = () = > {
العودة (
<header>
<h1>todos</h1>
</header>
)
}
تصدير الرأس الافتراضي
الآن قم باستيراد ذلك إلى TodoContainer:
استيراد رأس من "./Header"
الشيء الوحيد المتبقي هو تحديث وظيفة render() :
تقديم () {
العودة (
<div>
<Header />
<TodosList todos={this.state.todos} />
</div>
);
}
الآن إذا انتقلت إلى دليل التطبيق وقمت بتشغيل التطبيق باستخدام npm start ، فيجب أن تحصل على تطبيق ToDo يعمل في متصفحك. يمكنك إضافة عناصر والتحقق منها عند الانتهاء. إنه مثال جيد على مدى سهولة تشغيل تطبيق React وتشغيله في بضع دقائق فقط.
إذا كنت قد تابعت هذا البرنامج التعليمي خطوة بخطوة ، فيجب أن تتعرف على كيفية إعداد React ووظائفه. من السهل نشر تطبيق مجرد. ثم يمكنك تخصيص العناصر وإضافة التعقيد إلى رغبة قلبك.
نحن نعلم أنه هناك الكثير لتستوعبه عندما تبدأ في تعلم React لأول مرة. نوصي بالتصفح من خلال مستودع GitHub لهذا البرنامج التعليمي وسكب التعليمات البرمجية أثناء التنقل. سيساعدك هذا أيضا على استيعاب أوامر ومكتبات React. سوف تكون بطلاقة في مكتبة جافا سكريبت قبل أن تعرف ذلك!
هل تبحث عن تطوير React؟
لا عجب أن العديد من الخصائص الرائدة على الإنترنت مبنية باستخدام React JS. يوفر واجهة مستخدم قوية ويمكن الاعتماد عليها وجذابة عبر أي جهاز. إنه عملي وجمالي ، حيث ينشئ مواقع ويب وتطبيقات جذابة لا بد أن يحبها المستخدمون. سواء كنت قد بدأت للتو في تعلم React JS أو تحتاج فقط إلى تنفيذ مشروع تطوير مخصص ، فنحن هنا للمساعدة. اتصل بنا اليوم وأخبرنا كيف يمكننا مساعدتك في مشروع التطوير الخاص بك.
