私の反応プロジェクトにCSSをロードするには

私はreactjsを初めて使っています。問題があります。私の反応プロジェクトにCSSをロードするには

私はこの

<body> 

    <link href="css/rev_css.css" rel="stylesheet" type="text/css"/> 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
<!-- <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">--> 
    <script src="lib/react.js" type="text/javascript"></script> 
    <script src="lib/react.min.js" type="text/javascript"></script> 
    <script src="lib/react-dom.js" type="text/javascript"></script> 
    <script src="lib/react-dom.min.js" type="text/javascript"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> 

    <div id="root"> 
     <!-- This div's content will be managed by React. --> 
    </div> 

    <script type="text/babel"> 

     var Counter = React.createClass({ 
     getInitialState: function() { 
      return { count: 0 }; 
     }, 
     handleClick: function() { 
      this.setState({ 
      count: this.state.count + 1, 
      }); 
     }, 
     render: function() { 
      return (
      <div class="header"> 
    <label class="web_name">Revegator</label> 
    <input class="search_bar" type="search" placeholder="Search here"/> 

    <div class="box"> 
     <div class="container-4"> 
      <input type="search" id="search" placeholder="Search here" /> 
     </div> 
    </div> 

    <div class="menu_items_div"> 

     <a class="menu_items">Home</a> 
     <a class="menu_items">Profile</a> 
     <img class="menu_items" src="img/bell.png" alt=""/> 
     <img class="menu_items" src="img/drop.png" alt=""/> 
    </div> 

</div> 
     ); 
     } 
     }); 
     ReactDOM.render(
     <Counter />, 
     document.getElementById('root') 
    ); 
    </script> 
</body>

のようなコードを持っているが、CSSは、ここで適用されていません。どのように私のCSSファイルを正しく読み込むことができますか？私は今までAngularJSを使っています。角で私はちょうどこのようなCSSをロードすることができます

<link href="css/rev_css.css" rel="stylesheet" type="text/css"/>

私はどのように反応することができますか？その後<head>内、<link >タグを入れ

<!DOCTYPE html>

：

出典

2017-01-22 CraZyDroiD

リンクタグを先頭タグに入れても、それは機能しますか？多分あなたはhtml5を使用していない問題を引き起こす –

は（さえ<html>タグの前に）あなたのhtmlのTOPで次の行を追加します。

< head> 

    <!-- --> 
    <link href="css/rev_css.css" rel="stylesheet" type="text/css" /> 

</head>

それが動作しない場合、それはあなたが間違ったパスを使用して、そう、css/rev_css.cssが見つからない場合は、コンソールで確認していることを意味します。

出典

2017-01-22 10:09:56

^彼が言った。ではなく、セクションにスクリプトとCSSファイルを読み込む必要があります – Jayce444

私の反応プロジェクトにCSSをロードするには

答えて

関連する問題