رد فعل الشروع في العمل
لاستخدام React في الإنتاج ، تحتاج إلى npm المضمنة في Node.js.
للحصول على نظرة عامة حول ماهية React ، يمكنك كتابة رمز React مباشرةً في HTML.
ولكن من أجل استخدام React في الإنتاج ، فأنت بحاجة إلى تثبيت npm و Node.js.
تفاعل مباشرة في HTML
أسرع طريقة لبدء تعلم React هي كتابة React مباشرة في ملفات HTML الخاصة بك.
مساحات W3Schools
أسهل طريقة للبدء في إنشاء ملفات HTML هي W3Schools Spaces!
إنه المكان المثالي لإنشاء عملك وتعديله ومشاركته مع الآخرين!
ابدأ بتضمين ثلاثة نصوص ، الأول منهما يتيح لنا كتابة كود React في JavaScripts لدينا ، والثالث Babel يسمح لنا بكتابة JSX syntax و ES6 في المتصفحات القديمة.
سوف تتعلم المزيد عن JSX في فصل React JSX .
مثال
قم بتضمين ثلاثة CDN في ملف HTML الخاص بك:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
يمكن أن تكون طريقة استخدام React هذه مناسبة لأغراض الاختبار ، ولكن بالنسبة للإنتاج ، ستحتاج إلى إعداد بيئة React .
الحصول على شهادة!
95 دولارًا ENROLL
إنشاء بيئة تفاعل
إذا كان لديك npx و Node.js مثبتين ، يمكنك إنشاء تطبيق React باستخدام create-react-app.
إذا سبق لك التثبيت create-react-appعالميًا ، فمن المستحسن أن تقوم بإلغاء تثبيت الحزمة للتأكد من أن npx يستخدم دائمًا أحدث إصدار من create-react-app.
لإلغاء التثبيت ، قم بتشغيل هذا الأمر npm uninstall -g create-react-app:.
قم بتشغيل هذا الأمر لإنشاء تطبيق React باسم
my-react-app:
npx create-react-app my-react-app
سوف يقوم create-react-appبإعداد كل ما تحتاجه لتشغيل تطبيق React.
قم بتشغيل تطبيق React
أنت الآن جاهز لتشغيل أول تطبيق حقيقي لـ React!
قم بتشغيل هذا الأمر للانتقال إلى my-react-appالدليل:
cd my-react-app
قم بتشغيل هذا الأمر لتشغيل تطبيق React
my-react-app:
npm start
ستظهر نافذة متصفح جديدة مع تطبيق React الذي تم إنشاؤه حديثًا! إذا لم يكن كذلك ، افتح المتصفح واكتب
localhost:3000في شريط العناوين.
النتائج:
قم بتعديل تطبيق React
جيد حتى الآن ، لكن كيف يمكنني تغيير المحتوى؟
ابحث في my-react-appالدليل ، وستجد
srcمجلدًا. يوجد داخل
srcالمجلد ملف يسمى
App.js، افتحه وسيبدو كالتالي:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;حاول تغيير محتوى HTML واحفظ الملف.
لاحظ أن التغييرات مرئية على الفور بعد حفظ الملف ، ولست مضطرًا إلى إعادة تحميل المتصفح!
مثال
استبدل كل المحتوى الموجود داخل the <div className="App">بعنصر
<h1>.
شاهد التغييرات في المتصفح عند النقر فوق حفظ.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;لاحظ أننا أزلنا الواردات التي لا نحتاجها (logo.svg و App.css).
النتائج:
ماذا بعد؟
لديك الآن بيئة React على جهاز الكمبيوتر الخاص بك ، وأنت على استعداد لمعرفة المزيد عن React.
في بقية هذا البرنامج التعليمي ، سنستخدم أداة "Show React" لشرح الجوانب المختلفة لـ React ، وكيفية عرضها في المتصفح.
إذا كنت تريد اتباع نفس الخطوات على جهاز الكمبيوتر الخاص بك ، فابدأ بتجريد srcالمجلد بحيث يحتوي على ملف واحد فقط index.js:. يجب أيضًا إزالة أي سطور غير ضرورية من التعليمات البرمجية داخل index.js
الملف لجعلها تبدو مثل المثال الموجود في أداة "Show React" أدناه:
مثال
انقر فوق الزر "تشغيل مثال" لرؤية النتيجة.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));