个人中心
gpt4 book ai didi

javascript - 如何将.css和.js与ReactJS + Redux架构集成？

转载 作者：行者123 更新时间：2023-11-28 18:26:42 25 4
gpt4 key购买 nike

我目前正在关注http://callmenick.com/post/animated-resizing-header-on-scroll并下载了源代码，它具有以下内容:

enter image description here

我正在使用 ReactJS + Redux 和 Webpack。我应该如何将这些文件集成到我的 ReactJS 架构中？例如，我不想将所有内容都放入当前的 index.html 文件中，即使这是可能的，但这不符合 ReactJS。

编辑

应用程序.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']
        }
      }
    ]
  }
}

最佳答案

基本上，您想使用 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" }
    ]
  }
}

关于javascript - 如何将.css和.js与ReactJS + Redux架构集成？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38982285/

25 4 0
文章推荐： python - SSL 上的 MITM 代理卡在客户端的 wrap_socket 上
文章推荐： javascript - 正则表达式无法验证 28 到 31 之间的日期
文章推荐： javascript - 使用 array.map() 更改数组索引
文章推荐： objective-c - 为什么我必须创建一个对象并将其分配给 Objective C 中的属性？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com