Мое путешествие с React пока что продвигается хорошо. Было несколько ухабов, но в остальном поездка хорошая. Я узнаю много положительного и отрицательного о реакции. В моем реактивном путешествии, которое началось несколько недель назад, мы увидим, как начать работу с React-Bootstrap.
Что такое react-bootstrap и почему мы должны его использовать? response-bootstrap - это простая библиотека реагирования, которая содержит набор компонентов, которые мы могли бы использовать в нашем приложении или на веб-сайте. Эти компоненты созданы с помощью начальной загрузки, поэтому мы экономим время. Он похож на Angular-UI-Bootstrap. Все эти компоненты мы могли бы собрать сами. Я предпочитаю использовать его, потому что это библиотека с открытым исходным кодом, и вместо того, чтобы начинать с нуля, это приближает меня к цели.
Настоящая история является продолжением моей предыдущей истории, где я описал свою конечную цель - научиться реагировать, которую вы можете прочитать здесь. В продолжение, мы находимся на шаге 2, и сегодня я собираюсь разметить верхнюю панель навигации своего веб-сайта.
Первым делом нам нужно получить пакет React-Bootstrap. Помните, что React-BootStrap не содержит маршрутизатора для SPA. Это в другой раз. На данный момент, чтобы получить реактивную загрузку, нужно установить пакет npm. Так же, как я объяснил в предыдущем рассказе, я использую пакет быстрой установки. Команда для установки:
npm-install react-bootstrap --save
В Visual Studio вы также можете обновить package.json, который также восстанавливает пакет.
После того, как мы установили response-bootstrap, следующим шагом в этом процессе будет создание компонента Navigation в виде скрипта. Это должно выглядеть так, как показано ниже
Ниже приведен код для работы Navbar.
import * as React from 'react'; import * as ReactBootstrap from 'react-bootstrap'; import * as ReactRouter from 'react-router'; import * as ReactRouterBootStrap from 'react-router-bootstrap'; interface INavigationProps { } let Navbar = ReactBootstrap.Navbar; let Nav = ReactBootstrap.Nav; let NavItem = ReactBootstrap.NavItem; let MenuItem = ReactBootstrap.MenuItem; let NavbarHeader = ReactBootstrap.NavbarHeader; let NavDropdown = ReactBootstrap.NavDropdown; let LinkContainer = ReactRouterBootStrap.LinkContainer; let IndexContainer = ReactRouterBootStrap.IndexLinkContainer; const dropdownItems = [ { href: '#', name: 'Overview' }, { href: '#', name: 'Setup' }, { href: '#', name: 'Usage' }, ]; export default class Navigation extends React.Component<INavigationProps, {}> { render() { return ( <Navbar inverse> <Navbar.Header> <Navbar.Brand> <a href="#"><img src="./../../images/logo.png" width="35px" height="30px" /></a> </Navbar.Brand> <Navbar.Toggle /> </Navbar.Header> <Navbar.Collapse> <Nav> <NavItem eventKey={1} href="#">About</NavItem> <NavItem eventKey={2} href="#">Projects</NavItem> <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"> <MenuItem eventKey={3.1}>Action</MenuItem> <MenuItem eventKey={3.2}>Another action</MenuItem> <MenuItem eventKey={3.3}>Something else here</MenuItem> <MenuItem divider /> <MenuItem eventKey={3.3}>Separated link</MenuItem> </NavDropdown> </Nav> <Nav pullRight> <NavItem eventKey={1} href="#">Contact</NavItem> <NavItem eventKey={2} href="#">Link 2</NavItem> </Nav> </Navbar.Collapse> </Navbar> ); } }
Игнорируйте компоненты React-Router и React-Router-Bootstrap, упомянутые в приведенном выше коде. Однажды я еще не дошел до этого. Как выглядит эта последняя панель навигации?
Пока все хорошо, и в следующей статье мы увидим, как подключить маршрутизатор и продолжить.
Удачного реагирования.