آموزش مقدماتی نحوهٔ کار با لایبرری اپن‌سورس React

React یک لایبرری جاوااسکریپتی توسعهٔ رابط کاربری (UI) است که توسط فیسبوک به صورت اپن‌سورس عرضه شده است که در سرویس‌های مطرحی همچون Uber ،Instagram ،Facebook و ... مورد استفاده قرار گرفته است که برای کسب اطلاعات بیشتر، می‌توانید به مقاله React و React Native: معرفی، کاربردها و مزایا مراجعه نمایید.

به منظور آنکه سرعت فراگیری نحوهٔ توسعهٔ رابط کاربری با لایبرری ریئکت افزایش یابد، علاقمندان می‌باید دانش نسبتاً خوبی در ارتباط با موارد زیر داشته باشند:

- زبان‌های HTML و CSS
- زبان JS (به‌خصوص نسخهٔ ES6)
- آشنایی با سازوکار DOM
- دانش پایه‌ای با NodeJS و NPM

جهت آشنایی با فیچرهای نسخهٔ ES6، توصیه می‌کنیم به مقالهٔ دورهٔ آموزشی رایگان ES6 مناسب برای دولوپرهای فرانت‌اند و بک‌اند مراجعه نمایید. همچنین جهت آشنایی با نودجی‌اس نیز می‌توانید به مقالهٔ‌ Node.js (نودجی‌اس) چیست؟ مراجعه نمایید.

آشنایی با ابزار Create React App

لازم به یادآوری است که ریئکت را هم می‌توان به پروژه‌های قدیمی که در توسعهٔ آن‌ها از دیگر لایبرری‌های جاوااسکریپتی همچون جی‌کوئری به کار گرفته شده استفاده نمود و هم می‌توان آن را در پروژه‌های جدیدی همچون Single-Page Application یا به اختصار SPA که از پایه بر مبنای ریئکت خواهند بود مورد استفاده قرار داد (منظور از اصطلاح SPA سایت‌های تک‌صفحه‌ای است که اکثر تعاملات کاربر با سرویس از طریق یک یا چند صفحهٔ اصلی انجام می‌شود.)

چنانچه بخواهیم یک پروژهٔ جدید بر پایهٔ لایبرری ریئکت توسعه دهیم اما در عین حال خود را خیلی درگیر کانفیگ و نصب وابستگی‌ها نکنیم، می‌توانیم از ابزاری تحت عنوان Create React App استفاده کنیم که توسط فیسبوک به صورت اپن‌سورس در اختیار توسعه‌دهندگان گذاشته شده است. با استفاده از این ابزار، دیگر نیازی به درگیر شدن با نحوهٔ نصب وابستگی‌ها، ابزارهای بیلد، ابزارهای بهینه‌سازی سورس‌کد و ... نخواهید داشت. در واقع، با استفاده از این ابزار جهت ساخت پروژه‌های ریئکت، ابزارهایی همچون Webpack و Babel به صورت خودکار نصب و کانفیگ می‌شوند و همین مسئله می‌تواند سرعت توسعهٔ اپ با این لایبرری را افزایش دهد.

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

راهنمای نصب NodeJS و NPM روی سیستم‌عامل اوبونتو

در ادامه، آموزشی خلاصه به منظور نصب ابزارهای فوق‌الذکر روی سیستم‌عامل گنو/لینوکس توزیع اوبونتو ارائه خواهیم کرد. پیش از هر چیز نیاز است تا ریپازیتوری‌های سیستم‌عامل خود را با استفاده از کامند زیر آپدیت نماییم:

$ sudo apt-get update

سپس کامند زیر منجر به نصب آخرین نسخهٔ باثبات موجود در ریپازیتوری‌های اصلی سیستم‌عامل اوبونتو می‌شود که در حین نگارش این مقاله 8.10.0 است:

$ sudo apt-get install nodejs

به منظور اطمینان حاصل کردن از نصب موفقیت‌آمیز نودجی‌اس، می‌توان کامند زیر را اجرا کرد:

$ nodejs -v

حال نوبت به نصب اصطلاحاً Package Manager اختصاصی نودجی‌اس تحت عنوان NPM می‌رسد که با استفاده از کامند زیر امکان‌پذیر است:

$ sudo apt-get install npm

مجدداً جهت حصول اطمینان از نصب صحیح این ابزار، می‌توان کامند زیر را به کار برد که در حین تألیف این آموزش، نسخهٔ نصبی ان‌پی‌ام برابر با 3.5.2 است:

$ npm -v

در این مرحله از کار، ابزارهای مورد نیاز جهت نصب Create React App را در اختیار داریم که در ادامه با نحوهٔ نصب خودِ این ابزار نیز آشنا خواهیم شد. برای این منظور، کامند زیر را در محیط ترمینال وارد می‌نماییم:

$ sudo npm install -g create-react-app

آپشن g- برگرفته از واژهٔ Globally به معنای تحت‌الفظی «سراسری» است و این تضمین را ایجاد می‌کند که از هر کجای سیستم به ابزار create-react-app دسترسی داشته باشیم. به طور مثال، وارد مسیر دلخواهی همچون var/www/ شده و کامند زیر را وارد می‌نماییم:

$ sudo create-react-app hello-world

با اجرای کامند فوق، پوشه‌ای تحت عنوان hello-world با ساختاری به صورت زیر ایجاد خواهد شد که حاوی کلیهٔ وابستگی‌های مورد نیاز برای ساخت یک سایت تک‌صفحه‌ای با استفاده از لایبرری ریئکت است:

hello-world
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

حال با استفاده از دستور cd hello-world وارد پوشهٔ پروژه شده سپس کامند زیر را اجرا می‌نماییم:

$ npm start

این کامند منجر به ایجاد یک سرور لوکال پیش‌فرض در مسیر http://localhost:3000 شده و اپلیکیشن را داخل مرورگر باز می‌کند. آنچه در مورد Create React App بسیار جالب‌توجه است اینکه به محض اِعمال تغییرات در سورس‌کد و ذخیره کردن آن‌ها، بدون نیاز به رِفرش کردن مرورگر، اپلیکیشن به صورت خودکار آپدیت خواهد شد!

در عین حال، ممکن است در حین ذخیره کردن تغییرات در سیستم‌عامل اوبونتو به مشکل پرمیشن (مجوز) برخورید که برای این منظور می‌توان از کامند زیر به منظور دادن پرمیشن کامل به کلیهٔ فایل‌های پروژه استفاده نمود:

$ sudo chmod -R 777 hello-world

کاری که کامند فوق انجام می‌دهد این است که پرمیشن کامل (777) به کلیهٔ‌ فایل‌ها و فولدرهای پوشهٔ مد نظر خواهد داد. به طور مثال، وارد پوشهٔ src شده سپس فایل App.js را داخل ادیتور دلخواه خود باز می‌کنیم و تگ پاراگراف موجود را به صورت زیر تغییر می‌دهیم:

<p>
    In the name of the most high.
</p>

به محض سِیو کردن تغییرات، اگر به تبی از مرورگر که اپلیکیشن داخل آن فعال است برویم، خواهیم دید که بدون نیاز به رِفرش کردن صفحه، تغییرات قابل‌مشاهده‌اند.

آشنایی با نحوهٔ افزودن ریئکت به یک پروژهٔ قدیمی

پیش از این گفتیم که به منظور استفاده از این لایبرری محبوب حتماً ملزم به استفاده از Create React App نیستیم بلکه می‌توانیم با افزودن ریئکت به پروژه‌های قدیمی خود، شروع به استفاده از آن نماییم که در همین راستا ادامهٔ این آموزش را بر همین اساس پیش خواهیم برد.

در واقع، شاید نیاز داشته باشیم که از ریئکت فقط در بخش کوچکی از سایت خود و صرفاً در یکسری از صفحات خاص‌اش استفاده کنیم و از همین روی این امکان برای‌مان فراهم شده تا با ایمپورت کردن حداقل اسکریپت‌های مورد نیاز، شروع به افزودن فیچرهای جدیدی با استفاده از لایبرری ریئکت به سایت خود نماییم. برای شروع، یک صفحهٔ اچ‌تی‌ام ساده با نامی دلخواه همچون index.html به صورت زیر می‌سازیم:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body></body>
</html>

حال نیاز است تا در بخش هِد این صفحه، اسکریپت‌های مورد نیاز را بارگذاری نماییم که برای این منظور داریم:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    </head>
    <body></body>
</html>

در ارتباط با کدهای فوق ممکن است این سؤال پیش آید که «چرا دو فایل مختلف ایمپورت شده‌اند؟» که در پاسخ به این پرسش باید گفت که اسکریپت react.js هستهٔ اصلی لایبرری React است و از آنجایی که این لایبرری در ابزارهای دیگری از جمله React Native به منظور توسعهٔ اپ‌های موبایل با استفاده از این لایبرری نیز مورد استفاده قرار گرفته است، توسعه‌دهندگان این لایبرری کامپوننت‌های اصلی را مجزا ساخته‌اند و این در حالی است که به منظور استفاده از ریئکت برای طراحی رابط کاربری سایت، نیاز به اسکریپت تکمیلی این هسته تحت عنوان react-dom.js داریم؛ فلذا آن را نیز در صفحهٔ مد نظر خود بارگذاری کرده‌ایم.

لازم به یادآوری است که این دو اسکریپت را با استفاده از شبکهٔ توزیع محتوا یا اصطلاحاً CDN بارگذاری کرده‌ایم اما در عین حال می‌توان این اسکریپت‌ها را دانلود نموده و به صورت لوکال نیز بار‌گذاری کرد اما مزیت استفاده از شبکهٔ توزیع محتوا آن است که همواره به آخرین نسخه از این لایبرری دسترسی خواهیم داشت (در همین راستا، توصیه می‌کنیم به مقالهٔ JsDelivr | Cdnjs | Google Libraries | Microsoft CDN: چهار CDN برای میزبانی پروژه‌های اپن‌سورس مراجعه نمایید.)

در ادامه، داخل تگ‌های <body></body> یک تگ دلخواه اما حاوی یک شناسهٔ خاص مثلاً <div id="wrapper"></div> قرار می‌دهیم تا بعداً با استفاده از ریئکت بتوانیم آن را مقداردهی کنیم:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    </head>
    <body>
        <div id="wrapper"></div>
        <script>
            ReactDOM.render(
                React.createElement('h1', null, 'Hello World'),
                document.getElementById('wrapper')
            );
        </script>
    </body>
</html>

چنانچه صفحه را رِفرش کنیم، خواهیم دید که استرینگ «Hello World» نمایش داده می‌شود. در تفسیر کد فوق می‌توان گفت که ابتدا یک جفت تگ <script></script> ایجاد کرده سپس فانکشن ()ReactDOM.render را نوشته‌ایم که این وظیفه را دارا است تا اِلِمانی را به عنوان ورودی گرفته و آن را به DOM مرتبط نماید. در پاسخ به این پرسش که «چگونه می‌توان برایش یک اِلِمان تعریف کرد؟» باید گفت که ()React.createElement این وظیفه را بر عهده دارد به طوری که سه پارامتر ورودی می‌گیرد و در نهایت یک اِلِمان اچ‌تی‌ام‌ال ریترن می‌کند (Document Object Model یا به اختصار DOM اینترفیسی در ارتباط با صفحات وب است که این امکان را در اختیار سایر زبان‌ها همچون جاوااسکریپت می‌گذارد تا به اجزای مختلف یک صفحه دسترسی یافته و آن‌ها را تغییر دهد.)

اولین پارامتر ()React.createElement تایپ یا نوع اِلِمانی است که قصد داریم تولید کنیم که در مثال فوق می‌خواهیم یک تگ h1 ایجاد نماییم؛ پارامتر دوم پراپرتی‌های تگ مد نظر است و از آنجا که در این نمونه قصد نداریم هیچ‌گونه پراپرتی خاصی در نظر بگیریم، مقدار null را در نظر گرفته‌ایم و در نهایت به پارامتر سوم می‌رسیم که مرتبط با مقداری است که تگ مذکور باید نمایش دهد که در این مثال استرینگ «Hello World» در نظر گرفته شده است اما در عین حال به خاطر داشته باشید که به جای نمایش یک استرینگ، می‌توان اِلِمان‌های دیگری را به عنوان زیرشاخهٔ تگی که ایجاد کرده‌ایم ایجاد کرد که در ادامهٔ آموزش نحوهٔ انجام این کار را مورد بررسی قرار خواهیم داد.

آشنایی با مفهوم کامپوننت در لایبرری React

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

برای ساخت یک کامپوننت در محیط ریئکت، ابتدا یک فایل جاوااسکریپتی با نامی دلخواه همچون app.js داخل فولدر پروژهٔ خود ساخته و آن را هم داخل فایل اچ‌تی‌ام‌ال اصلی ایمپورت می‌کنیم. در واقع، هم فایل index.html و هم فایل app.js هر دو می‌باید داخل یک پوشه باشند تا اسکریپت‌هایی جاوااسکریپتی که می‌نویسم به درستی اجرا شوند. حال فایل اچ‌تی‌ام‌ال خود را به صورت زیر تغییر می‌دهیم:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    </head>
    <body>
        <div id="wrapper"></div>
    </body>
    <script src="app.js"></script>
</html>

همان‌طور که ملاحظه می‌شود، کدهای جاوااسکریپت قبلی را حذف نموده و در عوض فایلی تحت عنوان app.js را به صفحهٔ خود ایمپورت کرده‌ایم. اکنون نوبت به نوشتن اولین کامپوننت خود با استفاده از ریئکت می‌رسد که برای این منظور کدهای زیر را داخل فایل app.js می‌نویسیم:

var elementObject = React.createElement;
var items =
elementObject('div', null,
    elementObject('h1', null, 'Section Title'),
    elementObject('p', null, 'Sample Paragraph'),
    elementObject('a', {href: 'mailto:example@mail.com'}, 'Sample Link'),
);

const containerElement = document.getElementById('wrapper');
ReactDOM.render(items, containerElement);

پس از ذخیره کردن فایل و رِفرش کردن صفحه، می‌بینیم که محتوای اچ‌تی‌ام‌ال جدیدی در معرض دیدمان قرار می‌گیرد. در تفسیر کامپوننت فوق باید گفت که پیش از هر چیز یک آبجکت تحت عنوان elementObject از روی React.createElement ساخته‌ایم که مسئول ایجاد اِلِمان‌‌های اچ‌تی‌ام‌ال است. سپس متغیری تحت عنوان items ایجاد کرده که مقدارش برابر با چندین و چند بار استفاده از آبجکت elementObject می‌باشد.

آرگومان ابتدایی اولین آبجکت elementObject یک تگ div است، آرگومان دوم null است چرا که قصد نداریم هیچ‌گونه پراپرتی‌ای برای این تگ در نظر بگیریم و همان‌طور که پیش از این اشاره کردیم، در این نمونه کامپوننت به عنوان آرگومان سوم از سه آبجکت دیگر استفاده کرده‌ایم که همگی داخل تگ فوق قرار می‌گیرند که از این سه آبجکت، مورد اول یک تگ h1 است که حاوی مقداری دلخواه همچون «Section Title» است، مورد دوم یک تگ p است که حاوی مقدار «Sample Paragraph» است و مورد سوم هم یک تگ a است که عنوانی همچون «Sample Link» برایش در نظر گرفته شده است. همان‌طور که ملاحظه می‌شود، بر خلاف سایر آبجکت‌ها، آرگومان ورودی مرتبط با پراپرتی‌های این آبجکت مقداردهی شده است به طوری که کلیدی تحت عنوان href با مقدار mailto:example@mail.com در نظر گرفته‌ایم که باعث می‌گردد اتریبوت href لینک مد نظر با ارجاع به یک ایمیل فرضی ایجاد گردد.

در ادامه، کانستنتی تحت عنوان containerElement ایجاد کرده‌ایم که مقدارش برابر با ('document.getElementById('wrapper می‌باشد و کاری که این متد انجام می‌دهد آن است که به اِلِمانی روی صفحه که دارای شناسهٔ wrapper است ارجاع می‌دهد. در نهایت هم متد ()render از ReactDOM را فراخوانی کرده و به عنوان آرگومان اول متغیر items را پاس داده‌ایم و به عنوان آرگومان دوم هم کانستنت containerElement را در نظر گرفته‌ایم که باعث می‌گردد محتوای متغیر items به containerElement منتسب گردد و همین می‌شود که روی صفحهٔ اچ‌تی‌ام‌ال خود شاهد محتوای جدیدی می‌شویم.

این مدل از کدنویسی در ریئکت را شاید بتوان ساده‌ترین راه ساخت کامپوننت قلمداد کرد و این در حالی است که راه‌کارهای به مراتب پیشرفته‌تر و در عین حال انعطاف‌پذیرتری نیز وجود دارند. به عنوان مثال، یک راه دیگر ساخت کامپوننت استفاده از کلیدواژهٔ function است به طوری که خواهیم داشت:

var elementObject = React.createElement;
function showSomething() {
    return elementObject("p", null, "Sample Paragraph");
}
const containerElement = document.getElementById('wrapper');
ReactDOM.render(elementObject(showSomething), containerElement);

همان‌طور که ملاحظه می‌شود، فانکشنی تعریف کرده‌ایم تحت عنوان ()showSomething که قرار است آبجکت elementObject را ریترن کند با این توضیح که تگ p به عنوان آرگومان اول این آبجکت و مقدار «Sample Paragraph» به عنوان آرگومان سوم‌اش در نظر گرفته شده‌اند. همچنین نیاز به توضیح است که به عنوان آرگومان اول متد ()ReactDOM.render ابتدا آبجکت elementObject را نوشته سپس فانکشن فوق‌الذکر را به عنوان آرگومان به آن پاس داده‌ایم.

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

var elementObject = React.createElement;
class MyClass extends React.Component {
    render() {
        return elementObject(
            "p",
            {style: {color: '#ffde57'}},
            "Sample Paragraph"
        );
    }
}
const containerElement = document.getElementById('wrapper');
ReactDOM.render(elementObject(MyClass), containerElement);

در واقع،‌ بر اساس استاندارد ES6 کلاسی ساخته‌ایم تحت عنوان MyClass و از آنجا که قصد داریم یک کامپوننت بسازیم، این کلاس نیاز است تا از روی کلاس Component لایبرری ریئکت ارث‌بری کند. داخل این کلاس صرفاً یک فانکشن تحت عنوان ()render داریم که همچون مثال‌های گذشته، این وظیفه را دارا است تا elementObject را به همراه آرگومان‌های ورودی‌اش ریترن کند با این تفاوت که این بار به عنوان آرگومان دوم آبجکت elementObject از علائم {} استفاده کرده‌ایم بدین صورت که حاوی کلیدی تحت عنوان style است که مقدار این کلید مجدد یک جفت علامت {} است که کلیدش color و مقدارش کد هگزادسیمالی به این رنگ است. در پایان هم (elementObject(MyClass را به عنوان آرگومان اول ()ReactDOM.render در نظر گرفته‌ایم که در این مرحله چنانچه فایل را سِیو کرده و صفحه را رِفرش نماییم، خواهیم دید که یک تگ p حاوی عبارت «Sample Paragraph» نمایش داده خواهد شد.

آشنایی با مفهوم JSX

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

JavaScript XML یا به اختصار JSX یک سینتکس خاصی است که شبیه به XML/HTML می‌باشد که توسط لایبرری ریئکت استفاده می‌شود تا این امکان در اختیار دولوپرها قرار گیرد تا بتوانند کدهایی شبیه به اچ‌تی‌ام‌ال یا اکس‌ام‌ال داخل اسکریپت‌های جاوااسکریپتی خود درج نمایند. به عنوان یک مثال ساده از جی‌اس‌اکس داریم:

const element = <h1>Hello  world</h1>;

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    </head>
    <body>
        <div id="wrapper"></div>
        <script>
            const name = 'Behzad Moradi';
            const element = <h1>Hello {name}</h1>;
            ReactDOM.render(
                element,
                document.getElementById('wrapper')
            );
        </script>
    </body>
</html>

در صورتی که کدهای فوق را داخل مرورگر اجرا کنیم،‌ داخل کنسول مرورگر خواهیم دید که ارور Uncaught SyntaxError: Unexpected token در معرض دیدمان قرار می‌گیرد که این ارور حاکی از آن است که سیتنکس جی‌اس‌اکس توسط موتور رندرینگ مرورگرمان شناخته نمی‌شود که برای رفع این مشکل، نیاز است تا کدها را به گونه‌ای کامپایل کنیم که برای مرورگر قابل‌فهم باشند که در همین راستا نیاز است تا با نحوهٔ کار با ابزاری تحت عنوان Babel آشنا شویم.

Babel چیست؟

Babel یک کامپایلر جاوااسکریپتی است که به منظور تبدیل کدهای نوشته‌شده با استاندارد ES6 به بالا به نسخه‌های قدیمی‌تر جاوااسکریپت که توسط اکثر مرورگرها ساپورت می‌شوند مورد استفاده قرار می‌گیرد. یکی دیگر از کاربردهای این کامپایلر تبدیل جی‌اس‌اکس به سینتکس استاندارد جاوااسکریپت است که به سادگی می‌تواند توسط مرورگر پردازش گردد.

حال با این توضیحات، به منظور درست نمایش دادن اسکریپت‌ فوق آن را به صورت زیر تکمیل می‌کنیم:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    </head>
    <body>
        <div id="wrapper"></div>
        <script type="text/babel">
            const name = 'Behzad Moradi';
            const element = <h1>Hello {name}</h1>;
            ReactDOM.render(
                element,
                document.getElementById('wrapper')
            );
        </script>
    </body>
</html>

در صورت رِفرش کردن مرورگر، خواهیم دید که استرینگ مد نظر روی صفحه نمایش داده خواهد شد. آنچه در کد بالا تغییر دادیم ابتدا افزودن فایل babel.js در بخش هِد صفحه است سپس درج اتریبیوت "type="text/babel برای تگ آغازین <script> می‌باشد (البته لازم به یادآوری است که ایمپورت کردن babel.js به طور مستقیم داخل مرورگر روش بهینه‌ای نیست چرا که پروسهٔ کامپایل را در حین نمایش صفحه برای کاربر انجام خواهد داد و بالتبع ممکن است تا حدودی پرفورمنس کاهش یابد که برای رفع این معضل، می‌باید از ابزارهایی همچون Webpack استفاده نمود. به طور خلاصه، این ابزار یک اصطلاحاً Module Bundler است که این وظیفه را دارا است تا وابستگی‌ها و همچنین اطمینان حاصل کردن از اجرای صحیح اپلیکیشن‌های جاوااسکریپتی حرفه‌ای و مدرن را مدیریت کند.)

جمع‌بندی
به طور کلی، لایبرری React نه تنها برای ساخت رابط‌های کاربری مدرن خواه برای سایت‌های تک‌صفحه‌ای (SPA) و خواه برای استفاده در بخش‌های خاصی از سایت‌های معمولی مورد استفاده قرار می‌گیرد، بلکه این لایبرری در فریمورک React Native نیز مورد استفاده قرار می‌گیرد که به منظور توسعهٔ اپ‌های موبایل با همان فناوری‌های وب (CSS ،HTML و JS) توسط فیسبوک به صورت اپن‌سورس عرضه شده است (همچنین تسلط به کار با این لایبرری فرصت‌های شغلی بسیاری را پیش روی دولوپرها باز خواهد کرد چرا که امروزه شرکت‌های بسیاری شروع به استفاده از این لایبرری کرده‌اند و بالتبع نیاز به دولوپرهای حرفه‌ایی این حوزه دارند.)