آموزش React Native | ری اکت نیتیو چیست و چه کاربردی دارد؟

 در گذشته از زبان جاوا اسکریپت تنها برای ایجاد تغییراتی مانند تغییر ابعاد، رنگ و فونت نوشته‌ها در طراحی صفحات وب استفاده می‌شد، اما امروزه این زبان توانسته به واسطه استفاده از فریم ورک‌های جدیدی مانند Vue js، React Native، Angular قلمروی خود را در دنیای برنامه نویسی گسترده‌تر کند. ظهور این فریم ورک‌ها در برنامه نویسی وب، مزایا و امکانات زیادی را در اختیار توسعه دهندگان قرار داده است. در این مطلب قصد داریم شما را با یکی از محبوب‌ترین فریم ورک‌های جاوا اسکریپت یعنی React Native و مسیر یادگیری آن آشنا کنیم.

React Native چیست؟

.: دانلود این ویدئو با کیفیت بالا و حجم 13 مگ :.

جاوا اسکریپت (Java Script) یکی از محبوب‌ترین زبان‌های برنامه نویسی است.  React Native یک فریم ورک جاوا اسکریپتی متن باز، رایگان و انعطاف‌پذیر است که به منظور طراحی رابط کاربری مورد استفاده قرار می‌گیرد. فریم ورک یا چارچوب، مجموعه ای از کتابخانه‌ها و قواعد برنامه نویسی است که به برنامه نویسان کمک می‌کند نرم افزارهایی استاندارد، با حجم کد کمتر و امنیت بیشتر توسعه دهند.

 متن باز بودن یک فریم‌ ورک به این معنی است که سورس کد اصلی آن در دسترس عموم قرار دارد و برای استفاده از آن نیازی به دریافت مجوز و یا صرف هزینه نیست. این ویژگی باعث می‌شود که فریم‌ ورک  React Native  به راحتی در اختیار کاربران و توسعه دهندگان مختلف در سراسر جهان قرار گیرد و توسط آن‌ها بررسی شده و در نهایت ارتقا پیدا کند.

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

حال ممکن است برایتان سوال شود که از بین فریم ورک هایی جاوا اسکریپت مانند Angular، Vue و غیره چرا بهتر است به آموزش React Native و استفاده از آن بپردازیم؟ زیرا بررسی‌های انجام شده نشان می‌دهد که react نسبت به سایر فریم ورک‌های جاوا ‌اسکریپت، در بین برنامه نویسان محبوب بیشتری دارد.

همانطور که نمودار بالا مشاهده می‌کنید React Native، انگولار (Angular) و ویو (Vue) جزء برترین فریم ورک‌های جاوا اسکریپت برای طراحی رابط کاربری محسوب می‌شوند. اما سوالی که پیش می‌آید این است که چه ویژگی هایی باعث شده اند تا React Native به یکی از محبوب‌ترین فریم ورک‌ها در دنیای وب تبدیل شود؟ در ادامه چند دلیل محبوبیت این فریم  ورک را با هم بررسی می‌کنیم تا دریابید چرا اکثر برنامه نویسان متقاعد شده اند که به آموزش ری اکت بپردازند؟ برخی از مهمترین دلایل استفاده از ری اکت عبارتند از :

• روان بودن و خوانایی کدها : دستورات لغوی (Syntax) در فریم ورک ری اکت ، بسیار ساده هستند. وجود قوانین و چارچوب هایی مناسب در پیاده سازی این فریم ورک، باعث شده تا کدها از خوانایی خوبی برخوردار باشند.
• آموزش آسان : آموزش ری اکت نیتیو بسیار آسان است و برای یادگیری آن، تنها نیاز به آشنایی با زبان‌های تحت وب یعنی Html ،Css و Java Script خواهید داشت.
• کارایی بالا : React Native برای کاهش پردازش‌های سنگین از چندین تکنیک هوشمند استفاده می‌کند تا بدون انجام کارهای زیاد، رابط کاربری را به روز کند. همچنین چندین راه برای افزایش سرعت برنامه‌ها وجود دارد. React Native قابلیت همزمانی یا real time دارد؛ همزمانی چیزی شبیه به گفتگوی دو نفر است که یکی می‌پرسد و دیگری جواب می‌دهد، یعنی گاهی کاربر درخواست می‌فرستد و گاهی هم سرور این کار را انجام می‌دهد.
• تست پذیری : یکی از موارد بسیار مهم برای توسعه دهندگان، تست نرم افزار است که باعث پیدا کردن اشکالات در تولید نرم افزار می‌شود. از دیگر مزایای تست نرم افزار می‌توان به تضمین رضایت، اعتماد مشتری به برنامه و اطمینان از کیفیت محصول اشاره کرد. بدین منظور ری اکت ابزارهای مفیدی همچون Enzyme، Jest و ... را ارائه کرده است.

ری اکت نیتیو یا انگولار؟ مسئله این است

تا اینجا درباره فریم ورک React Native صحبت کردیم، اما بد نیست سراغ بررسی یکی دیگر از فریم ورک‌های محبوب جاوا اسکریپت نیز برویم تا راحت‌تر بتوانید آن‌ها را با یکدیگر مقایسه کرده و برای یادگیری هر کدام تصمیم بگیرید.

توسعه دهندگان رابط کاربری از فریم ورک‌های مختلفی برای توسعه استفاده می‌کنند. برای انتخاب فریم ورک مورد نظر، ممکن است سوالاتی برای شما پیش بیاید مانند اینکه: نحوه پشتیبانی از این فریم ورک توسط شرکت مربوطه چگونه است؟ این فریم ورک‌ها چه ویژگی هایی در اختیار شما قرار می‌دهند و از نظر برنامه نویسان میزان محبوبیت و راحتی استفاده از آن‌ها چقدر است؟ و بسیاری سوالات دیگر که پاسخ به آن‌ها می‌تواند شما را در انتخاب بهترین‌ترین فریم ورک راهنمایی کنند.

انگولار همانند ری اکت نیتیو یک فریم ورک جاوا اسکریپتی متن باز است که در طراحی رابط کاربری استفاده می‌شود. این فریم ورک در سال 2010 توسط برنامه نویسان گوگل ایجاد شد که در چند پروژه مهم نیز از آن استفاده کردند. در مقابل ری اکت توسط فیس بوک در سال 2011 معرفی شد. از این فریم ورک در پروژه‌های بسیار بزرگی استفاده شده است، پروژه هایی که ممکن است روزانه با آن‌ها سر و کار داشته باشید. به عنوان مثال می‌توان به اپلیکیشن هایی مثل واتس اپ و اینستاگرام اشاره کرد که با استفاده از ری اکت ایجاد شده اند.

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

همانطور که اشاره شد اولین قدم در آموزش React Native این است که با زبان‌های توسعه وب مانند Html، Css و مخصوصا Java Script به خوبی آشنا باشید. برنامه نویسانی که رابط کاربری طراحی می‌کنند آمادگی بیشتری برای آموزش ری اکت نیتیو دارند. اما برای آموزش انگولار باید مفاهیم جدید بیشتری را نسبت به ری اکت نیتیو یاد بگیرید.

اولین اولویت در آموزش انگولار ، یادگیری زبان تایپ اسکریپت (Type Script) است. این زبان در حقیقت همان نسخه توسعه یافته زبان جاوا اسکریپت محسوب می‌شود و قابلیت شیءگرایی را با دقت بالایی پشتیبانی می‌کند. در Angular مفاهیمی چون MVC (سرویس ها، مدل‌ها و نمایش ویو) به مراتب پیچیده‌تر از ری اکت است. مجموعه این عوامل دست به دست هم می‌دهند تا برای یادگیری این فریم ورک، به زمان بیشتری نیاز داشته باشید.

مقایسه React Native و Java برای طراحی اپلیکیشن موبایل

در این بخش از مطلب قصد داریم به بررسی توانایی‌های زبان جاوا اسکریپت برای توسعه اپلیکیشن‌های موبایل بپردازیم. React Js یکی از کتابخانه‌های جاوا اسکریپت است، اما React Native یکی از فریم ورک‌های جاوا اسکریپت است که از React Js استفاده می‌کند.

برای توسعه اپلیکیشن‌های سیستم عامل اندروید از زبان جاوا و برای توسعه اپلیکیشن‌های سیستم عامل ios از زبان سوییفت (Swift) استفاده می‌شود. در حالیکه React Native می‌تواند در توسعه هر دو سیستم عامل مورد استفاده قرار گیرد. حال با وجود ری اکت نیتیو این سوال پیش می‌آید که برای توسعه اپلیکیشن‌های موبایل، آموزش ری اکت را دنبال کنیم یا به سمت یادگیری جاوا یا سوییفت برویم؟

در یک مقایسه کلی می‌توان گفت کار با ری اکت ساده‌‌تر از جاوا است مخصوصا اگر آشنایی چندانی با زبان جاوا ندارید، مسیر یادگیری React می‌تواند برای شما بسیار سریع‌تر باشد. همچنین React به منابع کمتری نیاز دارد زیرا بخش اندروید و ios را از یکدیگر جدا نمی‌کند. از طرفی اندروید و ios هر کدام مدل‌های طراحی متفاوتی دارند که برنامه نویسان react را مجبور به کدنویسی مجدد این بخش‌ها می‌کند. این کار برای ios سخت‌تر است زیرا کمپانی اپل به طور پیوسته تکنولوژی‌های خود را به روزرسانی می‌کند.

تفاوت بعدی در این است که جاوا و سوییفت ، زبان‌های کامپایلری (Compiled Languages) هستند، در حالیکه جاوا اسکریپت زبانی تفسیری (Interpreted) است. به عنوان مثال اگر تغییری در مقدار و نوع تعریف متغیرها در کدهای جاوا اسکریپت شما ایجاد شود و متوجه این اتفاق نباشید، کامپایلری وجود ندارد که که جلوی این کار را بگیرد.

 آموزش رایگان React Native

همانطور که تا به حال گفته شد، ری اکت نیتیو مزایای زیادی دارد و می‌تواند به فریم ورک محبوب شما تبدیل شود. برای یادگیری ری اکت  نیتیو آشنایی با مفاهیم شی گرایی و زبان‌های CSS، HTML و JS بسیار به شما کمک می‌کنند. حال اگر آماده یادگیری آن هستید، در این قسمت قدم به قدم پیش می‌رویم و آموزش React Native را با یک برنامه خیلی ساده شروع می‌کنیم تا با مفاهیم اولیه آن آشنا شوید.

در ابتدای کار، کتابخانه موردنظر را با تگ Script و به طور مستقیم وارد کد Html کنید. بنابراین یک فایل به نام index.html ساخته و کدهای زیر را در آن وارد کنید:

<html>
<head>
  <title>Introduction to React library</title>
</head>
<body>
    <div id="root"></div>
 
    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <script type="text/babel">
    
    /* 
    ADD REACT CODE HERE 
    */
    
    </script>
</body>
</html>

همان طور که می‌بینید در این برنامه فایل‌های react، React DOM و Babel را بارگذاری کردیم. بارگذاری کتابخانه react به این دلیل است که react مستقل از مرورگر عمل می‌کند و خارج از آن نیز فعال است، به همین دلیل کتابخانه reactDOM را نیز بارگذاری می‌کنیم تا بتواند react را در مرورگرهای مختلف پشتیبانی کند. علت لود کردن Babel هم این است که React از تکنولوژی JSX استفاده می‌کند که این تکنولوژی، به شما اجازه می‌دهد از کدهای Html درون کدهای Java Script استفاده کنید. Babel کدهای JSX را به کدهای Js تبدیل می‌کند تا مرورگر متوجه آن‌ها بشود.

تمام کدهای مربوط به React در یک div با id=”root” قرار می‌گیرند. در انتها یک تگ به صورت زیر قرار گرفته که در این قسمت می‌توانید کدهای مربوط به React را بنویسید. <"script type=”text/babel>

آموزش کار با Components در React Native

در React Native همه چیز به عنوان یک جز یا Component در نظر گرفته می‌شود. برای درک بهتر این موضوع کد زیر را مشاهده کنید:

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

در اینجا یک component به نام Hello ساختیم که از React.Component ارث بری می‌کند. ارث بری به این معنی ست که کلاس Hello، می‌تواند ویژگی‌های کلاس پدر یعنی React.Component را داشته باشد. درون این Component می‌توان توابع دلخواهی قرار داد که در اینجا تابع ()render را داریم. این تابع می‌تواند متن دلخواه ما را روی صفحه نمایشگر نشان دهد.

در مثال بالا تعیین می‌کنیم که خروجی، نوشته Hello World با تگ h2 باشد. کد JSX بسیار شبیه Html است اما تفاوت هایی دارد. کد JSX مثال بالا به این شکل است:

class Hello extends React.Component {
    render() {
        return React.createElement(
            "h1",
            null,
            "Hello world!"
        );
    }
}

حال برای نشان دادن Component تولید شده در مرورگر، باید از متد یا تابع ()render مربوط به ReactDOM استفاده کرد:

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

همانطور که در کد بالا پیداست، تابع render دو ورودی می‌گیرد. ورودی اول همان Component ساخته شده است و ورودی دوم مشخص می‌کند که قصد داریم کدها را در کدام قسمت از صفحه خروجی بگیریم. در واقع به ReactDOM اعلام می‌کنیم که از این کد، در div با id=”root” خروجی بگیرد. تا این مرحله، کد کامل شده به صورت زیر است:

<html>
<head>
  <title>Introduction to React library</title>
</head>
<body>
    <div id="root"></div>
 
    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <script type="text/babel">
      class Hello extends React.Component {
        render() {
          return <h1>Hello world!</h1>;
        }
      }
 
      ReactDOM.render(
        <Hello />, 
        document.getElementById("root")
      );
    </script>
</body>
</html>

اگر کد بالا را اجرا کنید، خروجی به این شکل خواهد بود:

آشنایی با انواع داده در React Native

داده نوع Props

یکی از ویژگی‌های React قابلیت Reusability یا استفاده مجدد از کامپوننت‌های آن است. به این معنی که شما می‌توانید یک کامپوننت تعریف کرده و هرجا که لازم بود، از آن استفاده کنید. برای این کار باید از Props استفاده کنیم که نوعی داده خارجی (External) است و نمی‌توان توسط کامپوننت‌ها آن را مدیریت کرد. Props داده ای ست که از کامپوننت‌های بالاتر، به کامپوننت‌های پایین‌تر فرستاده می‌شود و هر کامپوننت فقط امکان نمایش اطلاعات آن را دارد. کد زیر را بینید:

ReactDOM.render(
    <Hello message="my friend" />, 
    document.getElementById("root")
);

به تابع render() که قبلا تعریف شده بود، یک ویژگی به نام message اضافه کردیم که مقدار آن “my friend“ است. به این شکل می‌توان یک Prop را تعریف کرد و درون کامپوننت به آن دسترسی داشت. برای اینکه در کامپوننت Hello به Prop دسترسی داشته باشیم باید از this.props.message استفاده کنیم:

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

دقت کنید که Props موردنظر را درون {} قرار دادیم، زیرا یک کد جاوا اسکریپت را درون کدهای JSX گذاشتیم و یک کامپوننت پویا (Dynamic) ساختیم. اگر این کار را انجام نمی‌دادیم، Props یک رشته استاتیک در نظر گرفته می‌شد. از Props مورد نظر در کد، به جای کلمه world استفاده کردیم. حال خروجی ما در مرورگر به این شکل خواهد بود:

اما گفتیم که Props توسط کامپوننت‌ها قابل کنترل نیست. پس اگر نیاز به تغییر داده‌ها در هر کامپوننت داریم بهتر است از State استفاده کنیم.

آشنایی با داده نوع State

State نوعی داده شخصی (Private) است که از آن برای ذخیره اطلاعات استفاده می‌کنیم و درون هر کامپوننتی که تعریف شود، فقط توسط آن قابل دسترسی و کنترل است. بنابراین اگر نیاز به تغییر اطلاعات در یک کامپوننت دارید بهتر است از State استفاده کنید.

که State را درون یک کلاس کامپوننت تعریف می‌کنیم. برای مقداردهی آن نیز می‌توان از تابع Constructor همان کلاس استفاده کرد. کد زیر را ببینید:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'my friend (from state)!',
    };
  }
 
  render() {
    return <h1>Hello {this.state.message}!</h1>;
  }
}

می بینید که درون Constructor از عبارت (Super (props استفاده کردیم. در مواردی که یک Component را از طریق ارث بری از React.Component می‌سازید، برای نوشتن کد در Constructor باید در ابتدای آن عبارت (Super (props را قرار دهیم.

در غیر این صورت به کلمه کلیدی this و سایر توابع کلاس والد یعنی React.Component دسترسی نداریم. برای دسترسی به State در تابع ()render نیز از عبارت this.state.message استفاده می‌کنیم تا متن موردنظر در خروجی نمایش داده شود.

برای تغییر دادن State در ری اکت نیتیو می توانید از عبارت this.setState استفاده کنید و مقدار جدیدی برای آن تعیین کنید. در کد زیر یک تابع به نام UpdateMessage ایجاد می‌کنیم تا در صورت فراخوانی، متن پیام را تغییر دهد:

class Hello extends React.Component {
   constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
 
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
 
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

همان طور که می‌بیند درون تابع UpdateMessage متن را تغییر دادیم تا در صورت فراخوانی این تابع، متن جدید نمایش داده شود. اما برای اینکه تابع اجرا شود، باید توسط کلمه this تابع را به Constructor معرفی کنیم (bind).در مرحله بعد یک دکمه درون DOM قرار می‌دهیم تا درصورت کلیک کردن آن، تابع UpdateMessage فراخوانی شود. برای این کار تابع ()render را به شکل زیر تغییر می‌دهیم:

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>   
  )
}

برنامه شما در پایان آموزش، به این شکل است:

<html>
<head>
  <title>Introduction to React library</title>
</head>
<body>
    <div id="root"></div>
 
    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    <script type="text/babel">
      class Hello extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            message: 'my friend (from state)!',
          };
 
          this.updateMessage = this.updateMessage.bind(this);
        }
 
        updateMessage() {
          this.setState({
            message: 'my friend (from changed state)!',
          });
        }
 
        render() {
          return (
            <div>
              <h1>Hello {this.state.message}!</h1>
              <button onClick={this.updateMessage}>Click me!</button>
            </div>
          );
        }
      }
 
      ReactDOM.render(
        <Hello />, 
        document.getElementById("root")
      );
    </script>
</body>
</html>

همین الان شروع کنید

تبریک می‌گوییم! شما اولین برنامه خود را با React Native نوشتید که شامل یک کامپوننت است. مباحث گفته شده شروعی بسیار مختصر برای یادگیری React Native بود بنابراین، فرقی نمی‌کند که برنامه نویسی را تازه شروع کرده اید و یا یک برنامه نویس با سابقه هستید؛ قطعا با تلاش می‌توانید React Native را یاد بگیرید و در زمینه تولید نرم افزار‌های تحت وب و یا گوشی‌های هوشمند مشغول به کار شوید.

 سون لرن در این مسیر همراه شماست و تلاش می‌کند آموزش React Native را برای شما راحت کند. منتظر آموزش‌های بعدی ما باشید.

نویسنده

ریحانه یزدانی

شاید به ساخت یک اثر هنری فکر کنیم و یا بخواهیم بلندترین قله ها را فتح کنیم؛ ما هنوز نمی دانیم از زندگی چه چیزی را بیشتر از همه می خواهیم. پس هر کاری که از دستتان بر می آید برای زندگی انجام دهید و سرانجام قلب تان، این انتخاب بزرگ را انجام خواهد داد...