3.6 KiB
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 متصفحًا يعرض تطبيقك تلقائيًا.