React-bootstrap setup für das neueste kriasoft/react-starter-kit

Question

Ich bin ein wenig neu in der Welt von ReactJS, aber ich habe schon eine ganze Weile in Javascript programmiert. Ich liebe, was ReactJS macht, wie ich in reinem JS vor der Verwendung von Design Patterns und OOP programmiert habe Ich halte dies für ein RIESIGES Upgrade für mich.

Ich habe mehrere Tutorials gelesen und viel über React gelesen, so dass ich meine erste App mit kriasoft/react-starter-kit gestartet habe, um meine Produktivität zu steigern, auch finde ich es gut, dass ich eine Richtlinie haben kann, wie ist das "richtig "Art zu schreiben reagieren.

Ich habe beim Versuch, React-Bootstrap in das vorhandene Starter-Kit von Kriasoft zu integrieren, feststecken.

kann ich verschiedene Komponenten von React-Bootstrap importieren (wie wir Buttons etc.) durch einfache

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

in einer Komponente meines eigenen, mein Problem ist, dass ich keine CSS auf diejenigen haben Reagieren - Bootstrap-Komponenten.

Ich habe bereits den React-Bootstrap Guide durchgelaufen, aber ich war nicht so hell, um herauszufinden, was ich falsch mache.

Ich habe react-bootstrap $ npm install react-bootstrap --save mit installiert, aber ich bin nicht sicher, wo ich soll den neuesten zusammengestellt und minimierte CSS aus Bootstrap

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

Wäre toll, wenn mir jemand helfen könnte, indem ich eine Anleitung oder Intuition anbiete.

Answer 1

Sie auch in create-react-apphttps://github.com/facebookincubator/create-react-app

suchen könnte prüfen Es ist ein Starter-Kit von dem Team Reagieren gebaut. Es vereinfacht Ihren Arbeitsablauf und Sie können sich auf das Lernen/Erstellen Ihres Reaktionsprojekts konzentrieren.

Ihre Frage zu beantworten, wenn Sie es über npm installiert haben, können Sie es über verwenden

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

Dann können Sie es verwenden, um Ihre

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

Für Bootstrap css machen in

Der einfachste Weg wäre, die cdn-Version von bo zu verwenden otstrap CSS in Ihrer index.html Datei.

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

Aber wenn Sie es als Teil Ihres Build-Prozess importieren wollen, müssen Sie Bootstrap npm install --save bootstrap seit react-bootstrap installieren müssen nicht mit der CSS-Datei kommen. Dann importieren Sie es als

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

Sie müssen sicherstellen, dass Ihr webpack CSS-Loader verwendet.