如何將.css和.js與ReactJS + Redux架構集成？

我目前以下http://callmenick.com/post/animated-resizing-header-on-scroll和下載源代碼，它有以下幾點：如何將.css和.js與ReactJS + Redux架構集成？

我使用ReactJS +終極版，和的WebPack。我應該如何將這些文件整合到我的ReactJS架構中？例如，我不希望將所有內容都放入當前的index.html文件中，即使這些文件可能也是如此，但這並不符合ReactJS。

編輯

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" } 
     ] 
    } 
}

這一切都在這裏https://webpack.github.io/docs/stylesheets.html

編輯

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'和我的'index.html'。我只想實現導航欄到App.js。你能用你的建議來展示一個'App.js'的例子嗎？就像如何調用.css以及模塊應該如何設置一樣，源代碼index.html和classie.js應該從哪裏調用？看着網站，但需要更好的澄清。先謝謝你！ –

你也可以發佈你的webpack.config.js文件嗎？至於如何包含它，你會想要像JavaScript類一樣導入樣式表。例如，如果你有一個React組件App.js，並且它在App.css中有樣式，你可以用下面的代碼將它導入到你的App.js中： import'./App.css' 在JS的頂部。對於您的特殊情況，我會首先查找具有與該庫類似功能的React庫。否則，你最好的選擇是在它周圍建立一個React包裝器。 – jhonvolkd

感謝您的澄清！只需在編輯2下的原始文章中添加webpack.config.js即可。 –

如何將.css和.js與ReactJS + Redux架構集成？

回答

相關問題