文档章节

用react + react-redux构建项目 基本配置

WolfX
 WolfX
发布于 2017/07/14 17:52
字数 347
阅读 85
收藏 1

依赖包:

{
  "dependencies": {
    "moment": "^2.18.1",
    "react": "^15.5.4",
    "react-addons-css-transition-group": "^15.5.2",
    "react-dom": "^15.5.4",
    "react-fastclick": "^3.0.2-alpha.1",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-swipe": "^5.0.8",
    "redux": "^3.6.0",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "eslint": "^4.0.0",
    "eslint-plugin-react": "^7.1.0",
    "webpack": "^2.6.1"
  }
}

webpack的配置:

var webpack = require("webpack");
var path = require("path");


module.exports = {
    entry: {
        app:path.resolve(__dirname, './src/main.jsx'),
        vendor : [
            'react',
            'react-dom',
            'react-router',
            'react-router-dom',
            // 'react-addons-css-transition-group',
            'react-fastclick',
            'react-redux',
            'react-swipe',
            'redux',
            'underscore',
            'moment'
            
        ]
    }, // 入口文件
    devtool: 'source-map',  // 调试时定位到编译前的代码位置,推荐安装react插件
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: '[name].bundle.js' // 打包输出的文件
    },
    module: {
        rules: [{
            test: /\.jsx?$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015',  'stage-0', 'react']
            }
        }]
    },
    resolve: {
        // 现在你import文件的时候可以直接使用import Func from './file',不用再使用import Func from './file.js'
        extensions: ['.js', '.jsx']
    },
    plugins: [
		new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        })
	],
    externals: {
        //require("zepto") is external and available
        //on the global var Zepto
        //'zepto': 'Zepto'
    },
    
};

src:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';

const reducer = (state = {}, action) => {
    switch (action.type) {
        case "test":
            return { ...state, ...{ demo: action.data } };
        default:
            return state;
    }
};

const store = createStore(reducer);


// 不稳定的语法,ES7装饰器
// @connect(mapStateToProps,mapDispatchToProps)
class App extends React.Component {
    render() {
        return (
            <div>
                <div onClick={ev => this.props.triggerFun("WOW!")}>Hello</div>
                <div>{this.props.demo}</div>
            </div>
        );
    }
}

const mapStateToProps = state => ({ demo: state.demo });
const mapDispatchToProps = dispatch => ({ triggerFun: data => dispatch({ type: "test", data: data }) });
const AppView = connect(mapStateToProps, mapDispatchToProps)(App);

ReactDOM.render(
    <Provider store={store}>
        <AppView />
    </Provider>,
    document.getElementById("react-root")
);

如果使用了路由:

class MainPage extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Router>
                    <div>
                        <Route exact path="/" component={HelloView} />
                    </div>
                </Router>
            </Provider>
        );
    }
}

© 著作权归作者所有

下一篇: Electron起步
WolfX

WolfX

粉丝 52
博文 246
码字总数 31477
作品 0
南京
技术主管
私信 提问
基于 Webpack 4 和 React hooks 搭建项目

面对日新月异的前端,我表示快学不动了😂。 Webpack 老早就已经更新到了 V4.x,前段时间 React 又推出了 hooks API。刚好春节在家里休假,时间比较空闲,还是赶紧把 React 技术栈这块补上。...

Jeff.Zhong
02/04
0
0
使用 create-react-app 构建 react应用程序

本文主要是对SPA搭建的实践过程讲解,在对react、redux、react-router有了初步了解后,来运用这些技术构建一个简单的单页应用。这个应用包括了侧边导航栏与主体内容区域。下面简单罗列了将会...

李晓艳
2018/04/17
358
0
如何在非 React 项目中使用 Redux

本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息。 目录 1、前言 2、单纯使用 Redux 的问题 2.1、问...

胡子大哈
2017/06/28
0
0
基于react native打造属于自己的博客app

关注react native这个技术很久了,去年就做了一个简单的Demo,最近有时间,重新了解了一下react native的现状,发现已经有很大的进步,现在完善了一下原有的项目,并重新开源共享一下。 背景 ...

IT米粉
2017/10/17
0
0
精益 React 学习指南 (Lean React)

本书内容 这本书我会由简单到复杂的带领大家进入 React 的世界, 其中 1 - 3 章节都是 React 的基础知识,需要提醒读者的是大多数的基础知识都可以通过 React 的官方文档学习,如果对英语敏感...

陈学家
2016/05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

log4j起不来: No appenders could be found for logger

在mvn test时,log4j一起起不来,log message打不出来 原因: log4j.properties 文件没不存在,或存在,但放错路径 解:把log4j.properties放入mvn 默认的resources跑路径下面:./src/main/...

Rebecca_Hu
14分钟前
3
0
ETH 开发工作记录

测试是否连接成功 String web3ClientVersion = web3j.web3ClientVersion().send().getWeb3ClientVersion(); log.info("version=" + web3ClientVersion);...

xiaodong16
16分钟前
1
0
ntpserver配置

# For more information about this file, see the man pages # ntp.conf(5), ntp_acc(5), ntp_auth(5), ntp_clock(5), ntp_misc(5), ntp_mon(5). driftfile /var/lib/ntp/drift # Permit ti......

Archer99
22分钟前
2
0
技术分享 | delete 语句引发大量 sql 被 kill 问题分析

作者:王航威 有赞 MySQL DBA,擅长分析和解决数据库的性能问题,利用自动化工具解决日常需求。 现象 某个数据库经常在某个时间点比如凌晨 2 点或者白天某些时间段发出如下报警 [Critical][p...

爱可生
27分钟前
3
0
Spring Boot 2.X(十六):应用监控之 Spring Boot Actuator 使用及配置

Actuator 简介 Actuator 是 Spring Boot 提供的对应用系统的自省和监控功能。通过 Actuator,可以使用数据化的指标去度量应用的运行情况,比如查看服务器的磁盘、内存、CPU等信息,系统的线程...

朝雾轻寒
31分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部