Работата с данни е страхотна, но не е много полезна, ако не можем да ги покажем правилно. В този урок ще направим прост и адаптивен компонент, който взема масив от обекти и изобразява адаптивно мрежово оформление. Спомням си разочарованието, което изпитвах, когато исках да постигна нещо подобно, но не се притеснявайте. До края на тази статия цялото ви разочарование ще се превърне в радост.
Видео урок: YouTube канал.
При брой колони 2 крайният резултат ще изглежда така:
Стъпки, през които ще преминем
- Инициализиране на нашия проект
- Инсталиране на react-bootstrap
- Настройване на нашата структура на папки / файлове
- Обобщавайки
Инициализиране на нашия проект
За да инициализираме нашия проект, ще отворим нашия команден ред, за да създадем ново приложение за реакция. Ако все още нямате create-react-app, първо трябва да инсталирате node и след това да изпълните следната команда:
npx create-react-app responsive-react-grid
Инсталиране на react-bootstrap
След като създадете новото приложение за реакция, ние ще отидем до нашата папка, като изпълним следната команда:
cd responsive-react-grid/ && code .
Ако не използвате vscode като IDE по подразбиране, просто изпълнете командата без && код.
Сега ще инсталираме react-bootstrap и ще използваме bootstraps CDN, за да включим всички необходими css файлове. Отидете до /public/index.html и поставете следния код в секцията head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
Сега инсталирайте react-bootstrap, като изпълните следната команда:
npm install react-bootstrap [email protected]
Можете да проверите вашите зависимости във файла package.json, за да се уверите, че е инсталиран правилно.
Настройване на нашата структура на папки / файлове
Преди да създадем нашия компонент, ще премахнем някакъв шаблонен код и ще настроим нашата структура на папки за нашия проект. Първо създайте нова директория /src/css и преместете App.css вътре в нея. Второ, създайте нова директория /src/components и създайте нов функционален компонент, наречен GridSystem.js вътре в нея. И накрая, премахнете ненужния шаблонен код в App.css и App.js. След като направите всичко това, вашите файлове трябва да изглеждат така:
App.js
GridSystem.js
App.css
Страхотно, вече имаме първоначалната структура на проекта, настроена с всички необходими файлове!
За да направя тази статия кратка, ще включа обясненията на кода като коментари, публикувани в същността по-долу
Обобщавайки!
В този раздел ще завършим нашите файлове App.js и GridSystem.js.
App.js
Важни изводи
Това е! Вече имате адаптивна мрежова система, която да използвате винаги, когато искате да изобразите колекция от обекти. Масивът в нашата мрежова система не е задължително да се състои от обекти, това би работило и с обикновени числа или примитивни типове данни. И накрая, в този пример съм включил само една точка на прекъсване при стартиране; въпреки това можете да включите повече, ако желаете. Просто ги предайте като подпори към нашия компонент. Можете да прочетете повече за точките на прекъсване при стартиране тук.
Благодаря ви, че прочетохте моята статия и се надявам, че това ви е помогнало! Ако имате въпроси, не се колебайте да ми изпратите съобщение в моя YouTube канал.
