d6a160445e
* fix: converted single to triple backticks13 * fix: added prefix Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: removed language in wrong place Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: add language postfix Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: removed language in wrong place Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>
3.6 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Your first React App | لديك أول رد فعل التطبيق |
لديك أول رد فعل التطبيق
التركيب
كما هو محدد في الأداة السابقة (التثبيت) ، قم بتشغيل أداة Create React App React. بعد الانتهاء من كل شيء ، أدخل cd في مجلد التطبيق الخاص بك وقم بتشغيل npm start . سيؤدي هذا إلى بدء خادم تطوير وستكون جاهزًا للبدء في تطوير تطبيقك!
npm install -g react-create-app
create-react-app my-first-app
cd my-first-app
npm start
تحرير الرمز
بدء تشغيل المحرر الخاص بك أو IDE للاختيار وتحرير ملف App.js في المجلد src . عند إنشائه باستخدام أداة react-create-app ، سيكون هناك بالفعل شفرة في هذا الملف.
يتكون الرمز من الأجزاء التالية:
واردات
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
يتم استخدام هذا من خلال webpack لاستيراد جميع الوحدات المطلوبة بحيث يمكن أن تستخدمها الكود. هذا الرمز يستورد 3 وحدات: 1) React Component ، مما يسمح لنا باستخدام React كما ينبغي استخدامه. (مع المكونات) 2) logo ، والذي يسمح لنا باستخدام logo.svg في هذا الملف. 3) ./App.css ، التي تستورد ورقة الأنماط لهذا الملف.
فصول / المكونات
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
React هي مكتبة تستخدم المكونات ، والتي تتيح لك تقسيم واجهة المستخدم إلى أجزاء مستقلة يمكن إعادة استخدامها والتفكير في كل قطعة بمعزل عن غيرها. يوجد بالفعل مكون واحد مكون ، مكون App . إذا كنت تستخدم أداة create-react-app ، فإن هذا المكون هو المكون الرئيسي في المشروع ويجب أن تبني حول هذه الطبقة المركزية.
سننظر في المكونات أكثر تفصيلاً في الفصول القادمة.
صادرات
عند إنشاء فئة في الاستجابة ، يجب عليك تصديرها بعد التصريح ، والذي يسمح لك باستخدام المكون في ملف آخر باستخدام الكلمة الأساسية import . يمكنك استخدام default بعد الكلمة الأساسية export لإعلام React أن هذه هي الفئة الرئيسية من هذا الملف.
export default App;
عرض النتائج!
عند بدء تشغيل خادم التطوير من خلال إصدار الأمر npm start ، يمكنك مشاهدة التغييرات التي تضيفها إلى مشروعك مباشرة في متصفحك. بعد إصدار الأمر ، يجب أن يفتح npm متصفحًا يعرض تطبيقك تلقائيًا.