初学者的React全家桶完整实例

骑猪看日落 2022-05-31 08:20 241阅读 0赞

# 概述 #

该项目还有些功能在开发过程中，如果您有什么需求，欢迎您与我联系。我希望能够通过这个项目对React初学者，或者Babel/webpack初学者都有一定的帮助。我在此再强调一下，在我写的这些文章末尾都附加了很多参考文献，而这些参考文献的作用对我的帮助真的很大，在此表示感谢!!!!!

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10355.html][http_www.demodashi.com_demo_10355.html] ####

写在前面的话

自已以前对redux,[React][],rect-redux,[react][React]\-router都是有一点的了解，并且在真实的项目中也多少有些涉及。但是不足的地方在于没有做一个demo将他们串起来,所以总是感觉似懂非懂。特别是react服务端渲染这一块，对于自己完全就是一个黑箱，这对我深入理解react同构等稍微难一点的内容产生了很大的影响。所以我最后写了这个例子，希望有同样困扰的同学能够有所收获。也欢迎star,issue。

不得不说，当你真实的去做一个项目的时候，哪怕是一个小小的demo，这都会完全颠覆你对React生态的认识。从一开始的不知道如何入手，到遇到各种困难，然后各种google，最后解决问题，你会发现自己是真的在成长。遇到的问题以及解决方案，我在文章列表中也给出了。时间+经历=成长，对于我来说就够了。默默的对自己说一句，加油把少年!

#### 1、项目说明 ####

首先下载该项目，然后直接运行下面的命令。

npm install
    npm run dev
    //npm run pro
    //生产模式下执行注释部分命令

打开[http://localhost:3222/][http_localhost_3222] 就可以看到效果。项目截图如下：

![这里写图片描述][1498362188891062712.png]

#### 2、项目基本知识点 ####

#### 2.1 代理与反代理的基本内容 ####

使用http-proxy来完成。其反向代理的原理如下图：

![这里写图片描述][1498362188941043270.png]

通过如下代码完成，其相当于一个反向代理服务器，向我们的代理服务器，即API服务器发送请求:

#### 2.2 react全家桶常见库 ####

react-router,react,redux,react-redux,redux-async-connect,redux-thunk等一系列react相关的基本内容。其中最重要的就是我们的redux-async-connect，他可以在跳转到某个页面之前或者之后发起某一个ajax请求。用法如下:

@asyncConnect([{  //其中helpers来自于服务端渲染
      promise: ({store: {dispatch, getState},helpers}) => {  const promises = [];  const state = getState();  //得到store的当前状态
      if(!isInfoLoaded(state)){
        promises.push(dispatch(loadInfo()));
      }  if(!isAuthLoaded(state)){
        promises.push(dispatch(loadAuth()));
      }  //如果没有登录或者相应的数据没有加载完成，那么我们在此时加载数据
       return Promise.all(promises);
      }
    }])

其中helpers方法来自于其服务端渲染的loadOnServer方法:

loadOnServer({...renderProps, store, helpers: {client}}).then(() => {        const component = (          <Provider store={store} key="provider">
                <ReduxAsyncConnect {...renderProps} />
              <\/Provider>
            )
            res.status(200);
            global.navigator = {userAgent: req.headers['user-agent']};
            res.send('<!doctype html>\n' +
              renderToString(<Html assets={webpackIsomorphicTools.assets()} component={component} store={store}\/>));
          });

#### 2.3 自定义bootstrap ####

使用bootstrap-loader来加载自定义的bootstrap文件(.bootstraprc)，从而减小打包后文件的大小。我们通过在项目目录下建立.bootstraprc文件，该文件可以指定我们需要使用的bootstrap样式，是否使用[JavaScript][]等。如通过下面的配置：

scripts: false

就可以在当前应用中不引入bootstrap的[javascript][JavaScript]，而只是单独使用样式。如果在单独使用样式的情况下我们可以结合react-bootstrap，react-router-bootstrap来完成页面的各种交互。如果你要单独使用这部分的内容，你可以[参考这里][Link 1]

#### 2.4 webpack的HMR功能集成 ####

使用webpack实现HMR(react-transform-hmr)等基本功能，以及介绍了webpack-dev-middleware，webpack-hot-middleware等的使用。

babelReactTransformPlugin[1].transforms.push({
          transform: 'react-transform-hmr',
          imports: ['react'],
          locals: ['module']
        });

如果你想深入了解HMR，你也可以[参考这里][Link 2]。

#### 2.5 redux开发工具使用 ####

redux-devtools,redux-devtools-dock-monitor,redux-devtools-log-monitor等redux开发工具的使用。只需要添加下面的一段代码就可以了:

import React from 'react';
    import { createDevTools } from 'redux-devtools';
    import SliderMonitor   from "redux-slider-monitor";
    import LogMonitor from 'redux-devtools-log-monitor';
    import DockMonitor from 'redux-devtools-dock-monitor';
    export default createDevTools(  <DockMonitor changeMonitorKey='ctrl-m' defaultPosition="right"  toggleVisibilityKey="ctrl-H"
                   changePositionKey="ctrl-Q">
        <LogMonitor />
        <SliderMonitor  keyboardEnabled />
      <\/DockMonitor>);

当然，如果要添加这部分代码要做一个判断:

if (__DEVELOPMENT__ && __CLIENT__ && __DEVTOOLS__) {    const { persistState } = require('redux-devtools');    const DevTools = require('../containers/DevTools/DevTools');
        finalCreateStore = compose(
          applyMiddleware(...middleware),
          window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(),      //如果有window.devToolsExtension，那么使用用户自己的，否则使用我们配置的
          persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
        )(_createStore);
      }

也就是说我们只会在开发模式下，同时客户端代码(服务端显然是不需要的，该工具只是为了在客户端查看当前state的状态)中，以及DEVTOOLS为true中才会添加我们的devTool工具。

#### 2.6 react服务器端同构 ####

服务端同构是react开发中不可避免的问题，因为服务端渲染在一定程度上能够减少首页白屏的时间，同时对于SEO也具有很重要的作用。React中关于服务端渲染的介绍只是给出一个match方法，而更加深入的知识却要自己反复琢磨。

match({ history, routes: getRoutes(store), location: req.originalUrl }, (error, redirectLocation, renderProps) => {    if (redirectLocation) {
          res.redirect(redirectLocation.pathname + redirectLocation.search);      //重定向要添加pathname+search
        } else if (error) {
          console.error('ROUTER ERROR:', pretty.render(error));
          res.status(500);
          hydrateOnClient();
        } else if (renderProps) {
          loadOnServer({...renderProps, store, helpers: {client}}).then(() => {        const component = (          <Provider store={store} key="provider">
                <ReduxAsyncConnect {...renderProps} />
              <\/Provider>
            );
            res.status(200);
            global.navigator = {userAgent: req.headers['user-agent']};
            res.send('<!doctype html>\n' +
              renderToString(<Html assets={webpackIsomorphicTools.assets()} component={component} store={store}\/>));
          });
        } else {
          res.status(404).send('Not found');
        }
      });
    });

针对这部分内容我写了[react服务端渲染中的renderProps与react-data-checksum][react_renderProps_react-data-checksum]以及[React服务端同构深入理解与常见问题][React 1]等系列文章，也欢迎阅读。文中提到了webpack-isomorphic-tools，该工具使得在服务端也能够处理less/css/scss,image等各种文件，从而使得服务端同构成为现实(服务端可以使用css module等特性生成className，从而使得checksum在客户端与服务端一致，防止客户端重新渲染)。

#### 2.7 各种打包工具 ####

better-npm-run以及[webpackcc][]等打包工具的使用。前者在package.json中直接配置就行:

"betterScripts": {   
     "start-prod": {     
      "command": "node ./bin/server.js",    
        "env": {     
           "NODE_PATH": "./src",     
           "NODE_ENV": "production",      
             "PORT": 8080,      
               "APIPORT": 3030
          }
        }
    }

其主要作用在于方便设置各种环境变量。而webpackcc集成了多种打包方案，总有一个适合你

#### 2.8 服务端客户端其他的库 ####

superagent,express等与服务器相关的内容。其中前者主要用于向服务端发送请求，包括服务端向反向代理服务器以及客户端向服务器发送请求。

#### 2.9 高阶组件的组件复用逻辑 ####

高阶组件对于组件复用是相当重要的。比如有一种情况，你需要获取所有的用户列表，图书列表,\*\*列表等等，然后在数据获取完成后来重新渲染组件，此时你也可以考虑高阶组件的方式：

//此时我们只是需要考虑真正的异步请求数据的逻辑，以及对prop进行特别处理的逻辑，而不用管当前是图书列表，还是用户列表等等function connectPromise({promiseLoader, mapResultToProps}) {
      return Comp=> {    return class AsyncComponent extends Component {
          constructor(props) {
            super();        this.state = {
              result: undefined
            }
          }
          componentDidMount() {
            promiseLoader()
              .then(result=> this.setState({result}))
          }
          render() {        return (          <Comp {...mapResultToProps(props)} {...this.props}/>
            )
          }
        }
      }
    }
    const UserList = connectPromise({
        promiseLoader: loadUsers,
        mapResultToProps: result=> ({list: result.userList})
    })(List); //List can be a pure component
    
    const BookList = connectPromise({
        promiseLoader: loadBooks,
        mapResultToProps: result=> ({list: result.bookList})
    })(List);

你应该很容易就看出来了，对于这种列表类型的高阶组件抽象是相当成功的。我们只需要关注重要的代码逻辑，在componentDidMount请求数据结束后我们会自动调用setState来完成组件状态的更新，而真实的更新的组件却是我们通过自己的业务逻辑来指定的,可以是BookList,UserList,\*\*List等等。这样具有副作用的高阶组件复用也就完成了。如果你需要深入了解高阶组件的内容，请[查看我的这篇文章][Link 3]。在该项目中我们使用了[multireducer][]

#### 3、React全家桶文章总结 ####

关于该项目中使用到的所有的react相关知识点我都进行了详细总结。但是很显然，如果你要学习react，必须对webpack和babel都进行一定的了解。因为在写这个项目之前，我只是一个react/webpack/babel的新手，因此也是在不断的学习中摸索前进的。遇到了问题就各种google,baidu。而且我对于自己有一个严格的要求，那就是要知其然而且要知其所以然，因此我会把遇到的问题都进行深入的分析。下面我把我在写这个项目过程遇到问题，并作出的总结文章贴出来，希望对您有帮助。我也希望您能够关注每一篇文章下面的参考文献，因为他们确实都是非常好的参考资料。

#### 3.1 React+redux相关 ####

[React高阶组件详解][Link 3]

[React同构你了解多少以及常用问题][React 1]

[renderProps签名与React服务端渲染][react_renderProps_react-data-checksum]

[React的material-ui学习实例][React_material-ui]

[react的context困境与解决方法][react_context]

[redux-form的使用实例][redux-form]

[redux的原理浅析][redux]

[使用react组件的ref回调函数][react_ref]

[react-redux服务端渲染的一个完整例子][react-redux]

#### 3.2 webpack相关 ####

[webpack-dev-server原理分析][Link 2]

[webpack热加载HMR深入学习][webpack_HMR]

[集成webpack,webpack-dev-server的打包工具][webpackcc]

[prepack与webpack对比][prepack_webpack]

[webpack插件书写你需要了解的知识点][webpack]

[CommonsChunkPlugin深入分析][CommonsChunkPlugin]

[CommonsChunkPlugin配置项深入分析][CommonsChunkPlugin 1]

[webpack.DllPlugin提升打包性能][webpack.DllPlugin]

[webpack实现code splitting方式分析][webpack_code splitting]

[webpack中的externals vs libraryTarget vs library][webpack_externals vs libraryTarget vs library]

[webpack的compiler与compilation对象][webpack_compiler_compilation]

[webpack-dev-middleware原理分析][webpack-dev-middleware]

#### 3.3 Babel相关 ####

[Babel编译class继承与源码打包结果分析][Babel_class]

[使用babel操作AST来完成某种特效][babel_AST]

[babylon你了解多少][babylon]

#### 3.4 其他内容 ####

[bootstrap-loader自定义bootstrap样式][bootstrap-loader_bootstrap]

[前端工程师那些shell命令学习][shell]

[npm环境变量与常见命令][npm]

[npm中script生命周期方法的深入探讨][npm_script]

[npm version与npm dist tag详解][npm version_npm dist tag]

[linux中软链接与硬链接的区别学习][linux]

[React路上遇到的那些问题以及解决方案][React 2]

[npm，webpack学习中遇到的各种问题][npm_webpack]

#### 4、你能够学到的东西 ####

内部所有的代码都有详细的注释，而且都给出了代码相关说明的链接。通过这个项目，对于react\*全家桶\*应该会有一个深入的了解。该项目牵涉到了常见的React生态中的库，因此命名为全家桶。该项目用到的React生态的主要库如下：

react react-addons-perf react-bootstrap react-dom react-helmet react-redux react-router react-router-bootstrap react-router-redux react-tap-event-plugin react-transform-hmr redux redux-async-connect redux-devtools redux-devtools-dock-monitor redux-devtools-log-monitor redux-form, redux-slider-monitor redux-thunk multireducer ........

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10355.html]: http://www.demodashi.com/demo/10355.html
[React]: http://lib.csdn.net/base/react
[http_localhost_3222]: http://localhost:3222/
[1498362188891062712.png]: /images/20220531/4f8721e0f0c64c32bc613b6dbcff3a60.png
[1498362188941043270.png]: /images/20220531/5e5b307adb6e4893bc83324a8e50b418.png
[JavaScript]: http://lib.csdn.net/base/javascript
[Link 1]: https://github.com/liangklfangl/bootstrap-loader-demo/tree/daily/0.0.1
[Link 2]: https://github.com/liangklfangl/webpack-dev-server
[react_renderProps_react-data-checksum]: https://github.com/liangklfangl/react-router-renderProps
[React 1]: https://github.com/liangklfangl/react-static-ajax
[webpackcc]: https://github.com/liangklfangl/wcf
[Link 3]: https://github.com/liangklfangl/high-order-reducer
[multireducer]: http://blog.csdn.net/liangklfang/article/details/src/redux/modules/reducer.js
[React_material-ui]: https://github.com/liangklfangl/material-ui-webpack-demo
[react_context]: https://github.com/liangklfangl/react-context-demo
[redux-form]: https://github.com/liangklfangl/redux-form-demo
[redux]: https://github.com/liangklfangl/redux-createstore
[react_ref]: https://github.com/liangklfangl/react-ref
[react-redux]: https://github.com/liangklfang/universal-react-demo
[webpack_HMR]: https://github.com/liangklfangl/webpack-hmr
[prepack_webpack]: https://github.com/liangklfangl/prepack-vs-webpack
[webpack]: https://github.com/liangklfangl/webpack-common-sense
[CommonsChunkPlugin]: https://github.com/liangklfangl/commonchunkplugin-source-code
[CommonsChunkPlugin 1]: https://github.com/liangklfangl/commonsChunkPlugin_Config
[webpack.DllPlugin]: https://github.com/liangklfangl/webpackDll
[webpack_code splitting]: https://github.com/liangklfangl/webpack-code-splitting
[webpack_externals vs libraryTarget vs library]: https://github.com/liangklfangl/webpack-external-library
[webpack_compiler_compilation]: https://github.com/liangklfangl/webpack-compiler-and-compilation
[webpack-dev-middleware]: https://github.com/liangklfang/webpack-dev-middleware
[Babel_class]: https://github.com/liangklfangl/babel-compiler-extends
[babel_AST]: https://github.com/liangklfangl/astexample
[babylon]: https://github.com/liangklfangl/babylon
[bootstrap-loader_bootstrap]: https://github.com/liangklfangl/bootstrap-loader-demo
[shell]: https://github.com/liangklfangl/shellGlobStar
[npm]: https://github.com/liangklfangl/npm-command
[npm_script]: https://github.com/liangklfangl/devPlusDependencies
[npm version_npm dist tag]: https://github.com/liangklfangl/npm-dist-tag
[linux]: https://github.com/liangklfangl/shellGlobStar/blob/master/src/others/link-hard-soft.md
[React 2]: http://blog.csdn.net/liangklfang/article/details/53694994
[npm_webpack]: http://blog.csdn.net/liangklfang/article/details/53229237
[http_www.demodashi.com]: http://www.demodashi.com/