Вступление
Reactstrap — это библиотека компонентов для React. Он предоставляет встроенные компоненты Bootstrap, которые упрощают создание пользовательского интерфейса с автономными компонентами, которые обеспечивают гибкость и встроенные проверки. Reactstrap прост в использовании и поддерживает Bootstrap 4.
Предпосылки
- Мы должны иметь базовые знания HTML и JavaScript.
- Код Visual Studio должен быть установлен.
- Узел и NPM установлены.
Прежде всего, давайте проверим, установлен ли Node в вашей системе. Если нет, проверьте эту ссылку: https://nodejs.org/en/download/
Загрузите на свой компьютер последнюю версию Node.js в соответствии с версией Windows (64-разрядной или 32-разрядной). Чтобы проверить конфигурацию вашего компьютера, щелкните правой кнопкой мыши «Мой компьютер», выберите «Свойства» и проверьте тип системы. После загрузки Node.js установите его.
Давайте создадим новый реактивный проект с помощью следующей команды:
Оболочка
xxxxxxxxxx
1
npx create-react-app reactstrapcomponent
Установить Bootstrap
Reactstrap не включает Bootstrap CSS, поэтому для использования Bootstrap CSS нам нужно добавить Bootstrap. Используйте следующую команду, чтобы установить два заданных параметра конфигурации приложения: один, в котором хранится имя базы данных MongoDB, а другой — строку подключения MongoDB (с заполнителем для имени базы данных). Вы должны иметь что-то вроде:
Оболочка
xxxxxxxxxx
1
npm install --save bootstrap
Установите Reactstrap с помощью следующей команды:
Оболочка
xxxxxxxxxx
1
npm install --save reactstrap react react-dom
Теперь откройте файл index.js и импортируйте Bootstrap CSS.
JavaScript
xxxxxxxxxx
1
import 'bootstrap/dist/css/bootstrap.min.css';
Теперь щелкните правой кнопкой мыши на папке src и добавьте новый компонент с именем ReactstrapDemo.js .
Теперь откройте компонент ReactstrapDemo.js и импортируйте необходимую ссылку. Давайте импортируем необходимые компоненты Reactstrap:
JavaScript
xxxxxxxxxx
1
import { Container, Col, Form, Row, FormGroup, Label, Input, Button } from 'reactstrap';
2
import { Collapse, Navbar,Nav,NavItem, NavLink} from 'reactstrap';
Добавьте следующий код в этот компонент:
JavaScript
x
1
import React, { Component } from 'react'
2
import './App.css';
3
import { Collapse, Navbar , Nav,NavItem, NavLink} from 'reactstrap';
4
import { Container, Col, Form, Row, FormGroup, Label, Input, Button } from 'reactstrap';
5
export class ReactstrapDemo extends Component {
6
render() {
7
return (
8
<div>
9
<Navbar color="light" light expand="md">
10
<Nav className="mr-auto" navbar>
12
<NavItem className="hdr">
13
<NavLink href="/components/">Demo Form Using Reactstrap</NavLink>
14
</NavItem>
15
</Nav>
18
</Navbar>
20
<Container className="themed-container" fluid="sm">
21
<Form className="form">
24
<Col>
25
<FormGroup row>
26
<Label for="name" sm={2}>Email</Label>
27
<Col sm={10}>
28
<Input type="text" id="name" placeholder="Enter Email" />
29
</Col>
30
</FormGroup>
31
<FormGroup row>
32
<Label for="address" sm={2}>Password</Label>
33
<Col sm={10}>
34
<Input type="text" id="Address" placeholder="Enter Password" />
35
</Col>
36
</FormGroup>
37
</Col>
39
<Col>
40
<FormGroup row>
41
<Col sm={5}>
42
</Col>
43
<Col sm={1}>
44
<Button color="success">Login</Button>{' '}
45
</Col>
46
<Col sm={1}>
47
<Button color="success">Cancel</Button>{' '}
48
</Col>
49
<Col sm={5}>
50
</Col>
51
</FormGroup>
52
</Col>
53
</Form>
54
</Container>
55
</div>
56
)
57
}
58
}
59
export default ReactstrapDemo;
Теперь откройте файл app.js и добавьте следующий код:
JavaScript
x
1
import React from 'react';
2
import logo from './logo.svg';
3
import './App.css';
4
import ReactstrapDemo from './ReactstrapDemo'
5
function App() {
6
return (
7
<div className="App">
8
<ReactstrapDemo></ReactstrapDemo>
9
</div>
10
);
11
}
12
export default App;
Теперь запустите проект и проверьте результат:
Теперь добавьте новый компонент с именем ReactstrapDemo1.js . Теперь откройте компонент ReactstrapDemo1.js :
JavaScript
x
1
import React, { Component } from 'react'
2
import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';
3
import { Collapse, Navbar , Nav,NavItem, NavLink} from 'reactstrap';
4
export class Reactstrapdemo1 extends Component {
5
render() {
6
return (
7
<div>
8
<Navbar color="blue" light expand="md">
9
<Nav className="mr-auto" navbar>
11
<NavItem className="hdr">
12
<NavLink href="/components/">Collapse Panel Using Reactstrap</NavLink>
13
</NavItem>
14
</Nav>
17
</Navbar>
19
<Button color="info" id="toggler" style={{ marginBottom: '1rem' }}>
20
Collapse
21
</Button>
22
<UncontrolledCollapse toggler="#toggler">
23
<Card>
24
<CardBody>
25
Jaipur (/ˈdʒaɪpʊər/ (About this soundlisten))[6][7][8] is the capital and the largest city of the Indian state of Rajasthan. As of 2011, the city had a population of 3.1 million, making it the tenth most populous city in the country
26
</CardBody>
27
</Card>
28
</UncontrolledCollapse>
29
</div>
30
31
)
32
}
33
}
34
export default Reactstrapdemo1;
Теперь откройте файл app.js и добавьте следующий код:
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import logo from './logo.svg';
3
import './App.css';
4
import Reactstrapdemo1 from './Reactstrapdemo1'
5
function App() {
6
return (
7
<div className="App">
8
<Reactstrapdemo1></Reactstrapdemo1>
9
</div>
10
);
11
}
12
export default App;
Теперь запустите проект и проверьте результат