一个完整的React项目下来后的总结

#25

估计是太重了吧

#26

不知道model有没有试用GraphQL或者Falcor呢?据说Netflix在做redux+falcor的工作,应该是flux+graphql的一个替代吧。

#27

有没有遇到过中文乱码的问题?求指导

#28

业界第一个基于react的业务系统? 有点夸夸其谈了吧。我们开发的是后台数据系统,使用的是react+webpack+alt+ant-design+react-router,也是用atom作为开发工具,ImmutableJS目前还没有引进来,下一步准备进入,并跟风一下火到没朋友的redux。服务端采用nginx代理后,加载速度提升了很多,加载文件大小在300KB左右。

#29

兄弟,我是去年8月写的,而且,项目相对复杂不是内部系统

#31

感觉楼主好屌!~膜拜啊~~~但是对于还是react菜鸟的我,有好多问题想问。。。在这里可不可以向你请教一个webpack的打包问题呢?我现在是准备用 react+react-router+redux+webpack来练习搭建一个项目,但是webpack的时候出现了好多warning…而且webpack打包之后的文件居然后5M差不多,太恐怖了,我的源代码才1、2 K 啊…好希望您能够帮忙看一下这个问题…
我的webpack.config.js是这样的:

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

module.exports = {
    devtool: 'inline-source-map', 
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './app'
    ],
    output: {
        path: path.join(__dirname, 'build'),
        filename:'bundle.js'
    },
    resolve: {
        //root: path.resolve('./app'), 
        modulesDirectories: ['node_modules', 'app'],
        extensions: ['','.js']
    },
    module:{
        loaders: [
            {
                test:/\.jsx?$/,
                exclude:/node_modules/,
                loaders:[
                    'react-hot','babel?presets[]=react,presets[]=es2015'
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ]

};

然后 webpack -p 之后就出现了下面这么多警告了,打包出来的bundle.js文件居然5M那么大…

WARNING in bundle.js from UglifyJs
Condition always true [./~/react/lib/ReactMount.js:764,0]
Dropping side-effect-free statement [./~/react-router/lib/deprecateObjectPropert
ies.js:65,0]
Side effects in initialization of unused variable _ret [./~/react-router/lib/dep
recateObjectProperties.js:63,0]
Condition always true [./~/react/lib/findDOMNode.js:46,0]
Condition always true [./~/react/lib/instantiateReactComponent.js:80,0]
Dropping unreachable code [./~/react/lib/shouldUpdateReactComponent.js:40,0]
Condition always true [./~/react/lib/traverseAllChildren.js:158,0]
Condition always true [./~/react-router/lib/Redirect.js:97,0]
Side effects in initialization of unused variable _reactRouter [./modules/App.js
:2,0]
Condition always true [./~/react-router/lib/IndexRedirect.js:58,0]
Condition always true [./~/react-router/lib/IndexRoute.js:55,0]
Condition always true [./~/react-router/lib/Route.js:50,0]
Dropping side-effect-free statement [./~/react-router/lib/getComponents.js:49,0]

Side effects in initialization of unused variable _ret2 [./~/react-router/lib/ge
tComponents.js:47,0]
Condition always true [./~/react-router/~/history/lib/createMemoryHistory.js:67,
0]
Condition always true [./~/react/lib/ReactDOMComponent.js:907,0]
Dropping side-effect-free statement [./~/react/lib/ReactEventListener.js:72,0]
Dropping unused function handleTopLevelWithPath [./~/react/lib/ReactEventListene
r.js:98,0]
Dropping unused variable DOCUMENT_FRAGMENT_NODE_TYPE [./~/react/lib/ReactEventLi
stener.js:26,0]

#32

非常赞的项目分享,谢谢楼主。

#33

所有组件都使用了ShouldComponentUpdate来优化,这个能简单说下如何理解吗? 太感谢了

#34

webpack配置文件一般有2个 一个开发环境 一个生成环境 你把webpack-dev-server / react-hot / HotModuleReplacementPlugin打包进去 肯定文件很大

#35

楼主可以试试我的data-flex.css,直接在属性里使用data-flex来实现flex布局,在react里结构清晰,调整布局时,无需改动csshttps://github.com/1340641314/flex

我做的一个react小程序就是基于data-flex.css布局的:https://github.com/1340641314/react-kelink

#36

这个应该是 Typescript 语法

#37

杭州靠谱机会–前端工程师:
要求熟悉ReactJS 框架和WebPack。
上班地址:杭州-滨江区–江虹创意园
薪资:10-20K(优秀另议)
有意欢迎小窗联系我,谢谢!
514535292@qq.com

#38

现在市面上组件那么多,借鉴打造属于自己的真不是难事。

#39

楼主,请问你的路由组件和store是异步加载的吗?

#40

可以试试 React + PostCSS

#41

devtool里的inlice-source-map也会占用空间。souce-map的作用是在你debug的时候,方便你看babel编译之前的代码。我觉得小项目,不如用souce-map,看得最清楚。

#42

谢谢 大侠 我下了你的demo 谢谢

#43
2 Likes
#44

楼主好,
请问是否遇到过路由使用url(没有使用hash)时,在非入口页刷新浏览器,出现404的情况呢?

#45

太常见了,browserHistory请设置服务器请求转发