مرجع مقالات طراحی اپلیکیشن در مشهد حرفه ای

استارت

 

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

 

با به رایا پارس کارگیری از امر تحت اپلیکیشن React نو را آغاز نمایید. اسم نرم‌افزار را به دلخواه تعیین نمائید.

 

create-react-app react-pagination

npm >= 5.2

 

در صورتیکه از NPM ورژن 5.2 یا این که فراتر استعمال می‌کنید آن npx باینری مازاد ارسال می نماید. با به کار گیری از npx باینری نیازی به نصب create-react-app به طور سراسری ندارید. با این امر معمولی میگردد یک اپلیکیشن React نو ساخت:

 

npx create-react-app react-pagination

نصب

 

در قدم آن گاه، تعلق هایی که برای اپلیکیشن خویش مایحتاج داریم را نصب میکنیم. دستور پایین را برای نصب تعلق های لازم انجام نمائید.

 

yarn add bootstrap prop-types react-flags countries-api

yarn add -D npm-run-all node-sass-chokidar

node-sass-chokidar را تحت عنوان تعلق به بسط برای طرحی که ما‌را توانمند به به کار گیری از SASS می نماید نصب کرده ایم . درحال حاضر فهرست src را گشوده نمائید و پسوند تمامی پوشه های .css را به  .scssتغییر دهید. در‌پی فولدر های .css موردنیاز با node-sass-chokidar کامپایل می گردند.

 

تغییر‌و تحول اسکریپت های npm

 

فولدر package.json را بازنویسی کرده و نصیب scripts را اصلاح فرمایید تا مانند تحت خواهد شد:

 

\"scripts\": {

\"start:js\": \"react-scripts start\",

\"build:js\": \"react-scripts build\",

\"start\": \"npm-run-all -p watch:css start:js\",

\"build\": \"npm-run-all build:css build:js\",

\"test\": \"react-scripts test --env=jsdom\",

\"eject\": \"react-scripts eject\",

\"build:css\": \"node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/\",

\"watch:css\": \"npm run build:css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive\"

}

وارد کردن  Bootstrap CSS

 

 بسته bootstrap را برای اپ خویش نصب می‌کنیم زیرا به مدل (پیاده سازی) پیش فرض نیاز داریم. همینطور از استایل های کامپوننت ورقه بندی Bootstrap استعمال می‌کنیم  برای وارد کردن Bootstrap در اپلیکیشن، فولدر src/index.js را بازنویسی کرده و خط پایین را قبل از هر پاراگراف import اضافه می‌کنیم.

 

import \"bootstrap/dist/css/bootstrap.min.css\";

نصب (تهیه و تنظیم) آیکون های درفش (Flag)

 

react-flags را تحت عنوان ضمیمه نرم‌افزار خویش نصب کردیم. برای دسترسی به آیکون های درفش می بایست تصاویر آیکون هارا در دایرکتوری public نرم افزار خویش نسخه برداری کنیم. امر های پایین را در ترمینال خویش جاری ساختن فرمائید تا آیکون های درفش اسکن شوند.

 

mkdir -p public/img

cp -R node_modules/react-flags/vendor/flags public/img

 در‌حالتی که از سیستم دلیل ویندوز استعمال میکنید، به مکان آن امر های تحت را جاری ساختن نمائید:

 

mkdir \\public\\img

xcopy \\node_modules\\react-flags\\vendor\\flags \\public\\img /s /e