بخش های اصلی

آموزش ReactJS

ReactJS – JSX

React، برای قالب بندی (templating)، بجای جاوا اسکریپت معمولی، از JSX استفاده می کنه. استفاده از JSX اجباری نیست، ولی استفاده از آن جوانب مثبتی داره.

  •  JSX، سریع تره چون هنگام کامپایل کد به جاوا اسکریپت، بهینه سازی هم انجام میده.
  •  همچنین امن تره و جلوی روی دادن بیش تر خطاها، هنگام کامپایل، گرفته میشه.
  •  اگه با HTML، آشنایی داشته باشین، JSX، نوشتن قالب ها (Template) را سریع تر و ساده تر می کنه.

استفاده از JSX

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

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

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

عناصر تو در تو

اگه می خواین عناصر بیش تری برگردانین (return)، آن ها در یک عنصر container، قرار بدین (wrap). به نحوه ی استفاده از div، به عنوان یک پوشش دهنده (wrapper) برای عناصرِ 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;

react jsx wrapper

خصیصه ها (Attributes)

می توانید از خصیصه های سفارشی خودتان در پراپرتی ها و خصیصه های (attributes) HTML استفاده کنین. برای اضافه کردن خصیصه ی (attribute) سفارشی، باید از پیشوندِ data- استفاده کنین. در مثال زیر، data-myattribute را بعنوان خصیصه (attribute) به عنصرِ p اضافه کردیم.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}

export default App;

عبارت های (Expressions) جاوا اسکریپت

می توان از این عبارت ها در JSX استفاده کرد. باید این عبارت ها را داخل براکت {} بذارین. مثال زیر، 2 را رِندِر (render) میکنه.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}

export default App;

react jsx inline javascript

می توانید از عبارت های if else هم در JSX استفاده کنین ولی نمی توانید از عبارت های شرطیِ سه تایی استفاده کنین. در مثال زیر از آن جایی که 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;

react jsx ternary expression

استایل دادن

React، استفاده از استایل های داخلی را توصیه می کنه. اگه بخواین از استایل های داخلی استفاده کنین باید از دستورِ camelCase استفاده کنین. React، بعد از مقدار عددیِ برخی عناصرِ خاص، بصورت خودکار، px اضافه می کنه. در ادامه نحوه ی اضافه کردن استایل داخلی به عنصرِ h1 از فایلِ myStyle را میبینین.

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;

react jsx inline style

توضیحات (Comments)

برای نوشتن توضیحات باید آن ها را داخل براکت {} بذارین. خوبه که همیشه توضیحات را داخل براکت {} بنویسین.

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;

اصول نامگذاری

تگ های HTML همیشه از نام های با حروف کوچک استفاده می کنن در حالی که کامپوننت هایِ React با حروف بزرگ شروع میشن.

نکته

باید بجای استفاده از نام های class و for، از className و htmlFor، بعنوان نام خصیصه های (attribute) HTML استفاده کنین.

در مورد اصول نامگذاری در صفحه ی اختصاصی React توضیح داده شده.

از آن جایی که JSX، جاوا اسکریپتِه، شناساگرهایی مثل class و for، بعنون نامِ خصیصه های (attribute) XML، نامعتبر هستن. در عوض کامپوننت های React DOM انتظار نام پراپرتی هایی مثل className و htmlFor را دارن.

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد