آموزش نصب و راه اندازی React.js

  • 628 بازدید
  • آموزش نصب و راه اندازی React.js

    React.js چیست؟

    React.js یک کتابخانه ی UI است که توسط فیسبوک توسعه داده شده تا خلق کامپوننت های UI واکنش گرا و با قابلیت استفاده ی چندباره (reusable) تسهیل شود. از این کتابخانه در حین تولید فیس بوک استفاده شده است و همچنین اینستاگرام نیز کاملن توسط React.js نوشته شده.

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

    همچنین از مفهومی به نام Virtual DOM استفاده می‌شود.که به صورت انتخابی زیردرخت هایی از نودها را برپایه‌ی تغییر حالت‌ها رندر می‌کند. این روش از کمترین مقدار DOM ممکن برای به روز ماندن کامپوننت های شما استفاده می‌کند.

     

    این مفهوم (Virtual DOM) چگونه کار می‌کند؟

    فرض کنید یک شیء دارید که درباره‌ی یک شخص مدل‌سازی کرده است. این شیء هر ویژگی مربوط  را که شخص می‌تواند داشته باشد دارد و حالت کنونی شخص را بازتاب کرده است. این اساسن همان کاری است که React.js با DOM انجام می‌دهد.

    اکنون در این‌باره فکر کنید که اگر شما آن شیء را بگیرید و یکسری تغییرات روی آن انجام دهید چه می‌شود.مقداری سبیل، عضله‌های جذاب و چشم های استیو بوشمی اضافه شده است! در React.js وقتی که این تغییرات را اعمال می‌کنیم، دوچیز اتفاق می‌افتد. اول اینکه React.js یک آلگوریتم تفاوت (diffing algorithm)، که مشخص می کند چه چیزی تغییر کرده را اجرا می‌کند. قدم دوم اصلاح است، که در آن DOM با نتایج تفاوت به روز می‌شود.

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

    چون React.js از یک DOM جعلی و نه حقیقی استفاده می‌کند یک امکان جذاب دیگر را به روی ما می‌گشاید. ما می توانیم DOM جعلی را سمت سرور رندر کنیم!

     

    نصب React:

    نکته ای که همان ابتدا باید به آن توجه داشته باشید این است که قبل از شروع به راه‌اندازی React.js ابتدا باید از نصب node بر روی سیستم عامل خود مطمئن باشید چون در غیر اینصورت موفق به نصب React.js نخواهید شد. همچنین برای نصب می توانید به وب گاه رسمی React.js مراجعه کنید. برای شروع کار با React.js، ابزار CLI React.js را با استفاده از دستور زیر نصب کنید:

    npm install -g create-react-app

    و برای ساخت اپلیکیشن جدید از دستور زیر استفاده کنید

    create-react-app my-app-name

    بعد از پایان  مراحل نصب، وارد پوشه ی اپلیکیشن شده( با این دستور:

    cd my-app

    ) و دستور

    npm start

    را اجرا کنید. پس از اجرای این دستور آدرس

     http://localhost:3000

    را در مرورگر خود وارد کنید تا بتوانید خروجی را در مرورگر خود مشاهده کیند.

    هنگامی که اپلیکیشن شما آماده‌ی تولید شد با اجرای دستور زیر

    npm run build

    نسخه‌ای بهینه شده از اپلیکیشن شما در فولدر build ساخته می‌شود

    توجه داشته باشید که اپلیکیشن شما منطق backend یا دیتابیس را برای شما پیاده نمی‌کند بلکه تنها frontend را برای شما می‌سازد، بنابراین با هر backend ایی که بخواهید می‌توانید آن را پیاده کنید.

    امیدوارم تا اینجا لذت برده باشید. منتظر مقالات بعدی درباره‌ی React.js باشید....

    ارسال دیدگاه

    نشانی ایمیل شما منتشر نخواهد شد.

    این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.