ما هي React؟
React هي مكتبة JavaScript أنشأها Facebook
React هي مكتبة واجهة مستخدم (UI)
React هي أداة لبناء مكونات واجهة المستخدم
برنامج React Quickstart التعليمي
هذا هو برنامج تعليمي سريع البدء.
قبل أن تبدأ ، يجب أن يكون لديك فهم أساسي لما يلي:
للحصول على برنامج تعليمي كامل:
بدء البرنامج التعليمي React ❯إضافة رد إلى صفحة HTML
سيضيف هذا البرنامج التعليمي الخاص بالبدء السريع React إلى صفحة مثل هذه:
مثال
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
ما هو بابل؟
Babel هو مترجم JavaScript يمكنه ترجمة لغات الترميز أو البرمجة إلى JavaScript.
مع Babel ، يمكنك استخدام أحدث ميزات JavaScript (ES6 - ECMAScript 2015).
بابل متاح للتحويلات المختلفة. يستخدم React Babel لتحويل JSX إلى JavaScript.
يرجى ملاحظة أن <script type = "text / babel"> ضروري لاستخدام Babel.
ما هو JSX؟
يرمز JSX إلى J ava S cript X ML.
JSX هو امتداد يشبه XML / HTML إلى JavaScript.
مثال
const element = <h1>Hello World!</h1>
كما ترى أعلاه ، JSX ليست JavaScript ولا HTML.
JSX هو امتداد بناء جملة XML لجافا سكريبت يأتي أيضًا مع القوة الكاملة لـ ES6 (ECMAScript 2015).
تمامًا مثل HTML ، يمكن أن تحتوي علامات JSX على أسماء علامات وسمات وأطفال. إذا تم التفاف السمة بأقواس معقوفة ، فإن القيمة هي تعبير JavaScript.
لاحظ أن JSX لا تستخدم علامات الاقتباس حول سلسلة نص HTML.
رد فعل DOM تقديم
تُستخدم طريقة ReactDom.render () لعرض (عرض) عناصر HTML:
مثال
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
تعبيرات JSX
يمكن استخدام التعبيرات في JSX عن طريق لفها بأقواس متعرجة {} .
مثال
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
عناصر التفاعل
عادةً ما يتم إنشاء تطبيقات React حول عنصر HTML واحد .
غالبًا ما يطلق مطورو React على هذه العقدة الجذر (عنصر الجذر):
<div id="root"></div>
تبدو عناصر التفاعل كما يلي:
const element = <h1>Hello React!</h1>
يتم تقديم (عرض) العناصر باستخدام طريقة ReactDOM.render ():
ReactDOM.render(element, document.getElementById('root'));
عناصر التفاعل غير قابلة للتغيير . لا يمكن تغييرها.
الطريقة الوحيدة لتغيير عنصر React هي عرض عنصر جديد في كل مرة:
مثال
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
مكونات رد الفعل
مكونات React هي وظائف JavaScript.
يُنشئ هذا المثال مكون React باسم "Welcome":
مثال
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
يمكن أن تستخدم React أيضًا فئات ES6 لإنشاء مكونات.
يُنشئ هذا المثال مكوِّنًا من React يُدعى Welcome مع تابع تقديم :
مثال
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
رد فعل خصائص المكون
يُنشئ هذا المثال مكون React باسم "Welcome" مع وسيطات الخاصية:
مثال
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
يمكن أن تستخدم React أيضًا فئات ES6 لإنشاء مكونات.
يُنشئ هذا المثال أيضًا مكون React باسم "Welcome" مع وسيطات الخاصية:
مثال
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
مترجم JSX
الأمثلة في هذه الصفحة تجمع JSX في المتصفح.
بالنسبة لكود الإنتاج ، يجب أن يتم التجميع بشكل منفصل.
إنشاء تطبيق React
أنشأ Facebook تطبيق Create React مع كل ما تحتاجه لإنشاء تطبيق React.
إنه خادم تطوير يستخدم Webpack لتجميع ملفات React و JSX و ES6 ، وهي ملفات CSS ذات بادئة تلقائية.
يستخدم تطبيق Create React App ESLint للاختبار والتحذير من الأخطاء في التعليمات البرمجية.
لإنشاء تطبيق Create React ، قم بتشغيل الكود التالي على جهازك الطرفي:
مثال
npx create-react-app react-tutorial
تأكد من أن لديك Node.js 5.2 أو أعلى. وإلا يجب عليك تثبيت npx:
مثال
npm i npx
ابدأ مجلدًا واحدًا من المكان الذي تريد أن يبقى فيه التطبيق الخاص بك:
مثال
C:\Users\myUser>npx create-react-app react-tutorial
نتيجة النجاح:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start