Мое путешествие с 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, упомянутые в приведенном выше коде. Однажды я еще не дошел до этого. Как выглядит эта последняя панель навигации?

Пока все хорошо, и в следующей статье мы увидим, как подключить маршрутизатор и продолжить.

Удачного реагирования.