Wie integriert man .css und .js mit ReactJS + Redux Architektur?

Ich verfolge derzeit http://callmenick.com/post/animated-resizing-header-on-scroll und heruntergeladen den Quellcode und es hat die folgenden:Wie integriert man .css und .js mit ReactJS + Redux Architektur?

ich verwende ReactJS + Redux und Webpack. Wie sollte ich diese Dateien in meine ReactJS-Architektur integrieren? Zum Beispiel möchte ich nicht alles in meine aktuelle index.html-Datei werfen, obwohl dies möglich ist und ReactJS nicht folgt.

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)

Mein aktueller index.html ein:

<!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'] 
     } 
     } 
    ] 
    } 
}

Quelle

2016-08-16 Jo Ko

Grundsätzlich möchten Sie Ihre CSS/LESS/SCSS Stylesheets mit Webpack erstellen. Sie sollten den Style-Loader und den Style-Loader für jedes verwendete Markup verwenden. Dann richten Sie ein Modul ein, das Ihre Stylesheets testet und mit dem Style-Loader lädt.

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

Es ist hier alles 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" } 
    ] 
    } 
}

Quelle

2016-08-16 18:57:42 jhonvolkd

ich den Original-Beitrag mit 'App.js' aktualisiert und meinem' index.html'. Ich möchte nur die Navigationsleiste zu den 'App.js' implementieren. Könnten Sie ein Beispiel mit 'App.js' zeigen, was Sie vorgeschlagen haben? Wie man die .css aufruft und wie das Modul aufgebaut werden soll und woher soll der Quellcode 'index.html' und' classie.js' kommen? Blick auf die Website, aber muss besser geklärt werden. Vielen Dank im Voraus! –

Können Sie auch Ihre Datei webpack.config.js posten? Um wie Sie es einfügen, möchten Sie das Stylesheet genau wie eine JavaScript-Klasse importieren. Wenn Sie beispielsweise eine React Component App.js haben und diese in App.css formatiert ist, würden Sie sie in Ihre App.js importieren: importieren Sie "./App.css" Am Anfang Ihrer JS. Für Ihren speziellen Fall würde ich zuerst nach einer React-Bibliothek mit ähnlicher Funktionalität zu dieser Bibliothek suchen. Ansonsten solltest du einen React-Wrapper erstellen. – jhonvolkd

Schätzen Sie die Klärung! Fügen Sie einfach die Datei webpack.config.js in den ursprünglichen Post unter EDIT 2 ein. –

Wie integriert man .css und .js mit ReactJS + Redux Architektur?

Antwort

Verwandte Themen