مقدمه ای بر JSX – SitePoint

وقتی React برای اولین بار معرفی شد ، یکی از ویژگی هایی که توجه بیشتر مردم را به خود جلب کرد (و بیشترین انتقاد را به همراه داشت) JSX بود. اگر در حال یادگیری React هستید ، یا نمونه هایی از کد را دیده اید ، احتمالاً در نحو یک برداشت دو برابری انجام داده اید. این ادغام عجیب HTML و JavaScript چیست؟ آیا این حتی کد واقعی است؟

بیایید نگاهی بیاندازیم به اینکه JSX چیست ، چگونه کار می کند و چرا اولاً هک می خواهیم HTML و JS را با هم مخلوط کنیم!

JSX چیست؟

توسط اسناد React به عنوان “پسوند JavaScript” یا “نحو قند برای تماس تعریف شده است React.createElement(component, props, ...children))JSX همان چیزی است که نوشتن کامپوننت های React شما را آسان می کند.

JSX در نظر گرفته می شود زبان خاص دامنه (DSL)، که می تواند شباهت زیادی به یک زبان الگو داشته باشد ، مانند سبیل ، آویشن ، تیغ ، شاخه ، یا سایر موارد.

در اینجا مثالی از نحو آن آورده شده است:

const element = <h1>Hello, World!</h1>;

آنچه بعد از علامت برابر می آید یک رشته یا HTML نیست ، بلکه JSX است. این به طور مستقیم به HTML ارائه نمی شود اما در عوض به کلاسهای React ارائه می شود که توسط Virtual DOM مصرف می شوند. سرانجام ، از طریق جادوی مرموز Virtual DOM ، به صفحه راه پیدا می کند و به HTML ارائه می شود.

چگونه کار می کند؟

JSX هنوز هم فقط JavaScript با قابلیت های اضافی است. با استفاده از JSX می توانید کدی بنویسید که بسیار شبیه HTML یا XML باشد ، اما قدرت مخلوط کردن یکپارچه روش ها و متغیرهای JavaScript را در کد خود دارید. JSX توسط یک مبدل تفسیر می شود ، مانند بابل، و به کد JavaScript ارائه شده است که UI Framework (در این حالت React) می تواند آن را درک کند.

توجه: می توانید از Babel REPL برای تبدیل هر یک از مثالهای زیر به JavaScript معمولی.

JSX را دوست ندارید؟ باحاله. از نظر فنی مورد نیاز نیست و در واقع اسناد React بخشی از استفاده را شامل می شوند بدون JSX واکنش نشان دهید. بگذارید همین حالا به شما هشدار دهم ، هرچند که زیبا نیست. باور نمی کنید؟ نگاهی بیاندازید.

JSX:

class SitePoint extends Component {
  render() {
    return (
      <div>My name is <span>{this.props.myName}</span></div>
    )
  }
}

React Sans JSX:

class SitePoint extends Component {
  render() {
    return React.createElement(
      "div",
      null,
      "My name is",
      React.createElement(
        "span",
        null,
        this.props.myName
      )
    )
  }
}

مطمئناً ، با مشاهده نمونه های كوچك كد موجود در آن صفحه ، ممكن است به این فكر كنید ، “اوه ، این خیلی بد نیست ، من می توانم این كار را انجام دهم.” اما آیا می توانید تصور کنید که یک برنامه کامل مانند آن بنویسید؟

مثال فقط دو عنصر ساده تو در تو HTML است ، هیچ چیز فانتزی نیست. در واقع ، فقط یک تو در تو Hello World معادل. تلاش برای نوشتن برنامه React بدون JSX بسیار وقت گیر خواهد بود و اگر مانند بسیاری دیگر از توسعه دهندگان اینجا باشید که به عنوان شخصیت در DevLand کار می کنیم ، به سرعت به یک کد آشپزخانه پیچیده اسپاگتی تبدیل می شود. اوه!

استفاده از چارچوب ها و کتابخانه ها و مواردی از این قبیل به منظور سهولت زندگی ما است نه سخت تر. من مطمئن هستم که همه ما در حرفه خود استفاده بیش از حد و سو abuse استفاده از کتابخانه ها یا چارچوب ها را دیده ایم ، اما قطعاً استفاده از JSX با React شما یکی از این موارد نیست.

چرا از JSX استفاده کنیم؟

دلایل مختلفی وجود دارد که JSX ایده خوبی است:

مانع کمي براي ورود دارد. JSX به همان اندازه که در حال حاضر به HTML و CSS ساده نزدیک است. با استفاده از JSX به راحتی می توانید قطعات JavaScript را در الگوهای خود جاسازی کنید بدون اینکه نیازی به یادگیری یک زبان الگوی اضافی باشید و بدون مقابله با سطوح پیچیده انتزاع. هر شخصی که با HTML ، CSS و JavaScript آشنا باشد نباید مشکلی در خواندن و درک الگوهای JSX داشته باشد.

پشتیبانی از TypeScript. TypeScript از جمع آوری پرونده های TSX با بررسی نوع پشتیبانی می کند. این به این معنی است که ، اگر در نام یک عنصر یا یک نوع ویژگی اشتباه کنید ، گردآوری از کار می افتد و پیغام خطایی را نشان می دهید که به اشتباه شما اشاره دارد. IDE های معروف مانند VS Code همچنین از پرونده های TSX پشتیبانی می کنند و تکمیل کد ، بازسازی و سایر ویژگی های مفید را ارائه می دهند.

امنیت. JSX برای جلوگیری از حملاتی مانند برنامه نویسی بین سایت ، از موارد معمول پاکسازی خروجی مراقبت می کند.

در مورد جدایی از نگرانی ها چطور؟

این باور گسترده وجود دارد که مخلوط کردن HTML و جاوا اسکریپت مقدسات را می شکند تفکیک نگرانی ها اصل این داوری فرض می کند که بین HTML – که مسئول ارائه است – و JavaScript – که مسئولیت کاربرد و منطق تجارت را دارد ، یک تفکیک مشخص وجود دارد. با این حال ، این جدایی براساس فناوری است و نه نگرانی آنها. جاوا اسکریپت که وظیفه ارائه لیستی از موارد را دارد هنوز به لایه ارائه تعلق دارد و باید بیشتر از بقیه برنامه به الگو نزدیک شود.

با استفاده از جاوا اسکریپت ، این واقعیت را می پذیریم که مرز نباید بین HTML و JavaScript باشد ، بلکه باید بین منطق ارائه و منطق برنامه ، صرف نظر از زبانهای مورد استفاده در هر دو طرف. تمرکز بر روی این مسئله مانع از آمیختن جاوا اسکریپت ارائه شده با منطق تجاری می شود ، بنابراین تفکیک نگرانی ها را کاهش می دهد ، اتصال را کاهش می دهد و قابلیت نگهداری را بهبود می بخشد.

استفاده از JSX With React

بیایید با اصول شروع کنیم. همانطور که قبلاً ذکر شد ، JSX قبل از اینکه در مرورگر ارائه شود ، باید به JavaScript معمولی منتقل شود. بنابراین ، اگر می خواهید مثال ها را دنبال کنید ، باید یک برنامه React از قبل راه اندازی شده داشته باشید.

نمونه های زیر همه همراه است نسخه های نمایشی قابل اجرا CodePen، بنابراین اگر تنها چیزی که می خواهید این است که یک بازی سریع با کد داشته باشید ، این ممکن است گزینه خوبی برای شما باشد.

در غیر این صورت ، می توانید ابزار ایجاد React App فیس بوک را انتخاب کنید. برای استفاده از این ، شما باید Node و npm را نصب کنید. اگر این کار را نکرده اید ، به Node.js بروید صفحه بارگیری و آخرین نسخه سیستم خود را بگیرید (npm همراه با Node ارائه می شود). متناوباً ، می توانید با آموزش ما در زمینه نصب Node با استفاده از مدیر نسخه مشورت کنید.

با نصب Node ، می توانید یک برنامه جدید React ایجاد کنید مانند این:

npx create-react-app myapp

این یک ایجاد خواهد کرد myapp پوشه وارد این پوشه شوید و سرور توسعه را به همین ترتیب شروع کنید:

cd myapp
npm start

مرورگر پیش فرض شما باز می شود و برنامه React جدید خود را مشاهده خواهید کرد. برای اهداف این آموزش ، شما می توانید در App جز component ، که در واقع شده است src/App.js.

حالا اجازه دهید وارد برخی از کدها شویم.

اصطلاحات اساسی

JSX بسیار شبیه HTML ساده است و از همان نحو مبتنی بر XML استفاده می کند. در اینجا نمونه متداول “سلام ، جهان” برای شروع وجود دارد:

const element = <h1>Hello, World!</h1>;

ReactDOM.render(element, document.getElementById('root'));

قلم را ببینید
jsx-سلام-جهان توسط SitePoint (SitePoint)
بر CodePen.

توجه داشته باشید که چگونه <h1> عنصر مستقیماً در داخل جاوا اسکریپت معمولی استفاده می شود. هیچ نقل قولی در اطراف آن وجود ندارد ، زیرا این یک رشته نیست ، بلکه یک عبارت زبان است.

به همین ترتیب ، می توانید از JavaScript در برچسب های JSX با محاصره کردن آنها با براکت های فر استفاده کنید:

function getGreeting(name) {
  return `Hello, ${name}`;
}

const element = <h1>{getGreeting('John')}</h1>;

ReactDOM.render(element, document.getElementById('root'));

قلم را ببینید
jsx-سلام-جهان-با-js توسط SitePoint (SitePoint)
بر CodePen.

هنگام تعیین مقادیر ویژگی ، می توانید از عبارات JavaScript نیز استفاده کنید ، مانند عبور یک شی با سبک های درون خطی در این مثال. این برای زمانی مفید است که می خواهید مقدار صفت پویا را منتقل کنید:

const styles = {
  color: 'red',
  fontStyle: 'italic'
}

const element = <h1 style={styles}>Hello, World!</h1>;

ReactDOM.render(element, document.getElementById('root'));

قلم را ببینید
jsx-سلام-به سبک جهان توسط SitePoint (SitePoint)
بر CodePen.

توجه: اگر لازم است لیستی پویا از ویژگی ها را تصویب کنید ، می توانید از اپراتور spread استفاده کنید: <h1 {...attributes}></h1>.

البته ، همانند HTML معمولی ، عناصر JSX می توانند حاوی کودکان باشند. این موارد می توانند به معنای واقعی کلمات رشته ای ، سایر عناصر یا عبارات JavaScript باشند:

function getGreeting() {
  return (
    <h2>Welcome to the website</h2>
  )
}

const element = <div>
  <h1>Hello!</h1>
  {getGreeting()}
</div>;

ReactDOM.render(element, document.getElementById('root'));

قلم را ببینید
jsx-children توسط SitePoint (SitePoint)
بر CodePen.

اظهارات مشروط

این واقعیت که می توانید عبارات جاوا اسکریپت را جاسازی کنید و از عناصر JSX عبور کنید ، امکانات زیادی برای ساختار کد شما ایجاد می کند. یک مورد استفاده مکرر نمایش شرطی یک عنصر به یک کاربر وارد شده است – مانند یک پیام شخصی – یا یک خطای اعتبار سنجی. JSX از استاندارد پشتیبانی نمی کند if عبارات ، اما شما می توانید از اپراتور سه گانه:

const loggedIn = true;

const element = <div>
  <h1>Hello!</h1>
  <h2>
    {(loggedIn) ? 'Welcome back' : 'Nice to meet you'}
  </h2>
</div>;

ReactDOM.render(element, document.getElementById('root'));

قلم را ببینید
jsx-conditional-example توسط SitePoint (SitePoint)
بر CodePen.

یک عبارت می تواند برگردد false، true، null یا undefined برای جلوگیری از ارائه یک عنصر. بازگرداندن برخی مقادیر جعلی ، مانند 0 یا یک رشته خالی ، عنصر را رندر می کند:

const error = true;

const element = <div>
  <label>
    Name:
    <input />
    {error ? <div style={{color: 'red'}}>Name invalid</div> : null}
  </label>
</div>;

ReactDOM.render(element, document.getElementById('root'));

قلم را ببینید
jsx-conditional-display توسط SitePoint (SitePoint)
بر CodePen.

به بریس های فرفری دوتایی استفاده شده در style صفت. این نحو برای عبور از یک شی in درون خطی به عنوان مقدار است: جفت بیرونی بیانگر بیانگر و جفت داخلی خود شی the است.

در قطعه بالا ، این را می بینیم:

{error ? <div style={{color: 'red'}}>Name invalid</div> : null}

این را می توان حتی بیشتر کوتاه کرد ، به این:

{error && <div style={{color: 'red'}}>Name invalid</div>}

این کار به این دلیل است که در JavaScript ، true && expression همیشه ارزیابی می کند تا expression، و false && expression همیشه ارزیابی می کند تا false.

اما گرچه این الگوی نسبتاً رایج است، در مورد خوانایی فراموش نکنید. به قراردادهای کدی که تیم شما با آن توافق کرده و درک می کند پایبند باشید. همچنین ، با لانه سازی سازه های شرطی زیاده روی نکنید. غالباً افراد یک اپراتور سه گانه را برای صرفه جویی در خوانایی چند خط کد ذخیره می کنند. با استخراج بلوک ها به متغیرها یا توابع جداگانه ، چنین کدی را مجدداً فاکتور می کنیم.

حلقه ها

یکی دیگر از موارد استفاده مکرر ، ارائه لیستی از عناصر تکرار شونده است. با JSX نمی توانید استفاده کنید for حلقه ها ، اما می توانید از طریق یک آرایه تکرار کنید روش نقشه آرایه. به عنوان مثال ، در اینجا یک روش ساده برای ارائه لیست موارد وجود دارد:

const items = [
  'Bread',
  'Milk',
  'Eggs'
]

const element = <div>
  Grocery list:
  <ul>
    {items.map(item => <li>{item}</li>)}
  </ul>
</div>;

ReactDOM.render(element, document.getElementById('root'));

قلم را ببینید
نقشه jsx توسط SitePoint (SitePoint)
بر CodePen.

بدیهی است که شما می توانید از روش های آرایه دیگری در کد نیز استفاده کنید ، و ممکن است ایجاد برخی از منطق های فیلتر یا محاسبات دیگر وسوسه انگیز باشد. تسلیم این موضوع نشوید! اصل تفکیک نگرانی ها را به خاطر بسپارید و این منطق را از کد ارائه جدا کنید. با این کار خواندن ، درک و آزمایش کد شما آسان تر می شود.

اجزای سفارشی

دو بخش آینده بیشتر مربوط به React هستند ، اما هنوز ارزش دارد از طریق آنها صحبت کنید تا درک خوبی از چگونگی همه چیز با هم داشته باشید.

مثالهای کد قبلی بسیار ساده هستند ، زیرا آنها فقط مجموعه کوچکی از عناصر استاندارد HTML را ارائه می دهند. در حقیقت ، برنامه شما از اجزای سفارشی تشکیل شده است که حاوی دیدگاه و منطق خاص برنامه شما خواهد بود. React به شما امکان می دهد اجزای سفارشی را تعریف کنید و از آنها در نشانه گذاری به عنوان عناصر منظم HTML استفاده کنید. یک عنصر سفارشی را می توان به عنوان یک تابع یا یک کلاس ES6 تعریف کرد.

توجه: با توجه به قراردادهای نامگذاری React ، عناصر سفارشی برای تشخیص آنها از عناصر استاندارد باید با یک حرف بزرگ شروع شوند.

function FunctionComponent() {
  return <h2>This is a function component.</h2>
}

class ClassComponent extends React.Component {
  render() {
    return <h2>This is a class component.</h2>
  }
}

const element = <div>
  <FunctionComponent />
  <ClassComponent />
</div>;

ReactDOM.render(element, document.getElementById('root'));

قلم را ببینید
jsx-custom-components توسط SitePoint (SitePoint)
بر CodePen.

مدیریت رویداد

JSX راهی برای اتصال رویدادهایی مشابه HTML معمولی ارائه می دهد. شما می توانید یک ویژگی را روی یک عنصر تعریف کنید (همان نام خاص همان HTML معمولی اما camelCased) و یک تابع را به عنوان مقدار منتقل کنید. در React ، عملکرد برگشت پاسخ a را دریافت می کند SyntheticEvent object به عنوان اولین پارامتر ، که یک انتزاع در بالای شی regular رویداد مرورگر معمولی است:

function handleEvent(e) {
  alert('Button clicked!');
  console.log(e);
}

const element = <button onClick={handleEvent}>Test click</button>;

ReactDOM.render(element, document.getElementById('root'));

قلم را ببینید
jsx-events توسط SitePoint (SitePoint)
بر CodePen.

توجه: به مقدار توجه کنید this هنگام عبور از گردانندگان رویداد. وقتی کامپوننت خود را به عنوان کلاس ES6 تعریف می کنید ، معمولاً کنترل کننده های رویداد را به عنوان متدهای کلاس تعریف می کنید. روش های منتقل شده توسط مقدار به یک خاص محدود نیستند this ارزش ، بنابراین برای حفظ متن فعلی ، شما باید صریحاً آنها را ملزم کنید. دیدن مستندات React برای جزئیات بیشتر در مورد چگونگی انجام این کار.

نه فقط برای واکنش

JSX با React چیزهای بسیار خوبی است. اما اگر از چارچوب یا کتابخانه دیگری استفاده می کنید ، اما همچنان می خواهید از آن استفاده کنید ، چه می کنید؟ خوب ، شما خوش شانس هستید – زیرا JSX از نظر فنی با React گره خورده نیست. هنوز فقط DSL یا “قند نحوی” است ، به یاد دارید؟ در اینجا چند پروژه دیگر که از JSX استفاده می کنند وجود دارد:

• می توانید از JSX در Vue استفاده کنید render عملکرد را با کمک @ vue / babel-preset-jsx بابل از پیش تعیین شده
• برخی از چارچوب های دیگر که خود را به عنوان گزینه های مینیمالیستی سازگار با React مانند ، قرار می دهند دقیق، جهنم یا هایپراپ از JSX برای لایه رندر خود استفاده کنید.
• MDX به شما امکان می دهد تا از JSX در پرونده های Markdown برای افزودن عناصر JS تعاملی استفاده کنید.

امیدوارم این مقدمه در مورد JSX به شما کمک کند تا درک بهتری از اینکه JSX چیست ، چگونه می تواند به شما کمک کند و همچنین چگونه می تواند برای ایجاد برنامه های شما استفاده شود ، داشته باشید. حالا برگردید بیرون و چیزهای جالبی درست کنید!