نگاهی به React js

تو دنیای قدیم اگر میخواستیم صفحه‌ی وب درست کنیم، فقط کافی بود HTML و CSS بلد باشیم، اون‌هم در حد ابتدایی؛ حتی جاوااسکریپت هم لازم نداشتیم. خب انتظار بیشتری هم نمیرفت. هنوز کارهایی که وب میتونست انجام بده رو ندیده بودیم. رفته رفته ایده‌های جدید مثل هرجای دیگه‌ای پا به این دنیا هم گذاشتن و صفحه‌هامون قشنگ‌تر و کاربردی‌تر شدن، در این بین استفاده از جاوااسکریپت هم روزبه‌روز بیشتر شد.
اما هرچیزی هزینه‌ای داره… هزینه‌ای هم که ما باید پرداخت میکردیم پیچیده‌تر شدن کدهامون و سخت‌تر شدن فرآیند توسعه بود.
ولی خب می‌ارزید.
در این بین فریمورک‌های زیادی ساخته شدن تا قدرت کار رو بیشتر کنن و همزمان پیچیدگی رو پایین نگه دارن. بعضی از اون‌ها هم تا حدودی موفق بودن. اما توی این مقاله ….. قصد معرفی فریمورکی رو داریم که نظر مثبت خیلی از برنامه‌نویس‌ها رو چه از نظر سادگی و چه از نظر قدرت به خودش جلب کرده؛ از اون مهمتر، مبدا بزرگی مثل فیسبوک داره که بزرگترین پشتیبان اون هم محسوب میشه چون در اکثر برنامه‌های خودش از این فریمورک استفاده میکنه و به اون وابسته هست. فریمورکی به اسم React.

*راستی، از همین دنیای قدیم که گفتم شاید ۱۰ سال هم نگذشته باشه.

همراه ما باشید تا با React بیشتر آشنا بشیم.

چرا React ؟

یکی از مهترین دلایلی که برای استفاده از React وجود داره، توانایی ایجاد componentهای مختلف برای صفحه هست. این کار باعث میشه که بخش‌های مختلف کد از هم قابل تفکیک باشن و عملیات توسعه خیلی آسون و راحت‌تر بشه.
علاوه‌بر اون چون میتونیم بخش‌های مختلف رو از هم تفکیک کنیم، پس میتونیم برنامه رو ماژول بندی کنیم و مثلا برای اضافه کردن header به صفحمون فقط نیاز باشه تا یک ماژول رو فراخونی کنیم.
ماژول بندی کردن قابلیتی رو در اختیار برنامه قرار میده که تیم توسعه‌دهنده‌ی React به درستی تونسته از اون استفاده کنه. کاری که React انجام میده اینه که هرموقع قسمتی از برنامه تغییر کرد، فقط قسمت‌های مرتبط به اون تغییر دوباره render بشن و به بقیه برنامه کاری نداشته باشن.

کدنویسی با React چه فرقی داره ؟

واضح‌ترین تفاوتی که React رو از بقیه متمایز میکنه این هست که تمام کدهای صفحه در فایل‌های js قرار دارن؛ یعنی هم HTML و هم CSS صفحه باید در فایل‌های جاوااسکریپت نوشته بشن. مثال زیر رو ببنید:

import React from 'react';
import ReactDom from 'react-dom';
import Header from './components/Header';

const App = function() {
 return (
 <div style={styles.headerContainer}>
 <Header />
 </div>
 );
};

const styles = {
 headerContainer: {
   width: '100%',
   height: '50px'
 }
}

ReactDom.render(<App />, document.querySelector('.container'));

الان یکم سخت به نظر میرسه ولی اصلا نگران نباشید چون بعد از بار اولی که خودتون این کدها رو نوشتید کاملا بهشون مسلط میشید. بخشی که اول باید به اون توجه کنید، خط ۶ تا ۱۰ هست. توی این بخش کدهای HTML مربوط به این کامپوننت رو مینویسیم. تگ‌هایی که توی این قسمت به کار میبریم همون تگ‌های HTML هستن و با همون شیوه‌ی “تگ‌باز،تگ‌بسته” به کار برده میشن. البته یک‌سری تفاوت‌هایی هم میبینیم مثل propertyها که به قدرتمندتر شدن اون کمک کردن و به دلیل همین تفاوت‌ها، این نوع نوشتن HTML در جاوااسکریپت با نام JSX شناخته میشه و بحث مفصلی داره که در حوصله‌ی این مقاله نمیگنجه.
بخش دومی که باید به اون توجه کنیم، خط‌های ۱۳ تا ۱۸ هستن. توی این بخش، styleهای مورد نظرمون رو تعریف میکنیم و در شیء styles قرار میدیم. اینکه چرا این‌کار رو میکنیم هم جای بحث داره؛ فعلا فقط از این syntax استفاده کنید. تمام styleهایی که به کار میبریم، همون styleهای قبلی هستن با این تفاوت که مثلا اگر توی فایل CSS مینویسیم background-color، اینجا مینویسیم backgroundColor؛ یعنی به جای اینکه علامت – بذاریم، حرف اول بخش بعدی رو بزرگ مینویسیم.
برای متصل کردن این style به تگ مورد نظرمون، مثل خط ۷ عمل میکنیم. فعلا فقط کپی کنید.

نقطه شروع برنامه کجا هست ؟

برنامه‌ای که با React مینویسیم فقط یک فایل index.html داره و بقیه فایل‌هایی که ما مینویسیم جاوااسکریپت هستن. کد زیر نمونه‌ای از فایل index.html رو نشون میده:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

فایل index.html به همین سادگی هست. فایل‌هایی که لازم دارید رو در head فراخونی میکنید؛ مثلا برای استفاده از bootstrap، چون نمیتونیم کل مجموعه رو به شکلی که بقیه styleهامون رو مینویسیم دربیاریم(یعنی مثل بخش دوم قسمت قبل)، آدرسش رو مثل همیشه در قسمت head مینویسیم. در قسمت body هم فقط یک div با کلاس container داریم که مشخص میکنه تمام کدهایی که با React نوشتیم باید توی کدوم قسمت اعمال بشن. بعد از تگ body هم bundle.js رو فراخونی کردیم؛ برای اینکه بعد از نوشتن کدهامون، تمام فایل‌های جاوااسکریپت تبدیل به یک فایل تحت عنوان bundle.js میشن(این فایل توی دایرکتوری برنامه وجود خارجی نداره و فقط موقع اجرا ساخته میشه).

به غیر از فایل index.html، یک فایل جاوااسکریپت هم به عنوان نقطه‌ی شروع بقیه فایل‌ها احتیاج داریم. برای این مثال، این فایل رو به اسم index.js در فولدری به نام src قرار دادیم. محتویات این فایل همون‌هایی هست که توی بخش قبل دیدیم.

نگاه عمیق‌تر به فایل index.js

برای اینکه بهتر متوجه نحوه کار React بشیم، برمیگردیم به فایل index.js و اون رو بررسی میکنیم:

import React from 'react';
import ReactDom from 'react-dom';
import Header from './components/Header';

const App = function() {
 return (
 <div style={styles.headerContainer}>
 <Header />
 </div>
 );
};

const styles = {
 headerContainer: {
   width: '100%',
   height: '50px'
 }
}

ReactDom.render(<App />, document.querySelector('.container'));

توی خط اول برنامه، React رو import کردیم، چون برای تمام کارهای دیگه‌ای که قراره انجام بدیم به اون احتیاج داریم. برای مثال یکی از کارهایی که انجام میده توی خط آخر برنامه مشخص شده. توی این خط گفتیم که خروجی کامپوننت App رو render کن و بریز توی بخشی که کلاس container داره(همون بخشی که توی index.html مشخص کردیم).

توی خط‌های ۵ تا ۱۱ کامپوننتی به اسم App ایجاد کردیم. این کامپوننت هرچیزی رو برگردونه به عنوان خروجی تبدیل به html میشه.

توی خط ۳ هم فایلی رو import کردیم به اسم header. این فایل که خودمون از قبل نوشتیم ماژول header رو در اختیار ما قرار میده و میتونیم فقط با نوشتن اسم اون مثل خط ۸ اون رو استفاده کنیم. توجه کنیدکه برای هر استفاده‌ای داریم میتونیم کامپوننت مخصوص به اون رو بنویسیم و به صورت ماژول استفاده کنیم.

نگاهی به فایل Header.js

دیدن محتویات این فایل کمک خیلی بزرگی به درک ما از React میکنه، چون توی اون از هیچ ماژول دیگه‌ای استفاده نکردیم.

import React from 'react';

const Header = () => {
  return (
    <div>
      Header
    </div>
  );
};

export default Header;

برای ساخت کامپوننت توی ساده‌ترین حالت فقط کافیه کدی شبیه به کد بالا بنویسید. توی خط اول React رو فراخونی کردیم. توی خط ۳ کامپوننتی به اسم Header ساختیم و اطلاعاتی که میخواستیم به صورت html نمایش پیدا کنه رو از اون return کردیم. در آخر هم با نوشتن export default و به دنبال اون اسم کامپوننت، این کامپوننت رو قابل import شدن در بقیه برنامه کردیم.

توضیح آخر اینکه تا اینجای کار فقط با React آشنا شدید و برای اجرای عملی اون نیاز به کمی دانش بیشتر درموردش دارید که توی قسمت بعدی این مقاله مورد بررسی قرار میدیم.