create-react-appを使用して設定された新しい反応アプリに外部JavaScriptライブラリを含める

Question

私はreact.jsを初めて使用しています。私は、外部のJavaScriptライブラリ、すなわちbootstrap.min.js、jquery.min.js、slider.js、jquery-flexslider.min.jsを持つテーマをダウンロードしました。

私が作成-反応するアプリを使用して反応させ、アプリを作成し、私は私のパブリックフォルダのindex.html内のすべての外部JavaScriptライブラリやCSSファイルはアプリを反応した私はapp.jsで私のテーマのindex.htmlのすべてのHTMLをコピーし、コピーダウンロード。すべてのCSSは正常に動作していますが、JavaScriptライブラリはページ上で動作していません。

以下は、パブリックフォルダのindex.htmlにCSSファイルとJavaScriptライブラリをどのように含めるかのデモです。

<script src="/assets/javascript/jquery.min.js"></script> 
<script src="/assets/javascript/bootstrap.min.js"></script> 
<script src="/assets/javascript/jquery.easing.js"></script>  
<script src="/assets/javascript/jquery-waypoints.js"></script> 

<link rel="stylesheet" type="text/css"href="/assets/stylesheets/bootstrap.css" /> 
 
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/style.css"/> 
 
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/responsive.css"/>`

今、私の質問は、それが作業を開始するように私はJavaScriptライブラリを含めるべきか、です。私は、私の反応アプリケーションのsrcフォルダにすべてのファイルを置こうとしましたが、まだ動作しません。

Answer 1

jqueryの代わりにreact-bootstrapを使用し、ブートストラップファイルを小さくすることを検討する必要があります。 react-bootstrapを使用すると、選択的にインポートして使用できるようにうまく設計された反応コンポーネントとして、ブートストラップ3（4つは動作中）になります。だから、あなたは

import React from 'react' 
import{ string } from 'prop-types' 
import { Col, Row, Label } from 'react-bootstrap' 

const PrettyThing = ({ thing }) => (
    <Row> 
    <Col xs={9} xsOffset={1}> 
     <Label bsStyle="success">{thing}</Label> 
    </Col> 
    </Row> 
) 

PrettyThing.propTypes = { thing: string.isRequired } 

export default PrettyThing 

とwebpackはそれがすべてのようにだけ必要なCSSが構築されますスライスしてさいの目に切っだどのように処理することができます。

https://react-bootstrap.github.io/getting-started/introduction/を参照してください。