.css와 .js를 ReactJS + Redux 아키텍처와 통합하는 방법은 무엇입니까?

나는 현재 http://callmenick.com/post/animated-resizing-header-on-scroll 다음 소스 코드를 다운로드하고 다음과 같은이 있어요 : 나는 ReactJS + 돌아 오는, 그리고 웹팩을 사용하고.css와 .js를 ReactJS + Redux 아키텍처와 통합하는 방법은 무엇입니까?

. 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>

편집 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

편집

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에 nav bar를 구현하기를 원할 것이다. 당신이 제안한 것과 함께'App.js' 예제를 보여줄 수 있습니까? .css를 호출하는 방법과 모듈이 어떻게 설정되어야하는지, 그리고 소스 코드'index.html'와'classie.js'가 어디서 호출되어야 하는가? 사이트를 보았지만 더 명확한 설명이 필요합니다. 미리 감사드립니다. –

webpack.config.js 파일도 게시 할 수 있습니까? JavaScript 클래스를 포함시키는 방법은 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 아키텍처와 통합하는 방법은 무엇입니까?

답변

관련 문제