آموزش React مقدماتی قسمت اول: ایجاد اولین برنامه React

قسمت ها

مقدمه

React یکی از محبوب ترین framework های frontend جاوا اسکریپت برای ساخت برنامه های وب در سال 2020 است. این برنامه توسط facebook و جامعه ای از توسعه دهندگان و شرکت های شخصی ساخته شده است. React به طور مداوم در حال تکامل است و ویژگی های جدید به طور مداوم به آن اضافه می شوند.

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

این مجموعه آموزشی برای شما که می خواهید با آموزش React از مقدماتی تا حرفه ای شروع کنید مناسب است. با این کار ما جدیدترین مفاهیم مانند React Hooks ، functional component و موارد دیگر را پوشش خواهیم داد. هیچ دانش قبلی در مورد React لازم نیست. با این حال شما باید از قبل با آشنایی با HTML، CSS و JavaScript درک درستی از توسعه وب داشته باشید.

بیایید آموزش React را شروع کنیم و از آن لذت ببریم.

تنظیمات سیستم

قبل از آموزش React، ابتدا باید از موجود بودن تنظیمات اولیه سیستم اطمینان حاصل کنیم.

اولین پیش شرطی که باید روی سیستم توسعه نصب شود Node.js و NPM مخفف (Node.js Package Manager) است. NPM همراه با Node.js است، بنابراین فقط باید مطمئن شوید که Node.js را نصب کرده اید.

با اجرای دستور زیر می توانید به سرعت بررسی کنید که آیا نسخه به روز Node.js روی سیستم شما نصب شده است:

 

$ node --version

 

در غیر این صورت می توانید به وب سایت Node.js به آدرس https://nodejs.org/ بروید و نصب کننده مورد نیاز برای سیستم عامل خاص خود را دانلود کنید.

علاوه بر این شما باید یک ویرایشگر کد برای توسعهReact نصب کنید. توصیه من در اینجا استفاده از Visual Studio Code است که می توانید به صورت رایگان از https://code.visualstudio.com دانلود کنید. Visual Studio Code یک راه حل all-in-one است که یک ویرایشگر کد، یک سیستم پلاگین قابل توسعه و یک ترمینال یکپارچه برای شما فراهم می کند، مخصوصاً برای مبتدیان.

ایجاد یک پروژه React از ابتدا

یکی از ساده ترین راه های تنظیم یک پروژه جدید React، استفاده از اسکریپت create-react-app است. برای اجرای این اسکریپت می توانیم به سادگی از دستور npx استفاده کنیم که اجرای اسکریپت را بدون بارگیری قبلی package در یک مرحله جداگانه امکان پذیر می کند.

 

$ npx create-react-app my-react-app

 

به عنوان پارامتر command line باید از نام پوشه پروژه جدید استفاده کنیم، به عنوان مثال my-react-app. پس از اجرای دستور باید چیزی شبیه به این را ببینید:

10.png

اکنون آماده هستیم که با تایپ کردن متن زیر، وارد پوشه پروژه ایجاد شده جدید شویم:

 

$ cd my-react-app

 

و از داخل پوشه پروژه، Visual Studio Code را از طریق زیر run کنید:

 

$ code .

 

بررسی ساختار اولیه پروژه

اکنون که پوشه پروژه جدید را در Visual Studio Code باز کرده ایم، آماده هستیم تا ساختار اولیه پروژه را بررسی کنیم:

11.png

  • node_modules/: پوشه ای که شامل تمام وابستگی های پروژه است، به عنوان مثال پکیج هایی که با استفاده از Node.js Package Manager (NPM) دانلود و نصب شده اند.
  • public/: پوشه ای که شامل assets های استاتیک برنامه وب مانند index.html است.
  • src/: این پوشه ای است که در آن می توانید پیاده سازی JavaScript برنامه React خود را پیدا کنید. به عنوان مثال، به طور پیش فرض می توانید پیاده سازی app component برنامه را در فایل App.js پیدا کنید. پیاده سازی های مربوط به unit test واحد مربوطه را می توان در App.test.js و  index.js یافت که حاوی کدی است که نقطه شروع برنامه React شما است.

نگاهی به Package.json

اکنون که بررسی اولیه و اجمالی از ساختار پروژه را دارید، باید نگاهی به فایل package.json بیندازیم تا مروری بر script های تعریف شده داشته باشیم. script ها را می توان از طریق npm اجرا کرد، به عنوان مثال، برای راه اندازی وب سرور development، ساخت production و غیره.

قسمت اسکریپت های فایل package.json اولیه به صورت زیر است:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

بیایید نحوه استفاده از این script ها را در مرحله بعدی بررسی کنیم.

اجرای وب سرور development

اجرای development web server با اجرای script زیر انجام می شود:

$ npm run start

یا

$ npm start

که باید خروجی زیر را به شما بدهد:

20.png

در اینجا می توانید مشاهده کنید که وب سرور development در پورت 3000 start شده است. مرورگر به طور خودکار باز می شود و آدرس http://localhost:3000 به طور خودکار باز می شود، بنابراین اکنون می توانید خروجی زیر را ببینید:

21.png

اجرای Test ها

به طور پیش فرض، پروژه اولیه React همراه با برخی موارد unit test تعریف شده در src/App.test.js است. اجرای آن تست ها از طریق زیر انجام می شود:

$ npm run test

خروجی باید به صورت زیر باشد:

30.png

تولید برنامه به عنوان محصول

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

$ npm run build

پس از اتمام موفقیت build، از طریق خروجی زیر به شما اطلاع داده می شود:

40.png

سپس می توانید محتوای پوشه build را در هر web server مستقر کنید.

در قسمت بعد خواهید خواند

در قسمت بعدی، ما با نگاهی به component اصلی برنامه یعنیApp Component، آموزش React را ادامه خواهیم داد، به طور کلی درباره components های React بیشتر خواهید آموخت و با کد JSX آشنا می شوید.

سعید نصیری
سعید نصیری

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

× در حال پاسخ به:
محمد عباسی
محمد عباسی
16 بهمن 1399 / ساعت 15:09 پاسخ دهید

سلام خسته نباشید میخواستم بدونم این دوره چند قسمتی است و تا کی تکمیل میشود؟

سعید نصیری
سعید نصیری 16 بهمن 1399 / ساعت 18:45

این دوره حدودا ۱۳ قسمتی است و تا انتهای سال تکمیل خواهد شد.