شما در حال ساخت مجموعه كاملاً جديدي از مولفه هاي سفارشي هستيد ، بنابراين بايد با پاك كردن برخي از كد هاي متن استاندارد شروع كنيد تا بتوانيد يك پروژه خالي داشته باشيد. براي شروع App.js ار در ويرايشگر متن باز كنيد. اين قسمت اصلي است كه به صفحه تزريق مي شود. همه مؤلفه ها از اينجا شروع مي شوند.
در يك ترمينال جديد ، وارد پوشه پروژه شويد و src / App.js را با دستور زير باز كنيد:
⦁ $ nano src/App.js
⦁
فايلي مانند اين را مشاهده خواهيد كرد:
jsx-tutorial/src/App.js
import React from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

function App() {
return (

Edit src/App.js and save to reload.

className=”App-link”
href=”https://reactjs.org”
target=”_blank”
rel=”noopener noreferrer”
>
Learn React

export default App;

اكنون پس از عبارت بازگشت در تابع ، خط import logo from ‘./logo.svg و هر چيز ديگر را حذف كنيد. آن را به null تغيير دهيد. كد نهايي به شرح زير خواهد بود:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return null;
}

export default App;

ويرايشگر متن را ذخيره كرده و از آن خارج شويد.
در آخر ، لوگو را حذف كنيد. در پنجره ترمينال دستور زير را تايپ كنيد:
⦁ $ rm src/logo.svg
⦁

شما در برنامه خود از اين فايل SVG استفاده نخواهيد كرد و بايد هنگام كار ، فايل هاي بلااستفاده را حذف كنيد. بهتر است در طولاني مدت كد خود را سازماندهي كنيد.
اكنون كه اين قسمت از پروژه شما حذف شده است ، مي توانيد به جستجو در جنبه هاي ديگر JSX بپردازيد. اين زبان نشانه گذاري توسط React كامپايل شده و در نهايت تبديل به HTML مي شود كه در يك صفحه وب مشاهده مي كنيد. بدون وارد شدن عميق داخلي React ، JSX را مي گيرد و الگويي از صفحه شما را ايجاد مي كند ، سپس عناصر لازم را ايجاد كرده و آنها را به صفحه اضافه مي كند.
اين بدان معني است كه مي توانيد چيزي را بنويسيد كه شبيه HTML است و انتظار داشته باشيد كه HTML ارائه شده مشابه باشد. با اين حال ، چند مرحله وجود دارد.
ابتدا ، اگر به سربرگ يا پنجره سرور مجازي خود نگاه كنيد ، اين را مشاهده خواهيد كرد
Output
…
./src/App.js
Line 1:8: ‘React’ is defined but never used no-unused-vars
…

اين linter به شما مي گويد كه از كد React وارد شده استفاده نمي كنيد. هنگامي كه خط import React from ‘react’ را به كد خود اضافه مي كنيد ، كد JavaScript را وارد مي كنيد كه JSX را به React code تبديل مي كند. اگر JSX وجود نداشته باشد ، ديگر نيازي به ورودي نيست.
بياييد با اضافه كردن مقدار كمي JSX اين مسئله را تغيير دهيم. با جايگزين كردن null با يك مثال hello, world شروع كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return

Hello, World

export default App;

فايل را ذخيره كنيد. اگر به ترمينال با سرور مجازي در حال اجرا نگاه كنيد ، پيام اخطار از بين خواهد رفت. اگر از مرورگر خود بازديد كنيد ، پيام را به عنوان مولفه h1 مشاهده خواهيد كرد.

سپس ، در زير برچسب

، يك برچسب پاراگراف اضافه كنيد كه شامل رشته I am writing JSX است. كد به صورت زير خواهد بود:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return(

Hello, World

I am writing JSX

export default App;

از آنجايي كه JSX چندين خط دارد ، نياز است عبارت در پرانتز قرار داده شود.
فايل را ذخيره كنيد. هنگامي كه اين كار را كرديد، خطايي در اجراي سرور مجازي خود در ترمينال مشاهده مي كنيد:
Output
./src/App.js
Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…?

5 | return(
6 |

Hello, World

I am writing JSX

وقتي JSX را از يك تابع يا عبارت باز مي گردانيد ، بايد يك مولفه واحد را برگردانيد. اين مولفه ممكن است بخش هاي لانه گزيده باشد ، اما اگر يك مولفه سطح بالا باشد. در اين حالت ، دو مولفه را بر مي گردانيد.
fix يك تغيير كد جزيي است. با يك برچسب خالي كد را محصور كنيد. برچسب خالي يك مولفه HTML است كه هيچ كلمه اي ندارد. به اين شكل: <>
به./src/App.js در ويرايشگر خود برويد و برچسب خالي را اضافه كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

function App() {
return(
<>

Hello, World

I am writing JSX

export default App;

برچسب خالي يك مولفه واحد ايجاد مي كند ، اما وقتي كد كامپايل شد ، به نشانه گذاري نهايي اضافه نمي شود. اين كار باعث مي شود كدهاي شما در عين حال كه يك مولفه واحد به React مي دهند ، صحيح باقي بمانند.
توجه: شما مي توانيد به جاي برچسب هاي خالي ، كد را با يك div محصور كنيد ، مادامي كه كد يك مولفه را برگرداند. در اين مثال ، يك برچسب خالي اين مزيت را دارد كه نشانه گذاري اضافي به خروجي تجزيه نشده اضافه نمي كند.

كد را ذخيره كرده و از فايل خارج شويد. مرورگر شما صفحه به روز شده را با مولفه پاراگراف نشان مي دهد. علاوه بر اين ، هنگام تبديل كد ، برچسب هاي خالي از بين مي روند:

اكنون JSX اساسي را به مؤلفه خود اضافه كرده ايد و ياد گرفته ايد كه چگونه بايد همه JSX در يك مؤلفه مستقر شود. در مرحله بعد ، يك ظاهر طراحي را به مؤلفه خود اضافه مي كنيد.
مرحله 2 – اضافه كردن طراحي به يك مولفه به همراه ويژگي ها
در اين مرحله ، به عناصر موجود در مؤلفه خود مي پردازيد تا ياد بگيريد كه چگونه ويژگي هاي HTML با JSX كار مي كنند. در React گزينه هاي بسياري براي طراحي وجود دارد. برخي از آنها شامل نوشتن CSS در جاوا اسكريپت است، بو رخي ديگر از پيش پردازنده استفاده مي كنند. در اين آموزش با كلاس هاي CSS و CSS وارد شده كار خواهيد كرد.
اكنون كه كد خود را داريد ، وقت آن است كه يك ظاهر طراحي شده اضافه كنيد. App.css را در ويرايشگر متن خود باز كنيد:
⦁ $ nano src/App.css
⦁
از آنجا كه شما با JSX جديد شروع مي كنيد ، CSS فعلي به عناصري اشاره مي كند كه ديگر وجود ندارند. از آنجا كه به CSS احتياج نداريد ، مي توانيد آن را حذف كنيد.
پس از حذف كد ، فايلي خالي خواهيد داشت.
در مرحله بعد ، مي توانيد طراحي به مركز متن اضافه كنيد. در src / App.css كد زير را اضافه كنيد:
jsx-tutorial/src/App.css
.container {
display: flex;
flex-direction: column;
align-items: center;
}

در اين بلوك كد ، شما  CSS class selector را با نام .container ايجاد كرده ايد و از آن براي در مركز قرار دادن محتوا با استفاده از display: flex استفاده كرده ايد.
فايل را ذخيره كرده و خارج شويد. مرورگر بروزرساني مي شود ، اما هيچ چيز تغيير نخواهد كرد. قبل از مشاهده تغيير ، بايد كلاس CSS را به مؤلفه React خود اضافه كنيد. كد JavaScript مولفه را انتخاب كنيد:
⦁ $ nano src/App.js
⦁
كد CSS قبلاً با خط import ‘./App.css’ وارد شده است. اين بدان معني است كه webpack براي ساختن يك صفحه طراحي نهايي، كد را وارد مي كنند ، اما براي اعمال CSS روي عناصر خود ، بايد كلاس ها را اضافه كنيد.
ابتدا ، در ويرايشگر متن ، برچسب هاي خالي ، <> را به

export default App;

از آنجا كه اين JSX است ، onclick را به صورت camelCased درمي آوريد ، به اين معني كه آن را به صورت onClick اضافه كرده ايد. اين مشخصه onClick از يك تابع ناشناس براي بازيابي اطلاعات در مورد آيتمي كه كليك شده است استفاده مي كند.
شما يك تابع فلش ناشناس اضافه كرديد كه اين رويداد را از روي دكمه كليك شده درياقن مي كند و رويداد داراي هدفي خواهد بود كه مولفه است. اطلاعات مورد نياز در مشخصه id است كه مي توانيد با event.target.id به آنها دسترسي پيدا كنيد. با تابع () alert مي توانيد هشدار را فعال كنيد.
فايل را ذخيره كنيد. در مرورگر خود ، روي يكي از ايموجي ها كليك كرده و هشداري را به همراه نام دريافت خواهيد كرد.

مي توانيد با يكبار اعلام تابع و انتقال آن به هر تابع onClick ، ​​ تكرار را كاهش دهيد. از آنجايي كه اين تابع به چيزي غير از ورودي و خروجي متكي نيست ، مي توانيد آن را خارج از تابع مؤلفه اصلي اعلام كنيد. به عبارت ديگر ، تابع نيازي به دسترسي به حوزه مولفه ندارد. مزيت جدا كردن آنها اين است كه تابع كامپوننت شما كمي كوتاه تر است و مي توانيد در صورت نياز بعدا تابع را به يك فايل جداگانه منتقل كنيد.
در ويرايشگر متن خود ، تابعي به نام displayEmojiName ايجاد كنيد كه اين رويداد را بگيرد و تابع ()alert را با شناسه فراخواني كند. سپس تابع را به هر مشخصه onClick منتقل كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

const displayEmojiName = event => alert(event.target.id);

function App() {
const greeting = “greeting”;
return(

export default App;

فايل را ذخيره كنيد. در مرورگر خود ، روي emoji كليك كنيد و همان هشدار را مشاهده خواهيد كرد.
در اين مرحله ، شما به هر مولفه رويدادهايي اضافه كرديد. همچنين ديديد كه چگونه JSX از اسامي كمي متفاوت براي رويدادهاي مولفه استفاده مي كند ، و با گرفتن تابع و استفاده مجدد از آن بر روي چندين مولفه ، شروع به نوشتن كد قابل استفاده مجدد كرديد. در مرحله بعد ، يك تابع قابل استفاده مجدد خواهيد نوشت كه به جاي نوشتن هر مولفه به صورت دستي، عناصر JSX را برمي گرداند. اين امر بيشتر باعث كاهش تكرار خواهد شد.
مرحله 4 – نگاشت روي داده ها براي ايجاد عناصر
در اين مرحله ، استفاده از JSX فراتر از نشانه گذاري ساده خواهد رفت. ياد مي گيريد كه آن را با جاوا اسكريپت تركيب كنيد تا نشانه گذاري پويا ايجاد كنيد كه كد را كوچك مي كند و خوانايي را بهبود مي بخشد. مي توانيد كد خود را در آرايه اي كه براي ايجاد عناصر HTML حلقه مي كنيد ، آناليز كنيد.
JSX شما را به يك تركيب مشابه HTML محدود نمي كند. همچنين امكان استفاده مستقيم از JavaScript را در نشانه گذاري به شما مي دهد. اين كار را تا حدي با وارد كردن توابع به مشخصه ها امتحان كرده ايد. همچنين از متغيرها براي استفاده مجدد از داده ها استفاده كرده ايد. اكنون زمان آن رسيده كه JSX را مستقيماً از داده ها با استفاده از كد استاندارد JavaScript بسازيد.
در ويرايشگر متن خود ، بايد آرايه اي از داده هاي ايموجي را در فايل src / App.js ايجاد كنيد. اگر بسته است ، فايل را مجدداً باز كنيد:
⦁ $ nano src/App.js
⦁
آرايه اي را اضافه كنيد كه شامل آبجكت هاي داراي ايموجي و نام ايموجي باشد. توجه داشته باشيد كه ايموجي ها بايد با علامت نقل قول احاطه شوند. اين آرايه را فراتر از تابع app ايجاد كنيد:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

const displayEmojiName = event => alert(event.target.id);
const emojis = [
{
emoji: “”,
name: “grinning face”
},
{
emoji: “”,
name: “party popper”
},
{
emoji: “”,
name: “woman dancing”
}
];

function App() {
…
}

export default App;

اكنون كه داده داريد مي توانيد از طريق آن حلقه بزنيد. براي استفاده از JavaScript در داخل JSX ، بايد آن را در پرانتز {} قرار دهيد. مشابه زماني است كه توابع را به مشخصه ها اضافه كرديد.
براي ايجاد مؤلفه هاي React ، بايد داده ها را به عناصر JSX تبديل كنيد. براي انجام اين كار ، روي داده ها نگاشت مي كنيد و يك مولفه JSX را برمي گردانيد. چند نكته وجود دارد كه هنگام نوشتن كد بايد آنها را به خاطر بسپاريد.
ابتدا ، يك گروه از آيتم ها بايد توسط يك كانتينر