آموزش Reactjs-آموزش JSX

سلااام بر روز جدید و دوستان قدیم و جدید در ویرگول..

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

در تعریف JSX بصورت مختصر باید بگم که در Reactjs ما می تونیم برای قالب بندی به جای جاوا اسکریپت (JavaScript) از JSX استفاده بکنیم. البته که اجباری در این کار نیست و این تنها یک پیشنهاد سودمند، آن هم به دلیل مزایا JSX است..:)

آموزش JSX در ReactJS

در ReactJS به جای جاوا اسکریپت معمولی جهت قالب بندی از JSX استفاده می کند. اجباری در استفاده از آن وجود ندارد، اما مزایای زیر را به همراه دارد:

• بطور کلی JSX سریع تر است؛ زیرا طی کامپایل کد به جاوا اسکریپت کار بهینه سازی را انجام می دهد.
• اصطلاحا type-safe است و اغلب خطاها را می توان طی کامپایل شناسایی کرد.
• نوشتن قالب ها به شرط آن که با HTML آشنا باشید را آسان تر و سریع تر می کند.

استفاده از JSX در ReactJS
در بسیاری از موارد، JSX شبیه به HTML معمولی است وقبلا در بخش برپا کردن محیط از آن استفاده کرده ایم. به کد App.jsx نگاه کنید، در این کد div برگشت داده می شود.

import React from 'react';

class App extends React.Component {

   render() {

      return (

         < div >

            Hello World!!!

         < /div >

      );

   }

}

export default App;

با وجود این که JSX شبیه به HTML است، اما این دو تفاوت هایی دارند که در زمان کار با JSX باید آن ها را در نظر داشت.

عناصر تو در تو در ReactJS

اگر می خواهید عناصر بیشتری را برگشت دهید، نیاز است که آن را با یک عنصر نگه دارنده بپوشانید. توجه کنید که ما چگونه از div به عنوان یک پوشاننده برای h1، h2 و p استفاده کرده ایم.
App.jsx

import React from 'react';

class App extends React.Component {

   render() {

      return (

         < div >

            < h1 >Header< /h1 >

            < h2 >Content< /h2 >

            < p >This is the content!!!< /p >

         < /div >

      );

   }

}

export default App;

صفات مربوط ReactJS

علاوه بر ویژگی ها و صفت های HTML معمولی می توانیم از صفات اختصاصی مخصوص به خودمان نیز استفاده کنیم. زمانی که می خواهیم صفات اختصاصی را اضافه کنیم باید از پیشوند data- استفاده کنیم. در مثال زیر ما data-myattribute را به عنوان صفتی برای عنصر p اضافه کرده ایم.

import React from 'react';

class App extends React.Component {

   render() {

      return (

         < div >

            < h1 >Header< /h1 >

            < h2 >Content< /h2 >

            < p data-myattribute = &quotsomevalue&quot >This is the content!!!< /p >

         < /div >

      );

   }

}

export default App;

عبارت های جاوا اسکریپت در ReactJS

از این عبارت ها می توان داخل JSX استفاده کرد. تنها کافی است آن را داخل {} قرار دهیم. مثال زیر 2 را نمایش می دهد.

import React from 'react';

class App extends React.Component {

   render() {

      return (

         < div >

            < h1 >{1+1}< /h1 >

         < /div >

      );

   }

}

export default App;

داخل JSX نمی توانیم از دستورات if else استفاده کنیم، در عوض می توانیم از عبارت های شرطی (بر مبنای 3) استفاده کنیم. در مثال زیر متغیر i برابر با 1 است. بنابراین مرورگر true را نمایش می دهد. اگر مقدار این متغیر را تغییر دهیم، مرورگر false را نمایش می دهد.

import React from 'react';

class App extends React.Component {

   render() {

      var i = 1;

      return (

         < div >

            < h1 >{i == 1 ? 'True!' : 'False'}< /h1 >

         < /div >

      );

   }

}

export default App;

سبک بندی در ReactJS

در ReactJS توصیه می شود از سبک های درون خطی استفاده شود. زمانی که می خواهیم این نوع از سبک ها را تنظیم کنیم، نیاز است از سینتکس camelCase استفاده کنیم. ReactJS نیز به صورت خودکار px را پس از مقدار عددی عناصر مشخص می چسباند. در مثال زیر چگونگی اضافه کردن myStyle درون خطی به عنصر h1 نشان داده شده است.

import React from 'react';

class App extends React.Component {

   render() {

      var myStyle = {

         fontSize: 100,

         color: '#FF0000'

      }

      return (

         < div >

            < h1 style = {myStyle} >Header< /h1 >

         < /div >

      );

   }

}

export default App;

کامنت در ReactJS

اگر بخواهیم کامنت نویسی کنیم و بخواهیم این کامنت ها را داخل بخش فرزند یک برچسب بنویسیم، باید از {} استفاده کنیم. بهتر است همیشه در زمان نوشتن کامنت ها از {} استفاده شود، چرا که حفظ ثبات طی برنامه نویسی مهم است.

import React from 'react';

class App extends React.Component {

   render() {

      return (

         < div>

            < h1>Header< /h1>

            {//End of the line Comment...}

            {/*Multi line comment...*/}

         < /div>

      );

   }

}

export default App;

قرارداد نام گذاری در ReactJS

همیشه در برچسب های HTML از اسم های برچسب با حروف کوچک استفاده می شود. این در حالی است که اجزای ReactJS با حرف بزرگ آغاز می شوند.

نکته:

بهتر است که به جای class و for به عنوان اسامی صفات XML از className و htmlFor استفاده شود.

این مطلب در صفحه ی رسمی ReactJS به صورت زیر توضیح داده شده است:
با توجه به این که JSX جاوا اسکریپت است، بهتر است از شناساگرهایی مانند class و for به عنوان اسامی صفات XML استفاده نشود. در عوض بهتر است در اجزای DOM ReactJS به ترتیب از ویژگی هایی مانند className و htmlFor استفاده شود.

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

فردا با یک قسمت جدید برمی گردم..:)