.cssと.jsをReactJS + Reduxアーキテクチャと統合する方法は？

私は現在http://callmenick.com/post/animated-resizing-header-on-scrollを以下のソースコードをダウンロードし、それは次のように持っています：.cssと.jsをReactJS + Reduxアーキテクチャと統合する方法は？

私はReactJS + Reduxの、およびWebPACKのを使用しています。これらのファイルをReactJSアーキテクチャにどのように統合すればよいですか？たとえば、可能であれば、現在のindex.htmlファイルにすべてをスローしたくないのですが、それはReactJSには従っていません。

EDIT

App.js：

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import { bindActionCreators } from 'redux' 
import actions from '../redux/actions' 

class App extends Component { 

    render() { 
    return (
     <div> 
      Content 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return state 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(actions, dispatch) 
    } 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(App)

私の現在のindex.htmlを設定：

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Practice Example</title> 

    <meta name="description" content="Practice Example"> 

    <meta 
     name="viewport" 
     content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1" 
    > 
    <link rel="stylesheet" type="text/css" href="app.css"> 
    </head> 

    <body> 
    <div id="app"></div> 
    <script> 
     var WebFontConfig = { 
     google: { families: [ 'Roboto:400,300,500:latin' ] } 
     }; 
     (function() { 
     var wf = document.createElement('script'); 
     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
     '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
     wf.type = 'text/javascript'; 
     wf.async = 'true'; 
     var s = document.getElementsByTagName('script')[0]; 
     s.parentNode.insertBefore(wf, s); 
     })(); 
    </script> 
    <script src="bundle.js"></script> 
    </body> 
</html>

EDIT 2 - webpack.config.js

var webpack = require('webpack'); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './client/client.js' 
    ], 
    output: { 
    path: require("path").resolve("./dist"), 
    filename: 'bundle.js', 
    publicPath: '/' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['react', 'es2015', 'react-hmre', 'stage-0'] 
     } 
     } 
    ] 
    } 
}

出典

2016-08-16 Jo Ko

基本的に、Webpackを使用してCSS/LESS/SCSSスタイルシートを作成したいとします。使用しているマークアップごとに、スタイルローダーとスタイルローダーを取得する必要があります。次に、スタイルシートをテストし、スタイルローダーでそれらをローダーするモジュールを設定します。

{ 
    // ... 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style-loader!css-loader" } 
     ] 
    } 
}

それはすべてここで私は `App.js`と私の` index.html`とオリジナルのポストを更新https://webpack.github.io/docs/stylesheets.html

EDIT

var webpack = require('webpack'); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './client/client.js' 
    ], 
    output: { 
    path: require("path").resolve("./dist"), 
    filename: 'bundle.js', 
    publicPath: '/' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['react', 'es2015', 'react-hmre', 'stage-0'] 
     } 
     }, 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
     { test: /\.scss$/, loader: "style-loader!sass-loader" } 
    ] 
    } 
}

出典

2016-08-16 18:57:42 jhonvolkd

です。私は 'App.js'へのナビゲーションバーを実装したいだけです。 'App.js'であなたが示唆したものを使った例を見せてもらえますか？ .cssの呼び出し方法、モジュールの設定方法、ソースコード 'index.html'と' classie.js'はどこから呼び出され、呼び出されるべきですか？サイトを見ても、より明確な説明が必要です。前もって感謝します！ –

webpack.config.jsファイルも投稿できますか？これを組み込む方法については、JavaScriptクラスと同じようにスタイルシートをインポートしたいと思うでしょう。たとえば、React Component App.jsを持っていて、App.cssにスタイルが設定されている場合は、これをApp.jsにインポートします。 import './App.css' JSの上部にあります。私はまず、そのライブラリと同様の機能を持つReactライブラリを探します。さもなければあなたの最善の策は、その周りにReactラッパーを構築することです。 – jhonvolkd

清算を評価してください！ EDIT 2の元のポストにwebpack.config.jsを追加しました。 –

.cssと.jsをReactJS + Reduxアーキテクチャと統合する方法は？

答えて

関連する問題