Реакт-загрузочная установка для новейшего комплекта kriasoft/реактора-стартера

Question

Я немного новичок в мире ReactJS, но я уже некоторое время кодирую в Javascript. Любить то, что ReactJS делает, когда я кодировался в чистом JS, прежде чем использовать Design Patterns и OOP. Я считаю это ОГРОМНОЕ обновление для меня.

Я следил за несколькими учебными пособиями и читал много о реактиве, поэтому я закончил свое первое приложение, используя kriasoft/react-starter-kit, чтобы повысить свою производительность, также я считаю, что я могу получить некоторые рекомендации о том, как «правильно» «способ письма реагирует.

Я застрял, пытаясь интегрировать React-Bootstrap в существующий набор для начинающих от kriasoft.

я могу импортировать различные компоненты из React-Bootstrap (такие компании Пуговицы и т.д.) просто

import Button from '../../../node_modules/react-bootstrap';

в компоненте моей, моя проблема в том, что у меня нет CSS на тех React - Компоненты Bootstrap.

Я уже прошел руководство по началу работы с React-Bootstrap, но я не был таким ярким, чтобы понять, что я делаю неправильно.

Я установил react-bootstrap используя $ npm install react-bootstrap --save , но я не уверен, где я должен включить последнюю скомпилированную и уменьшенную CSS от начальной загрузки

<link rel="stylesheet" href="maxcdn....blahblah....bootstrap.min.css">.

Было бы здорово, если бы кто-то помог мне настроить это, предоставив руководство или некоторую интуицию.

Answer 1

Вы могли бы также рассмотреть вопрос о поиске в create-react-apphttps://github.com/facebookincubator/create-react-app

Это стартовый набор, построенный командой React. Это упрощает рабочий процесс и позволяет сосредоточиться на изучении/создании вашего проекта реагирования.

Чтобы ответить на ваш вопрос, как только вы установите его с помощью npm, Вы можете использовать его с помощью

import { Button, Row, Col } from 'react-bootstrap'

Затем вы можете использовать его в рендеринге

<Row> 
    <Col md={6}> 
     <Button bsStyle="primary" bsSize="large">Submit</Button> 
    </Col> 
</Row> 

Для Bootstrap CSS

Простейшим способом было бы использовать версию cdn bo otstrap css в файле index.html.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Но если вы хотите импортировать его как часть процесса сборки, вам необходимо установить загрузчик npm install --save bootstrap так react-bootstrap не приходит с файлом CSS. Затем импортировать его как

import 'bootstrap/dist/css/bootstrap.css';

Вы должны убедиться, что ваш WebPack использует CSS-погрузчик.