نصب و راه اندازی React

نصب و راه اندازی React

1280 800 سینا

در این آموزش نحوه نصب و راه اندازی اولیه React توضیح داده خواهد شد. توجه کنید که تعدادی از مراحل یک بار انجام می شود و در پروژه های بعدی شما نیازی به نصب مجدد آن ها نیست.

در ابتدا شما نیاز به نصب Node.js خواهید داشت. برای نصب آن می توانید از طریق لینک http://nodejs.org/download/ اقدام کنید. بسته مورد نظر خود را با توجه به سیستم عاملی که استفاده می کنید دانلود کرده و نصب کنید.

پس از نصب Node.js ما به سراغ نصب React و افزونه های مورد نیاز آن می رویم. نصب ری اکت به روش های مختلفی قابل انجام است. شما می توانید افزونه ها را به صورت جدا نصب کنید و با توجه به نیاز خود آن ها را کانفیگ کنید. این روش کمی پیچیده است و نیاز به اطلاعات کافی در زمینه babel و به خصوص webpack دارد. آموزش مربوط به این نوع از نصب در آینده ارائه خواهد شد. در این آموزش ما نحوه نصب آسان و سریع ReactJS را توضیح خواهیم داد که تمامی تنظیمات به شکل اتوماتیک انجام خواهد شد.

پس از نصب Node.js دستور npm در خط فرمان سیستم عامل شما قابل دسترس است.
1. نصب بسته create-react-app :
در این مرحله ما بسته create-react-app را نصب خواهیم کرد. با نصب این بسته شما قادر خواهید با استفاده از یک دستور یک خطی پروژه آماده Hello World را دریافت کنید و به راحتی اجرا کنید. خط فرمان سیستم عامل خود را باز کرده و دستور زیر را اجرا کنید.
دستور نصب :

 

2. پس از انجام مرحله اول دستور create-react-app در دسترس خواهد بود. برای دریافت پروژه آماده ReactJS کافی است به دایرکتوری که می خواهید پروژه تان ساخته شود رفته و دستور زیر را اجرا کنید. (my-app در این دستور نام پروژه شما است که در واقع نام پوشه ساخته شده توسط این دستور نیز همین my-app خواهد بود.)

 

3. در این مرحله اپلیکیشن شما ساخته شده است و کافی است شما به پوشه ساخته شده بروید و دستور npm start را در آن پوشه اجرا کنید. این دستور برنامه Node.js ای را اجرا می کند.

حال باید مرورگر شما به صورت خودکار باز شده و برنامه hello world اجرا شود.
در صورت داشتن مشکل در نصب react در بخش نظرات مشکل خود را اعلام کنید.

۱۱ دیدگاه
  • ممنون نصب شد ولی من با این NODE JS مشکل جدی دارم اصلا درکش نمیکنم!
    لطفا مابقه آموزش رو هم قرار بدید. نمیشه که این همه دیر به دبر فایده نداره

    • خواهش میکنم. ممنون که سایت رو دنبال میکنید. از هفته بعد سعی میشه هر روز یا یک روز در میون مقاله گذاشته بشه. مشکلتون با نود چیه؟ 🙂

  • پس چرا دیگه ادامه نمیدین مطالبو
    من هرروز دارم سر میزنم ولی خبری نیست!!!!

    • ممنون که دارید پیگیری می کنید. مطمئن باشید به زودی با مقالات روزانه و زیادی جبران می کنیم. فردا مقاله جدید رو می تونید مطالعه کنید.

  • سلام

    ممنون از وقتی که برای تهیه اموزش قرار دادین امیدوارم ادامه دار باشه

    موقع نصب برا من ارور داد // حتی از طریق gulp هم نصب کردم باز ارورو داد

    ————————–
    npm ERR! path C:\Users\UserNmae\Desktop\my-react\node_modules\nan\package.json
    npm ERR! code EPERM
    npm ERR! errno -4048
    npm ERR! syscall unlink
    npm ERR! Error: EPERM: operation not permitted, unlink ‘C:\Users\UserNmae\Desktop\my-react\node_modules\nan\package.json’
    npm ERR! at Error (native)
    npm ERR! { Error: EPERM: operation not permitted, unlink ‘C:\Users\UserNmae\Desktop\my-react\node_modules\nan\package.json’
    npm ERR! at Error (native)
    npm ERR! stack: ‘Error: EPERM: operation not permitted, unlink \’C:\\Users\\UserNmae\\Desktop\\my-react\\node_modules\\nan\\package.json\’\n at Error (native)’,
    npm ERR! errno: -4048,
    npm ERR! code: ‘EPERM’,
    npm ERR! syscall: ‘unlink’,
    npm ERR! path: ‘C:\\Users\\UserNmae\\Desktop\\my-react\\node_modules\\nan\\package.json’ }
    npm ERR!
    npm ERR! Please try running this command again as root/Administrator.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\UserNmae\AppData\Roaming\npm-cache\_logs\2017-09-09T07_57_54_144Z-debug.log
    ———————

    • خواهش می کنم. سعی می کنیم ادامه دار باشه.
      شما بسته های دیگه رو می تونین از طریق npm نصب کنین؟

      npm config set unsafe-perm true

      این دستور رو اجرا کنید بعد مجددا سعی کنید نصب کنید. شاید مشکلتون حل شه.

    • نسخه npm و node خودتون رو هم بگید لطفا. با دستورات زیر میتونین نسخه ها رو مشاهده کنین.

      node -v
      npm -v

  • سلام من کامل نصب کردم و اروری هم نداشتم اما زمان اجرا در مرورگر ارور۴۰۴ میده باید چکار کنم تا اجرا بشه؟

  • عالی بود
    ممنون از لطفتون
    منم مشکل دوستان رو داشتم که با توضیح شما حل شد
    واقعا ممنونم

دیدگاهی بگذارید