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

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

React چیست؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<html>
<head>
  <title>Introduction to React library</title>
</head>
<body>
    <div id="root"></div>
 
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/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 همه چیز به عنوان یک جز یا 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/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/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

داده نوع 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/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/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 نوشتید که شامل یک کامپوننت است. مباحث گفته شده شروعی بسیار مختصر برای یادگیری React بود بنابراین، فرقی نمی کند که برنامه نویسی را تازه شروع کرده اید و یا یک برنامه نویس با سابقه هستید؛ قطعا با تلاش می توانید React Native را یاد بگیرید و در زمینه تولید نرم افزار های تحت وب و یا گوشی های هوشمند مشغول به کار شوید.

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

نویسنده

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

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