نحوه راه اندازی یک پروژه React با برنامه React

React یک چارچوب محبوب JavaScript برای ایجاد برنامه های front-end است. در ابتدا توسط فیس بوک ایجاد شد و این امکان را فراهم کرده است که توسعه دهندگان بتوانند برنامه های سریع را با استفاده از یک الگوی برنامه نویسی بصری ایجاد کنند که جاوا اسکریپت را با یک دستور مشابه HTML معروف به JSX مرتبط می کند.
شروع یک پروژه React جدید ، یک فرآیند پیچیده و چند مرحله ای بود که شامل تنظیم یک سیستم ساخت ، ترانسپایلر کد برای تبدیل ترکیب مدرن به کدی که توسط همه مرورگرها قابل خواندن باشد و یک ساختار دایرکتوری پایه بود. اما اکنون ، ایجاد برنامه React شامل تمام بسته های JavaScript برای اجرای یک پروژه React از جمله تعویض کد ، لایه بندی اولیه ، آزمایش و سیستم ساخت می باشد. همچنین شامل یک سرور مجازی با hot reloading است که با ایجاد تغییرات در کد ، صفحه شما را ریفرش می کند. در نهایت ، ساختاری برای دایرکتوری ها و مؤلفه های شما ایجاد می کند ، بنابراین می توانید فقط در چند دقیقه وارد برنامه نویسی شوید و شروع به کدگذاری کنید.
به عبارت دیگر ، لازم نیست نگران پیکربندی یک سیستم ساخت مانند Webpack باشید. لازم نیست که Babel را تنظیم کنید تا کد شما را تغییر دهد تا از مرورگر متقابل استفاده شود. لازم نیست نگران بسیاری از سیستمهای پیچیده و پیشرفته توسعه مقدماتی مدرن باشید. می توانید نوشتن کد React را با حداقل آماده سازی شروع کنید.
در پایان این آموزش ، برنامه React به اجرا در می اید و می توانید به عنوان پایه ای برای هر برنامه بعدی استفاده کنید. اولین تغییرات خود را در کد React ، به روز کردن سبک ها و راه اندازی ساختار برای ایجاد نسخه کاملاً کوچک شده از برنامه خود انجام می دهید. همچنین می توانید از سرور مجازی ی با hot reloading استفاده کنید تا بازخورد فوری به شما بدهد و بخش هایی از یک پروژه React را عمقی جستجو کنید. سرانجام ، شروع به نوشتن مؤلفه های سفارشی و ایجاد ساختاری می کنید که می تواند با پروژه شما رشد کند و سازگار شود.
پیش نیازها
برای دنبال کردن این آموزش ، به موارد زیر نیاز دارید:
⦁ Node.js نسخه 10.16.0 که بر روی کامپیوتر شما نصب شده باشد. برای نصب این برنامه در macOS یا Ubuntu 18.04 ، مراحل نحوه نصب Node.js و ایجاد محیط توسعه محلی را در macOS یا نصب با استفاده از یک بخش PPA در آموزش نحوه نصب Node.js روی اوبونتو 18.04 را دنبال کنید.
⦁ همچنین به داشتن درک پایه از JavaScript نیاز خواهید کرد ، که می توانید در مجموعه آموزش های کد نویسی در جاوااسکریپت بیابید و همچنین دانش پایه در HTML و CSS کک کننده خواهد بود.
مرحله 1 – ایجاد یک پروژه جدید با برنامه Create React
در این مرحله ، شما با استفاده از مدیر بسته npm یک برنامه جدید را برای اجرای یک اسکریپت از راه دور ایجاد خواهید کرد. اسکریپت فایل های لازم را در یک فهرست جدید کپی کرده و تمام متعلقات را نصب می کند.
پس از نصب Node ، یک برنامه مدیریت بسته نیز به نام npm نصب کرده اید. npm بسته های JavaScript را در پروژه شما نصب می کند و همچنین جزئیات مربوط به پروژه را پیگیری می کند. اگر می خواهید درباره npm اطلاعات بیشتری کسب کنید ، به آموزش نحوه استفاده از ماژول های Node.js با npm و pack.json ما نگاهی بیندازید.
npm همچنین شامل ابزاری به نام npx است که بسته های قابل اجرا را راه اندازی خواهد کرد. این بدان معنی است که شما بدون دانلود پروژه ، برنامه Creat React App را اجرا خواهید کرد.
بسته اجرایی نصب create-react-app را در دایرکتوری که مشخص کرده اید اجرا می کند. این کار با ساختن یک پروژه جدید در یک دایرکتوری آغاز می شود که در این جا digital-ocean-tutorial است. مجدداً ، لازم نیست این دایرکتوری از قبل وجود داشته باشد. بسته اجرایی آن را برای شما ایجاد می کند. اسکریپت همچنین npm install را درون دایرکتوری پروژه اجرا می کند ، که هرگونه متعلقات اضافی را دانلود می کند.
برای نصب پروژه پایه ، دستور زیر را اجرا کنید:
⦁ $ npx create-react-app digital-ocean-tutorial
⦁
این دستور یک فرایند ساخت را شروع می کند که کد پایه را به همراه تعدادی متعلقات دانلود می کند.
با پایان یافتن اسکریپت ، پیام موفقیت آمیز بودن را مشاهده خواهید کرد که می گوید:
Output
…
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd digital-ocean-tutorial
npm start

Happy hacking!

your_file_path مسیر فعلی شما خواهد بود. اگر کاربر macOS باشید ، چیزی شبیه / Users / your_username خواهد بود. اگر در سرور مجازی اوبونتو هستید ، چیزی مانند / home / your_username میگوید.
همچنین لیستی از دستورات npm را مشاهده خواهید کرد که به شما امکان می دهد برنامه خود را اجرا کنید، بسازید ، راه اندازی و آزمایش کنید. در بخش بعدی این موارد را بیشتر مطالعه خواهید کرد.
توجه: یک مدیر بسته دیگر برای JavaScript با نام yarn وجود دارد. توسط فیس بوک پشتیبانی میشود و بسیاری از موارد مشابه npm را انجام می دهد. در اصل ، yarn عملکرد جدیدی مانند فایل های قفل را ارائه می داد ، اما اکنون این موارد در npm نیز اجرا می شوند. yarn همچنین شامل چند ویژگی دیگر مانند ذخیره سازی آفلاین است. تفاوت های بیشتری را می توان در مستندات yarn مشاهده کرد.
اگر قبلاً yarn را بر روی سیستم خود نصب کرده باشید ، لیستی از دستورات yarn مانند yarn start را مشاهده میکنید که مانند آن در دستورات npm کار می کند. حتی اگر yarn نصب شده باشد می توانید دستورات npm را اجرا کنید. اگر yarn را ترجیح می دهید ، فقط در هر دستور بعدی npm را با yarn جایگزین کنید. نتایج همان خواهد بود.
اکنون پروژه شما در یک دیرکتوری جدید تنظیم شده است. به دیرکتوری جدید بروید:
⦁ $ cd digital-ocean-tutorial
⦁
اکنون در ریشه پروژه خود هستید. در این مرحله ، شما یک پروژه جدید ایجاد کرده اید و تمام متعلقات را اضافه کرده اید. اما هیچ اقدامی برای اجرای این برنامه نکرده اید. در بخش بعدی ، اسکریپت های سفارشی را برای ساخت و آزمایش پروژه اجرا خواهید کرد.
مرحله 2 – استفاده از react-scripts
در این مرحله با react-scripts های مختلف که با repo نصب شده اند آشنا می شوید. ابتدا اسکریپت آزمایشی را برای اجرای کد تست اجرا خواهید کرد. سپس اسکریپت build را اجرا می کنید تا نسخه مینی شده ایجاد کنید. در آخر ، خواهید دید که چگونه اسکریپت eject می تواند کنترل کاملی بر شخصی سازی انجام دهد.
اکنون که در دیرکتوری پروژه هستید ، به اطراف خود نگاهی بیندازید. می توانید کل دایرکتوری را در ویرایشگر متن خود باز کنید ، یا اگر در ترمینال هستید می توانید فایل ها را با دستور زیر لیست کنید:
⦁ $ ls -a
⦁
پرچم -a تضمین می کند که خروجی شامل فایل های مخفی نیز می شود.
در هر صورت ، ساختاری مانند این را خواهید دید:
Output
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

بیایید اینها را یکی یکی توضیح دهیم:
⦁ node_modules / حاوی تمام کتابخانه های جاوا اسکریپت خارجی است که توسط برنامه استفاده می شود. به ندرت نیاز به باز کردن آن خواهید داشت.
⦁ دایرکتوری public/ حاوی برخی از فایلهای HTML پایه ، JSON و تصویر است. اینها ریشه های پروژه شما هستند. در مرحله 4 فرصتی خواهید داشت که بیشتر در مورد آنها تحقیق کنید.
⦁ دایرکتوری src / شامل کد React JavaScript برای پروژه شما می باشد. بیشتر کارهایی که انجام می دهید در این دیرکتوری قرار می گیرند. این دیرکتوری را با جزئیات در مرحله 5 جستجو خواهید کرد.
⦁ فایل gitignore شامل برخی از دایرکتوری ها و فایل های پیش فرض است که از کنترل منبع شما استفاده نمی کنند ، مانند دیرکتوی node_modules. موارد نادیده گرفته شده به دایرکتوری های بزرگتر یا فایل هایی وارد می شوند که در کنترل منبع به آنها نیازی نخواهید داشت. همچنین برخی از دیرکتوری هایی را ایجاد خواهید کرد که با برخی از اسکریپت های React ایجاد خواهید کرد.
⦁ README.md یک فایل علامت گذاری است که شامل اطلاعات مفیدی در مورد Create React Appمانند خلاصه ای از دستورات و پیوندها به پیکربندی پیشرفته میباشد. در حال حاضر ، بهتر است فایل README.md را همانطور که می بینید ، رها کنید. با پیشرفت پروژه خود ، اطلاعات پیش فرض را با اطلاعات دقیق تر در مورد پروژه خود جایگزین خواهید کرد.
دو فایل آخر توسط مدیر بسته شما استفاده می شود. هنگامی که دستور npx اولیه را اجرا کردید ، پروژه پایه را ایجاد کردید ، اما متعلقاتی اضافی را نیز نصب کردید. هنگامی که متعلقات را نصب کردید ، یک فایل pack-lock.json ایجاد کردید. این فایل توسط npm استفاده می شود تا اطمینان حاصل شود که بسته ها با نسخه های دقیق مطابقت دارند. به این ترتیب اگر شخص دیگری پروژه شما را نصب کند ، می توانید اطمینان حاصل کنید که آنها متعلقاتی یکسانی دارند. از آنجا که این فایل به طور خودکار ایجاد می شود ، به ندرت این فایل را مستقیماً ویرایش می کنید.
آخرین فایل یک pack.json است. شامل ابرداده های مربوط به پروژه شما مانند عنوان ، شماره نسخه و متعلقات است. این برنامه همچنین حاوی اسکریپت هایی است که می توانید برای اجرای پروژه خود استفاده کنید.
فایل pack.json را در ویرایشگر متن مورد علاقه خود باز کنید:
⦁ $ nano package.json
⦁
با باز کردن فایل ، یک شیء JSON را مشاهده می کنید که شامل تمام ابرداده ها است. اگر به آبجکت scripts نگاه کنید ، چهار اسکریپت مختلف را پیدا خواهید کرد: start, build, test, و eject
این اسکریپت ها به ترتیب اهمیت فهرست شده اند. اسکریپت توسعه محلی را شروع می کند. در مرحله بعدی به آن خواهید رسید. اسکریپت دوم پروژه شما را می سازد. شما این کار را با جزئیات مرحله 4 انجام میدهید ، اما ارزش آن را دارد که اکنون آن را اجرا کنید.
اسکریپت build
برای اجرای هر اسکریپت npm ، فقط کافی است npm run script_name را در ترمینال خود تایپ کنید. چند اسکریپت ویژه وجود دارد که می توانید قسمت اجرای دستور را حذف کنید ، اما اجرای کامل فرمان همیشه خوب است. برای اجرای اسکریپت build ، موارد زیر را در ترمینال خود تایپ کنید:
⦁ $ npm run build
بلافاصله پیام زیر را مشاهده خواهید کرد:
Output
> [email protected] build your_file_path/digital-ocean-tutorial
> react-scripts build

Creating an optimized production build…
…

این به شما می گوید که Create React App در حال کامپایل کد شما به یک بسته نرم افزاری قابل استفاده است.
پس از اتمام ، خروجی زیر را مشاهده خواهید کرد:
Output
…
Compiled successfully.

File sizes after gzip:

39.85 KB build/static/js/9999.chunk.js
780 B build/static/js/runtime-main.99999.js
616 B build/static/js/main.9999.chunk.js
556 B build/static/css/main.9999.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

“homepage” : “http://myname.github.io/myapp”,

The build folder is ready to be deployed.
You may serve it with a static server:

serve -s build

Find out more about deployment here:

bit.ly/CRA-deploy

محتویات پروژه را لیست کنید و برخی از دیرکتوری های جدید را مشاهده خواهید کرد:
⦁ $ ls -a
⦁
Output
build/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

اکنون دایرکتوری build را دارید. اگر فایل .gitignore را باز کردید ، ممکن است متوجه شده باشید که دیرکتوری build توسط git نادیده گرفته می شود. به این دلیل است که دیرکتوری build فقط یک نسخه کوچک شده و بهینه شده از فایل های دیگر است. دیگر نیازی به استفاده از کنترل نسخه نیست زیرا همیشه می توانید دستور build را اجرا کنید. بعداً خروجی را بیشتر جستجو خواهید کرد. در حال حاضر ، زمان آن رسیده است که به اسکریپت آزمون بروید.
اسکریپت test
اسکریپت test یکی از آن اسکریپت های ویژه ای است که نیازی به کلمه کلیدی run ندارد ، اما حتی اگر آن را نیز بگنجانید کار می کند. این اسکریپت یک اجرا کننده آزمایشی به نام Jest را راه اندازی می کند. اجرا کننده آزمایشی پروژه شما را برای هر فایلی با پسوند. Spec.js یا .test.js جستجو می کند ، سپس آن فایل ها را اجرا می کند.
برای اجرای اسکریپت test ، دستور زیر را تایپ کنید:
⦁ $ npm test
⦁
پس از اجرای این اسکریپت ، ترمینال شما خروجی مجموعه آزمون را خواهد داشت و سریع ترمینال از بین می رود. چیزی شبیه به این خواهد بود:
Output
PASS src/App.test.js
✓ renders learn react link (67ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.204s
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.

در اینجا چند نکته قابل توجه است. اولا ، همانطور که قبلاً نیز اشاره شد ، به طور خودکار هر فایلی را با پسوند تست از جمله .test.js و .spec.js تشخیص می دهد. در این حالت ، فقط یک مجموعه آزمون وجود دارد – یعنی فقط یک فایل با پسوند .test.js — و آن مجموعه تست فقط یک تست را دارد. Jest می تواند آزمایشات را در سلسله مراتب کد شما تشخیص دهد ، بنابراین می توانید تست ها را در یک دیرکتوری قرار دهید و Jest آنها را پیدا می کند.
دوما ، Jest مجموعه آزمون شما را یک بار اجرا نمی کند و سپس خارج شود. بلکه ، این کار در ترمینال ادامه دارد. اگر تغییری در کد منبع ایجاد کرده باشید ، تست ها را دوباره انجام می دهد.
همچنین می توانید با استفاده از یکی از گزینه های صفحه کلید ، آزمایش های خود را محدود کنید. مثلاً اگر o را تایپ کنید ، فقط آزمایشات را روی فایل هایی که تغییر کرده اند اجرا میکند. این می تواند باعث صرفه جویی زمان زیادی در هنگام گسترش مجموعه های آزمایشی شما شود.
سرانجام می توانید با تایپ q از runner test خارج شوید. این کار را انجام دهید تا سریعاً فرمان خود را بازیابی کنید.
اسکریپت eject
اسکریپت نهایی npm eject است. این اسکریپت متعلقات و فایل های پیکربندی شما را در پروژه خود کپی می کند ، کنترل کاملی را روی کد شما ایجاد می کند اما پروژه را از جعبه ابزار یکپارچه Create React App خارج می کند. اکنون این دستور را اجرا نمی کنید زیرا ، پس از اجرای این اسکریپت ، نمی توانید این عمل را خنثی سازی کنید و هرگونه به روزرسانی در Create React App را از دست خواهید داد.
ارزش Create React App این است که نیازی نیست نگران میزان قابل توجهی پیکربندی باشید. ساخت برنامه های کاربردی مدرن جاوا اسکریپت به ابزارهای زیادی از سیستم های ساخت مانند Webpack گرفته تا ابزارهای تلفیقی مانند Babel نیاز دارد. Create React App تمام پیکربندی های موجود برای شما را کنترل می کند ، بنابراین ejecting به مدیریت مقابله با این پیچیدگی است.
نکته منفی Create React App این است که شما نمی توانید پروژه را به طور کامل شخصی سازی کنید. برای اکثر پروژه هایی که مشکلی ندارند ، اما می خواهید همه جنبه های مراحل ساخت را کنترل کنید ، باید کد را eject کنید. با این حال ، همانطور که قبلاً گفته شد ، پس از خارج کردن کد ، دیگر نمی توانید به نسخه های جدید Create React App را به روزرسانی کنید ، و مجبور خواهید بود پیشرفت های خود را به صورت دستی اضافه کنید.
در این مرحله ، شما اسکریپت هایی را برای ساخت و تست کد خود اجرا کرده اید. در مرحله بعد ، پروژه را روی یک سرور مجازی زنده شروع می کنید.
مرحله 3 – راه اندازی سرور مجازی
در این مرحله یک سرور مجازی محلی را تنظیم می کنید و پروژه را در مرورگر خود اجرا می کنید.
شما پروژه خود را با یک اسکریپت دیگر npm شروع می کنید. مانند npm test ، این اسکریپت به دستور run احتیاج ندارد. هنگامی که اسکریپت را اجرا می کنید ، یک سرور مجازی محلی راه اندازی می کنید ، کد پروژه را اجرا می کنید ، ناظری را مشاهده می کنید که تغییر کد را پیگیری می کند و پروژه را در یک مرورگر وب باز می کند.
پروژه را با تایپ کردن دستور زیر در ریشه پروژه خود شروع کنید. برای این آموزش ، ریشه پروژه شما دایرکتوری digital-ocean-tutorial است. حتماً این کار را در یک ترمینال یا سربرگ جداگانه باز کنید ، زیرا این اسکریپت تا زمانی که اجازه دهید اجرا خواهد شد:
⦁ $ npm start
⦁

قبل از شروع کار سرور مجازی ، متن مکان نگهدار را برای چند لحظه مشاهده خواهید کرد:
Output
Compiled successfully!

You can now view digital-ocean-tutorial in the browser.

http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

اگر اسکریپت را بصورت محلی اجرا کنید ، پروژه را در پنجره مرورگر شما باز کرده و تمرکز را از ترمینال به مرورگر منتقل می کند.
اگر این اتفاق نیفتد ، می توانید برای مشاهده سایت در حال کار به http: // localhost: 3000 / مراجعه کنید. اگر در حال حاضر سرور مجازی دیگری در پورت 3000 در حال کار دارید ، امکان خوبی است. Create React App پورت موجود بعدی را شناسایی کرده و سرور مجازی را با آن اجرا میکند. به عبارت دیگر ، اگر در حال حاضر یک پروژه درگاه 3000 داشته باشید ، این پروژه جدید از درگاه 3001 شروع می شود.
اگر این کار را از طریق یک سرور مجازی راه دور انجام می دهید ، می توانید سایت خود را بدون هیچگونه تنظیمات اضافی مشاهده کنید. آدرس http: // your_server_ip: 3000 خواهد بود. اگر پیکربندی فایروال داشته باشید ، باید پورت را روی سرور مجازی راه دور خود باز کنید.
در مرورگر ، پروژه قالب React زیر را مشاهده می کنید:

مادامی که اسکریپت در حال اجرا باشد ، شما یک سرور مجازی محلی فعال خواهید داشت. برای متوقف کردن اسکریپت ، پنجره یا زبانه ترمینال را ببندید یا CTRL + C یا ⌘- + c را در پنجره یا زبانه ای که اسکریپت شما اجرا می شود تایپ کنید.
در این مرحله ، شما سرور مجازی را راه اندازی کرده اید و اولین کد React خود را اجرا می کنید. اما قبل از ایجاد هرگونه تغییر در کد React JavaScript ، می بینید که چگونه React در وهله اول به صفحه ارائه می شود.
مرحله 4 – اصلاح صفحه اصلی
در این مرحله ، کد را در دایرکتوری public/ تغییر دهید. دیرکتوری عمومی شامل صفحه HTML پایه شماست. صفحه ای است که به عنوان ریشه پروژه شما ارائه می شود. شما به ندرت این دیرکتوری را در آینده ویرایش می کنید ، اما این پایه ای است که پروژه از آن شروع می شود و بخش مهمی از یک پروژه React است.
اگر سرور مجازی خود را کنسل کردید ، با شروع npm آن را مجدد راه اندازی کنید ، سپس ویرایشگر متن مورد علاقه خود را در یک پنجره ترمینال جدید باز کنید:
⦁ $ nano public/
⦁
در روش دیگر ، می توانید فایل ها را با دستور ls لیست کنید:
⦁ $ ls public/
⦁
لیستی از فایل ها مانند این را مشاهده خواهید کرد:
Output
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt

favicon.ico، logo192.png و logo512.png نمادهایی هستند که کاربر می تواند در سربرگ مرورگر یا تلفن خود مشاهده کند. مرورگر آیکون های با اندازه مناسب را انتخاب می کند. سرانجام ، بهتر است این موارد را با نمادهایی که بیشتر مناسب پروژه شما هستند جایگزین کنید. در حال حاضر ، می توانید آنها را رها کنید.
manifest.json مجموعه ای ساختار یافته از ابرداده ها است که پروژه شما را توصیف می کند. در میان موارد دیگر ، لیست میکند که کدام نماد برای گزینه های اندازه مختلف استفاده خواهد شد.
فایل robots.txt برای crawlerهای وب است. به crawlerها می گوید که کدام صفحه ها را میتوانند ایندکس کنند یا مجاز به ایندکس کردن نیستند. نیازی به تغییر هیچ فایل دیگری ندارید، مگر اینکه دلیل قانع کننده ای برای انجام این کار وجود داشته باشد. به عنوان مثال ، اگر می خواهید URL محتوای ویژه ای را به برخی از کاربران بدهید که نمی خواهید به راحتی در دسترس باشد ، می توانید آن را به robots.txt اضافه کنید و همچنان در دسترس عموم باشد اما توسط موتورهای جستجو ایندکس نمی شود.
فایل index.html ریشه برنامه شما است. این فایلی است که سرور مجازی می خواند ، و فایلی است که مرورگر شما نمایش می دهد. آن را در ویرایشگر متن خود باز کنید و نگاهی بیندازید.
اگر از خط فرمان کار می کنید ، می توانید با دستور زیر آن را باز کنید:
⦁ $ nano public/index.html
⦁
آنچه خواهید دید اینگونه است:
digital-ocean-tutorial/public/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<link rel=”icon” href=”%PUBLIC_URL%/favicon.ico” />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<meta name=”theme-color” content=”#000000″ />
<meta
name=”description”
content=”Web site created using create-react-app”
/>
<link rel=”apple-touch-icon” href=”%PUBLIC_URL%/logo192.png” />
<!–
manifest.json provides metadata used when your web app is installed on a
user’s mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
–>
<link rel=”manifest” href=”%PUBLIC_URL%/manifest.json” />
<!–
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike “/favicon.ico” or “favicon.ico”, “%PUBLIC_URL%/favicon.ico” will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
–>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=”root”></div>
<!–
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
–>
</body>
</html>

فایل بسیار کوتاه است هیچ تصویر یا کلمه ای در <body> وجود ندارد. به این دلیل است که React تمام ساختار HTML خود را ایجاد می کند و آن را با JavaScript وارد می کند. اما React باید بداند که کد را کجا تزریق کند ، و این نقش index.html است.
در ویرایشگر متن ، برچسب <title> را از React App به Sandbox تغییر دهید:
digital-ocean-tutorial/public/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<link rel=”icon” href=”%PUBLIC_URL%/favicon.ico” />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<meta name=”theme-color” content=”#000000″ />
…
<title>Sandbox</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=”root”></div>
<!–
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
–>
</body>
</html>

ویرایشگر متن خود را ذخیره کرده و از آن خارج شوید. مرورگر خود را بررسی کنید. عنوان نامی است که در سربرگ مرورگر قرار دارد. به طور خودکار بروزرسانی می شود. اگر اینطور نیست ، صفحه را ریفرش کنید و متوجه تغییر شوید.
اکنون به ویرایشگر متن خود برگردید. هر پروژه React از یک عنصر ریشه شروع می شود. می تواند چندین عنصر ریشه در یک صفحه وجود داشته باشد ، اما حداقل باید یکی وجود داشته باشد. این راه آگاهی React از این است که کد HTML تولید شده را کجا قرار دهد. عنصر <div id = “root”> را پیدا کنید. div ای است که React برای همه به روزرسانی های بعدی استفاده خواهد کرد. شناسه را از root به base تغییر دهید:
digital-ocean-tutorial/public/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
…
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=”base”></div>
<!–
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
–>
</body>
</html>

تغییرات را ذخیره کنید.
خطایی در مرورگر خود مشاهده خواهید کرد:

React به دنبال عنصری با شناسه root بود. اکنون که حذف شد ، React نمی تواند پروژه را شروع کند.
برگرداندن نام از base به root:
digital-ocean-tutorial/public/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
…
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=”root”></div>
<!–
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
–>
</body>
</html>

ذخیره کنید و از index.html خارج شوید.
در این مرحله ، شما سرور مجازی را راه اندازی کرده اید و یک تغییر جزئی در صفحه HTML ایجاد کرده اید. هنوز کد JavaScript را تغییر نداده اید. در بخش بعدی کد React JavaScript را به روز خواهید کرد.
مرحله 5 – اصلاح برچسب عنوان و استایل
در این مرحله ، اولین تغییر خود را در یک مؤلفه React در دیرکتوری src / انجام خواهید داد. یک تغییر کوچک در CSS و کد JavaScript ایجاد خواهید کرد که با استفاده از بارگذاری مجدد داخلی ، به طور خودکار در مرورگر شما به روز می شوند.
اگر سرور مجازی را متوقف کرده اید ، با شروع npm آن را مجدداً راه اندازی کنید. حالا کمی وقت بگذارید تا قسمت های دیرکتوری src / را ببینید. می توانید دایرکتوری کامل را در ویرایشگر متن مورد علاقه خود باز کنید ، یا می توانید با دستور زیر پروژه را در یک ترمینال لیست کنید:
⦁ $ ls src/
⦁
فایلهای زیر را در ترمینال یا ویرایشگر متن خود مشاهده خواهید کرد.
Output
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js

بیایید این فایل ها را یک باره مرور کنیم.
در ابتدا وقت زیادی را برای فایل serviceWorker.js نخواهید گذراند ، اما با شروع برنامه های پیشرونده وب ، این مسئله مهم خواهد شد. ارائه دهنده سرویس می تواند بسیاری از کارها از جمله push notifications و offline caching را انجام دهد ، اما فعلاً بهتر است آن را رها کنید.
فایل های بعدی که باید به آنها مراجعه کنید ، setupTests.js و App.test.js هستند. اینها برای فایلهای آزمایشی استفاده می شوند. در واقع ، هنگامی که شما test npm را در مرحله 2 اجرا کردید ، اسکریپت این فایلها را اجرا می کند. فایل setupTests.js کوتاه است. همه چیزی که شامل میشود چند روش expect معمول است. در آموزش های آینده این مجموعه در این مورد اطلاعات بیشتری کسب خواهید کرد.
App.test.js را باز کنید:
⦁ $ nano src/App.test.js
⦁
وقتی آن را باز کردید ، یک آزمایش پایه را مشاهده خواهید کرد:
digital-ocean-tutorial/src/App.test.js
import React from ‘react’;
import { render } from ‘@testing-library/react’;
import App from ‘./App’;

test(‘renders learn react link’, () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

این آزمون به دنبال عبارت learn react در سند است. اگر به مرورگری که پروژه شما را اجرا می کند برگردید ، این عبارت را در صفحه مشاهده خواهید کرد. تست react با اکثر تست های واحد متفاوت است. از آنجا که مؤلفه ها می توانند شامل اطلاعات تصویری مانند نشانه گذاری ، و همچنین منطقی برای دستکاری داده ها باشند ، آزمایش های واحد معمول به آسانی کار نمی کند. React testing به نوعی از تست عملکردی یا ادغام نزدیک تر است.
در مرحله بعد ، برخی از فایل های یک ظاهر طراحی شده را مشاهده خواهید کرد: App.css ، index.css و logo.svg. روش های مختلفی برای کار طراحی در React وجود دارد ، اما ساده ترین کار نوشتن CSS ساده است زیرا نیازی به تنظیمات اضافی نیست.
چندین فایل CSS وجود دارد زیرا می توانید سبک ها را همانطور که یک فایل جاوا اسکریپت دیگر بودند به یک مولفه وارد کنید. از آنجا که شما توانایی وارد کردن CSS را مستقیماً به یک مؤلفه دارید ، ممکن است CSS را نیز تقسیم کنید تا فقط به یک مؤلفه جداگانه اعمال شود. آنچه شما انجام می دهید جدا کردن مسائل است. شما تمام CSS را از JavaScript جدا نمی کنید. در عوض ، تمام CSS ، جاوا اسکریپت ، نشانه گذاری و تصاویر مرتبط را در کنار هم نگه می دارید.
App.css را در ویرایشگر متن خود باز کنید. اگر از خط فرمان کار می کنید ، می توانید با دستور زیر آن را باز کنید:
⦁ $ nano src/App.css
⦁
این کدی است که مشاهده خواهید کرد:
digital-ocean-tutorial/src/App.css
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

این یک فایل استاندارد CSS است و پیش پردازنده های خاصی برای CSS ندارد. در صورت تمایل می توانید بعداً آنها را اضافه کنید ، اما در ابتدا فقط CSS ساده دارید. Create React App سعی دارد در حالی که هنوز محیطی out-of-the-box ارائه می دهد ، بدون قید و شرط باشد.
به App.css برگردید، یکی از مزایای استفاده از Create React App این است که همه فایل ها را مشاهده می کند ، بنابراین اگر تغییری ایجاد کردید ، بدون لود مجدد ، آن را در مرورگر خود مشاهده خواهید کرد.
برای دیدن این در عمل ، تغییر کوچکی در رنگ پس زمینه در App.css ایجاد کنید. آن را از # 282c34 به آبی تغییر دهید و فایل را ذخیره کنید. استایل نهایی مانند این است:
digital-ocean-tutorial/src/App.css
.App {
text-align: center;
}
…
.App-header {
background-color: blue
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
…

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

مرورگر خود را بررسی کنید. قبلا به این شکل بود.

پس از تغییر اینگونه خواهد بود.

پیش بروید و رنگ پس زمینه را به # 282c34 تغییر دهید.
digital-ocean-tutorial/src/App.css
.App {
text-align: center;

…

.App-header {
background-color: #282c34
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

…

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

فایل را ذخیره کنید و از آن خارج شوید.
شما یک تغییر CSS کوچک ایجاد کرده اید. اکنون زمان آن رسیده است که تغییراتی در کد React JavaScript ایجاد کنیم. با باز کردن index.js شروع کنید.
⦁ $ nano src/index.js
⦁
در اینجا آنچه خواهید دید آمده است:
digital-ocean-tutorial/src/index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
import * as serviceWorker from ‘./serviceWorker’;

ReactDOM.render(<App />, document.getElementById(‘root’));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

در بالا ، React ، ReactDOM ، index.css ، Appو serviceWorker را وارد می کنید. با وارد کردن React ، شما در واقع کد را برای تبدیل JSX به JavaScript واکشی میکنید. JSX عناصر HTML مانند هستند. به عنوان مثال ، توجه کنید که چگونه هنگام استفاده از برنامه ، آن را مانند یک <App />عنصر HTML درنظر میگیرید. در آموزش های بعدی این مجموعه ، در این مورد بیشتر آموزش خواهید دید.
ReactDOM كدی است كه كد React شما را به عناصر پایه مانند صفحه index.html كه در public/ دیدید وصل می كند. به خط هایلایت شده زیر نگاه کنید:
digital-ocean-tutorial/src/index.js
…
import * as serviceWorker from ‘./serviceWorker’;

ReactDOM.render(<App />, document.getElementById(‘root’));
…
serviceWorker.unregister();

این کد به React دستور می دهد تا یک عنصر با شناسه root پیدا کند و کد React را در آنجا تزریق کند. <App/>عنصر اصلی شماست و همه چیز از آنجا منشعب خواهد شد. این نقطه شروع برای همه کد های آینده React است.
در بالای فایل ، چند ورودی را مشاهده خواهید کرد. index.css را وارد می کنید ، اما در واقع کاری با آن انجام نمی دهید. با وارد کردن آن ، از طریق اسکریپت های React به Webpack می گویید که کد CSS را در بسته بندی کامپایل نهایی وارد کند. اگر آن را وارد نکنید ، نشان داده نمی شود.
از src / index.js خارج شوید.
در این مرحله ، هنوز چیزی را که در مرورگر خود میبنید، مشاهده نکردید. برای دیدن آن ، App.js را باز کنید:
⦁ $ nano src/App.js
⦁
کد موجود در این فایل مانند یک سری عناصر HTML معمولی به نظر می رسد. آنچه خواهید دید اینگونه است:
digital-ocean-tutorial/src/App.js
import React from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

function App() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className=”App-link”
href=”https://reactjs.org”
target=”_blank”
rel=”noopener noreferrer”
>
Learn React
</a>
</header>
</div>
);
}

export default App;

محتویات برچسب <p> را از Edit <code>src/App.js</code> and save to reload. به Hello, world تغییر دهید و تغییرات خود را ذخیره کنید.
digital-ocean-tutorial/src/App.js
…

function App() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Hello, world
</p>
<a
className=”App-link”
href=”https://reactjs.org”
target=”_blank”
rel=”noopener noreferrer”
>
Learn React
</a>
</header>
</div>
);
}
…

به مرورگر خود بروید و تغییر را مشاهده خواهید کرد:

اکنون اولین به روزرسانی خود را در مورد مؤلفه React انجام داده اید.
قبل از ادامه ، به چند مورد دیگر توجه کنید. در این مؤلفه ، فایل logo.svg را وارد می کنید و آن را به یک متغیر اختصاص می دهید. سپس در عنصر <img> آن کد را به عنوان src اضافه می کنید.
چند مورد در اینجا اتفاق می افتد. به عنصر img نگاه کنید:
digital-ocean-tutorial/src/App.js
…
function App() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Hello, world
</p>
…

توجه کنید که چگونه لوگو را در نوارهای فرفری منتقل می کنید. هر زمان که مشخصاتی را منتقل می کنید که رشته یا عدد نیستند ، باید از نوارهای فرفری استفاده کنید. React به جای رشته ها با آن ها به عنوان JavaScript رفتار خواهد کرد. در این حالت ، شما در حال وارد کردن تصویر نیستید؛ در عوض در حال ارجاع تصویر هستید. هنگامی که Webpack پروژه را ساخت ، تصویر را مدیریت می کند و منبع را در مکان مناسب قرار می دهد.
از ویرایشگر متن خارج شوید.
اگر به عناصر DOM در مرورگر خود نگاه کنید ، می بینید که مسیری را اضافه می کند. اگر از Chrome استفاده می کنید ، می توانید با کلیک راست بر روی عنصر و انتخاب Inspect ، این عنصر را بازرسی کنید.
در اینجا ظاهر آن در مرورگر آورده شده است:

DOM دارای این خط است:
<img src=”/static/media/logo.5d5d9eef.svg” class=”App-logo” alt=”logo”>
Copy

کد شما کمی متفاوت خواهد بود زیرا لوگو نام دیگری خواهد داشت. Webpack می خواهد مطمئن شود که مسیر تصویر منحصر به فرد است. بنابراین حتی اگر تصاویر را با همین نام وارد کنید ، با مسیری متفاوت ذخیره می شوند.
در این مرحله ، شما تغییر کوچکی در کد React JavaScript ایجاد کرده اید. در مرحله بعد ، از دستور build برای به حداقل رساندن کد در یک فایل کوچک که می تواند در یک سرور مجازی مستقر شود استفاده می کنید.
مرحله 6 – ساخت پروژه
در این مرحله شما کد را در بسته نرم افزاری قرار می دهید که می تواند در سرور مجازی های خارجی مستقر شود.
به ترمینال خود برگردید و پروژه را بسازید. این فرمان را قبلاً اجرا کردید ، اما به عنوان یادآوری ، این دستور، اسکریپت ساخت را اجرا می کند. یک دیرکتوری جدید با فایلهای ترکیبی و کوچک شده ایجاد می کند. برای اجرای build ، دستور زیر را از ریشه پروژه خود اجرا کنید:
⦁ $ npm run build
⦁
با کامپایل کردن کد تأخیر ایجاد می شود و پس از اتمام آن ، یک دیرکتوری جدید به نام build / خواهید داشت.
build / index.html را در یک ویرایشگر متن باز کنید.
⦁ $ nano build/index.html
⦁
چیزی شبیه به این را خواهید دید:
digital-ocean-tutorial/build/index.html
<!doctype html><html lang=”en”><head><meta charset=”utf-8″/><link rel=”icon” href=”/favicon.ic

دایرکتوری build تمام کدهای شما را می گیرد و کامپایل می کند و آن را به کوچکترین حالت قابل استفاده تبدیل می کند. فرقی نمی کند که انسان بتواند آن را بخواند ، زیرا این یک کد عمومی نیست. کم حجم کردن به این حالت باعث می شود کد در حالی که هنوز هم کار میکند فضای کمتری را اشغال کند. بر خلاف برخی از زبانها مانند پایتون ، فضای سفید نحوه تفسیر کد توسط رایانه را تغییر نمی دهد.
نتیجه
در این آموزش ، شما اولین برنامه React خود را ایجاد کرده اید ، پروژه خود را با استفاده از ابزارهای build جاوا اسکریپت بدون نیاز به مراجعه به جزئیات فنی ، پیکربندی کرده اید. این مزیت Create React App میباشد: برای شروع لازم نیست همه چیز را بدانید. این امکان را به شما می دهد تا مراحل پیچیده ساخت را رد کنید تا بتوانید منحصراً روی کد React تمرکز کنید.
دستورات لازم را برای شروع ، آزمایش و ساختن یک پروژه آموخته اید. از این دستورات به طور مرتب استفاده خواهید کرد ، بنابراین برای آموزش های بعدی نوت برداری کنید. از همه مهمتر ، شما اولین مؤلفه React خود را به روز کردید.
اگر در عمل مایل به دیدن React هستید ، آموزش نحوه نمایش اطلاعات از DigitalOcean API را با آموزش React امتحان کنید.

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

پارامترهای پیش فرض در جاوا اسکریپت – اجرای چندین نسخه PHP بر روی یک سرور Debian 10

نحوه راه اندازی یک پروژه React با برنامه React – نصب و ایمن سازی phpMyAdmin در اوبونتو 18

پیکربندی یک تایید اعتبار مجاز(CA) در CentOS 8 – تنظیم برنامه Node.js برای تولید در CentOS 7

نصب MariaDB در اوبونتو 18.04 – ایمن کردن Apache با Let’s Encrypt در Debian 10

نحوه نصب Node.js در CentOS 8 – بازنویسی URL را با mod_rewrite برای Apache در Debian 10

راه اندازی فایروال با استفاده از firewalld در CentOS 8 – نصب وب سرور Apache در Debian 10

اضافه کردن و حذف کاربران در CentOS 8 – نصب Apache Tomcat 9 در Debian 10

نصب و استفاده از PostgreSQL در CentOS 8 – راه اندازی سرور اولیه با Debian 10

نصب MariaDB در CentOS 8 – چگونه با JSX عناصر واقعی ایجاد کنیم

نصب و پیکربندی VNC در Debian 10 – استفاده از سرور از راه دور Docker

نصب و ایمن سازی Grafana در اوبونتو 18 – نحوه نصب Git در CentOS 8