شروع یک پروژه جدید React به همین سادگی نیست. به جای اینکه مستقیماً وارد کد شوید و برنامه خود را زنده کنید ، باید وقت خود را صرف پیکربندی ابزارهای ساخت مناسب کنید تا یک محیط توسعه محلی ، آزمایش واحد و ساخت تولید را تنظیم کنید. خوشبختانه ، کمک در قالب ایجاد نرم افزار واکنش نشان می دهد.
ایجاد-واکنش-برنامه یک ابزار خط فرمان از فیس بوک است که به شما امکان می دهد یک پروژه جدید React ایجاد کنید و از یک وب پک از پیش تنظیم شده برای توسعه استفاده کنید. مدتهاست که این به بخشی جدایی ناپذیر از اکوسیستم React تبدیل شده است که نیاز به حفظ خطوط لوله پیچیده ساخت را در پروژه شما برطرف می کند و به شما امکان می دهد روی برنامه خود تمرکز کنید.
ایجاد React App چگونه کار می کند؟
Create React App ابزاری مستقل است که با استفاده از npm یا Yarn قابل اجرا است.
فقط با چند دستور می توانید پروژه جدیدی را با استفاده از npm تولید و اجرا کنید:
npx create-react-app new-app
cd new-app
npm start
اگر نخ را ترجیح می دهید ، می توانید این کار را اینگونه انجام دهید:
yarn create react-app new-app
cd new app
yarn start
ایجاد React App ساختار پروژه زیر را تنظیم می کند:
new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── README.md
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTests.js
└── yarn.lock
همچنین a اضافه خواهد شد react-scripts بسته ای برای پروژه شما که شامل تمام پیکربندی ها و اسکریپت های ساخت است. به عبارت دیگر ، پروژه شما بستگی دارد react-scripts، نه در create-react-app خودش پس از پایان نصب ، می توانید سرور dev را خاموش کرده و روی پروژه خود کار کنید.
ویژگی های اساسی
سرور توسعه محلی
اولین چیزی که شما نیاز دارید یک محیط توسعه محلی است. در حال دویدن npm start سرور توسعه وب پک را با یک ناظر روشن می کند که پس از تغییر چیزی برنامه به طور خودکار بارگیری می شود. با شروع از v4 ، ایجاد React App از تازه سازی سریع React به عنوان جایگزینی برای Hot Module Replacement پشتیبانی می کند. مانند نسخه قبلی ، این به ما امکان می دهد بعد از ایجاد تغییر در کد کد ، بخشهایی از برنامه را به سرعت تازه کنیم ، اما دارای برخی ویژگی های جدید نیز هست. سریع بارگیری مجدد سعی می کند فقط قسمت اصلاح شده برنامه را بارگیری مجدد کند ، وضعیت اجزای عملکردی و قلاب ها را حفظ کند و پس از تصحیح خطای نحوی ، برنامه را به طور خودکار بارگیری کند.
با تنظیم کردن ، می توانید برنامه خود را از طریق HTTPS نیز ارائه دهید HTTPS متغیر به true قبل از اجرای سرور
این برنامه با بسیاری از ویژگی های داخلی ایجاد خواهد شد.
ES6 و ES7
این برنامه همراه با از پیش تعیین شده Babel خود است – بابل-از پیش تعیین شده-واکنش-برنامه – برای پشتیبانی از مجموعه ای از ویژگی های ES6 و ES7. برخی از ویژگی های پشتیبانی شده عبارتند از:
- Async / در انتظار
- ویژگی های Spread / Spread
- واردات پویا ()
- فیلدهای کلاس و خصوصیات استاتیک
توجه داشته باشید که ایجاد React App هیچ نوع پر کردن برای ویژگی های زمان اجرا را ارائه نمی دهد ، بنابراین اگر به هر یک از این موارد نیاز دارید ، باید خود آنها را وارد کنید.
واردات دارایی
می توانید از ماژول های JavaScript خود ، CSS فایل ها ، تصاویر یا قلم ها را وارد کنید که به شما امکان می دهد فایل های مورد استفاده در برنامه خود را بسته بندی کنید. پس از ساخت برنامه ، ایجاد React App این پرونده ها را در پوشه build کپی می کند. در اینجا مثالی از وارد کردن تصویر آورده شده است:
import image from './image.png';
console.log(image);
همچنین می توانید از این ویژگی در CSS استفاده کنید:
.image {
background-image: url(./image.png);
}
طراحی ظاهر
همانطور که در بخش قبلی ذکر شد ، ایجاد React App به شما امکان می دهد فقط با وارد کردن فایل های CSS مورد نیاز ، سبک ها را اضافه کنید. هنگام ساخت برنامه ، تمام پرونده های CSS در یک بسته واحد قرار می گیرند و به پوشه build اضافه می شوند.
React App را نیز پشتیبانی می کند ماژول های CSS. طبق قرارداد ، پرونده هایی با نام *.module.css به عنوان ماژول CSS رفتار می شود. این روش به ما اجازه می دهد تا از درگیری انتخابگرهای CSS جلوگیری کنیم ، زیرا ایجاد React App انتخابگرهای کلاس منحصر به فردی را در پرونده های CSS ایجاد شده ایجاد می کند.
متناوباً ، اگر ترجیح می دهید از پیش پردازنده های CSS استفاده کنید ، می توانید وارد کنید ساس .scss فایل ها. با این حال ، باید نصب کنید node-sass بسته به طور جداگانه
علاوه بر این ، ایجاد برنامه React راهی برای افزودن فراهم می کند بازنشانی های CSS با افزودن @import-normalize; در هر جایی از پرونده های CSS خود. سبک ها نیز پس از پردازش انجام می شوند ، که آنها را کوچک می کند ، پیشوندهای فروشنده را با استفاده از Autoprefixer اضافه می کند و ویژگی های پشتیبانی نشده polyfills مانند all خاصیت ، خصوصیات سفارشی و دامنه جستجوی رسانه.
تست های واحد در حال اجرا
در حال اجرا npm test تست ها را با استفاده از Jest اجرا می کند و یک ناظر را شروع می کند تا هر زمان که چیزی را تغییر دهید دوباره آنها را اجرا کند:
PASS src/App.test.js
✓ renders learn react link (19 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.995 s
Ran all test suites.
Watch Usage
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.
است یک دونده آزمایشی است که توسط فیس بوک به عنوان جایگزینی برای Mocha یا Karma توسعه یافته است. این آزمایشات را به جای یک مرورگر واقعی در یک محیط Node اجرا می کند ، اما با استفاده از برخی از جهانی های خاص مرورگر را فراهم می کند jsdom.
Jest همچنین با سیستم کنترل نسخه شما یکپارچه می شود و به طور پیش فرض فقط روی پرونده هایی که از آخرین تعهد شما تغییر کرده اند آزمایش می کند. برای اطلاعات بیشتر در این باره ، به “نحوه آزمایش واکنش دادن م Usingلفه ها با استفاده از شوخی” مراجعه کنید.
ESLint
در حین توسعه ، کد شما از طریق ESLint ، تجزیه و تحلیل کد ایستا نیز اجرا می شود که به شما کمک می کند خطاهای حین توسعه را تشخیص دهید.
ایجاد یک بسته تولیدی
هنگامی که سرانجام چیزی برای استقرار دارید ، می توانید با استفاده از یک بسته تولیدی ایجاد کنید npm run build. با این کار برنامه بهینه شده ای از برنامه شما ایجاد می شود که آماده استفاده در محیط شما است. مصنوعات تولید شده در پوشه build قرار می گیرند:
build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
├── css
│ ├── main.ab7136cd.chunk.css
│ └── main.ab7136cd.chunk.css.map
├── js
│ ├── 2.8daf1b57.chunk.js
│ ├── 2.8daf1b57.chunk.js.LICENSE.txt
│ ├── 2.8daf1b57.chunk.js.map
│ ├── 3.d75458f9.chunk.js
│ ├── 3.d75458f9.chunk.js.map
│ ├── main.1239da4e.chunk.js
│ ├── main.1239da4e.chunk.js.map
│ ├── runtime-main.fb72bfda.js
│ └── runtime-main.fb72bfda.js.map
└── media
└── logo.103b5fa1.svg
گسترش
از آنجا که ساخت برنامه Create React App شما فقط از فایلهای ساکن تشکیل شده است ، روشهای مختلفی وجود دارد که می توانید آنها را در محیط از راه دور مستقر کنید. اگر در محیط Node.js در حال اجرا هستید ، می توانید از سرور Node.js استفاده کنید یا با استفاده از وب سرور دیگری مانند NGINX ، برنامه را سرویس دهید.
بخش استقرار در اسناد رسمی ، مروری بر نحوه استقرار برنامه در Azure ، AWS ، Heroku ، Netlify و دیگر محیط های محبوب میزبانی ارائه می دهد.
ویژگی های توسعه
متغیرهای محیطی
می توانید از متغیرهای محیط Node برای تزریق مقادیر به کد خود در زمان ساخت استفاده کنید. ایجاد React App به طور خودکار به دنبال متغیرهای محیطی است که از ابتدا شروع می شود REACT_APP_ و آنها را تحت جهانی در دسترس قرار دهید process.env. این متغیرها می توانند در a باشند .env پرونده برای راحتی:
REACT_APP_BACKEND=http://my-api.com
REACT_APP_BACKEND_USER=root
سپس می توانید آنها را در کد خود ارجاع دهید:
fetch({process.env.REACT_APP_SECRET_CODE}/endpoint)
نزدیک شدن به پایان
اگر برنامه شما با پشتی از راه دور کار می کند ، ممکن است بتوانید برای دور زدن CORS ، درخواست های پروکسی را در طول توسعه محلی درخواست کنید. این را می توان با افزودن یک قسمت پروکسی به قسمت خود تنظیم کرد package.json فایل:
"proxy": "http://localhost:4000",
به این ترتیب ، سرور هر درخواستی را که به یک فایل استاتیک اشاره نمی کند ، به آدرس داده شده هدایت می کند.
تقسیم کد
ایجاد React App از تقسیم کد با استفاده از واردات پویا () بخشنامه به جای اینکه مقادیر صادر شده توسط ماژول را برگرداند ، در عوض یک قول را برمی گرداند که در این مقادیر حل می شود. در نتیجه ، ماژول هایی که از این طریق وارد می شوند در بسته نهایی موجود نیستند ، بلکه در پرونده های جداگانه ای تعبیه شده اند. این به شما امکان می دهد اندازه بسته نرم افزاری نهایی را کاهش دهید و محتوای مورد نیاز را بارگیری کنید.
پشتیبانی از TypeScript
می توانید فعال کنید TypeScript برای به دست آوردن مزایای تجزیه و تحلیل نوع استاتیک هنگام تولید یک پروژه جدید. این کار را می توان با استفاده از الگوی غیر پیش فرض دیگری برای تولید پروژه انجام داد:
npx create-react-app my-app --template typescript
همانطور که در مقاله توضیح داده شده است ، می توانید پشتیبانی از TypeScript را به یک پروژه موجود اضافه کنید مستندات.
برنامه های وب پیشرفته
به همین ترتیب ، می توانید پشتیبانی تدریجی از برنامه وب را اضافه کنید. با افزودن a می توانید از کارگران خدمات استفاده کنید src/service-worker.js فایل. با شروع از v4 ، این با استفاده از برنامه به برنامه تزریق می شود جعبه کار کتابخانه
برای فعال کردن کارکنان خدمات در یک پروژه جدید ، آنها باید از یک الگوی سفارشی تولید شوند:
npx create-react-app my-app --template cra-template-pwa
npx create-react-app my-app --template cra-template-pwa-typescript
وب حیات
ایجاد React App به شما امکان می دهد عملکرد و پاسخگویی برنامه خود را بسنجید. این کار با پیگیری معیارهای تعریف شده توسط انجام می شود وب حیاتی و با استفاده از کتابخانه حیوانات وب. معیارها عبارتند از بزرگترین رنگ محتوای، که عملکرد بارگیری را اندازه گیری می کند ، تأخیر ورودی اول، و تغییر چیدمان تجمعی برای پاسخگویی
ایجاد برنامه React عملکرد مناسبی را برای ردیابی تمام معیارهای موجود فراهم می کند:
reportWebVitals(console.log);
انتخاب کردن
اگر در برهه ای احساس کردید که ویژگی های ارائه شده دیگر برای پروژه شما کافی نیستند ، همیشه می توانید استفاده را کنار بگذارید react-scripts با دویدن npm run eject. با این کار پیکربندی webpack کپی شده و اسکریپت ها از آنجا ساخته می شوند react-scripts وارد پروژه خود شوید و وابستگی را برطرف کنید. پس از آن ، شما آزاد هستید که پیکربندی را هر طور که صلاح می دانید تغییر دهید.
به عنوان یک گزینه دیگر می توانید چنگال بزنید react-scripts و شاخه خود را با ویژگی های مورد نیاز خود حفظ کنید. در صورتی که پروژه های زیادی برای نگهداری داشته باشید ، این می تواند آسان تر باشد.
در نتیجه
اگر به دنبال شروع یک پروژه جدید React هستید ، بیشتر از این به دنبال آن نباشید. ایجاد React App به شما امکان می دهد به جای نوشتن پیکربندی وب پک دیگر ، سریعاً روی برنامه خود کار کنید. همچنین به روزرسانی ابزار ساخت خود را با یک دستور آسان می کند (npm install react-scripts@latest) – کاری که معمولاً کاری دلهره آور و وقت گیر است.
ایجاد React App به بخشی جدایی ناپذیر از اکوسیستم React تبدیل شده است. چه از آن برای جمع آوری نمونه اولیه سریع استفاده کنید و چه از پروژه مهم بعدی خود با داربست استفاده کنید ، این کار باعث صرفه جویی در ساعت های طولانی در وقت توسعه می شود.
