理解React程序(2)-初始化

构建React-Redux(后面就简称R/R)的时候,用户所看到的文件是从服务器端加载,这其中涉及到了React的虚拟渲染,Node.js服务器的使用,Node静态文件的加载.
整个流程参考使用React,Redux,redux-saga构建一个应用的代码.

下面我们先看看整个代码结构

app文件结构

首先我们按照readme.md文件的指示,npm start.
可以看到如下的结果：

AppledeMacBook-Pro:egghead-react-redux-image-gallery apple$ npm start

> [email protected] start /Users/apple/Public/Git_Bank/egghead-react-redux-image-gallery
> budo ./src/main.js:build.js --dir ./src --verbose  --live -- -t babelify

[0000] info  Server running at http://127.0.0.1:9966/ (connect)
[0000] info  LiveReload running on 35729

---

解释，可以看到执行了npm start脚本以后会启动一个服务器,这个服务器使用的组件是budo,加载的代码是main.js.服务器启动的port：9966这个端口号十分的古怪.看到这里我看看里面到底是怎么使用以来项目,既然用了budo包,我们就在项目中使用关键词budo进行搜索,时间比较久,但是最终结果还是出来了
一个文件里面有我们需要的内容

/Users/apple/Public/Git_Bank/egghead-react-redux-image-gallery/node_modules/budo/lib/parse-args.js:
  51  
  52  module.exports.defaults = {
  53:   title: 'budo',
  54    port: 9966,
  55    debug: true,

---

看就在这里定义了端口号,把它改成9988试试,没有问题.如果程序加载成功，说明当前的服务器的配置和依赖是正常的,如果看不到相关的代码,从初始化文件开始就可以一步一步找到相关的内容. 这里启动的是main.js文件,这只能时候是幕后推动者,我们在浏览器端看到的是index.html文件,对于这个文件,现在在编辑里看到的这个文件和你启动npm start是的index.html文件实际不是同一个东西,现在再文件夹里看到的这个文件只是相当于一个模板.直接在文件夹中点击这个文件的时候,浏览器中查看一下资源,发现最下面的bundle.js获取失败.没有经过服务端的browserify的打包,还没有生成这个文件.但是生成这个文件任务也没有完成.
budo启动的时候,browersify会把我们需要的R/R文件打包成bundle.js文件.稍后会启动一个静态文件的服务器.类似这样的node.js服务器

'use strict';
var
 http    = require( 'http'    ),
 express = require( 'express' ),

 app     = express(),
 server  = http.createServer( app );
// ------------- END MODULE SCOPE VARIABLES ---------------

// ------------- BEGIN SERVER CONFIGURATION ---------------
app.configure( function () {
 app.use( express.bodyParser() );
 app.use( express.methodOverride() );
 app.use( express.static( __dirname + '/public' ) );
 app.use( app.router );
});

app.configure( 'development', function () {
 app.use( express.logger() );
 app.use( express.errorHandler({
   dumpExceptions : true,
   showStack      : true
 }) );
});

app.configure( 'production', function () {
 app.use( express.errorHandler() );
});

app.get( '/', function ( request, response ) {
 response.redirect( ‘/index.html' );//默认首页文件的加载
});
// -------------- END SERVER CONFIGURATION ----------------

// ----------------- BEGIN START SERVER -------------------
server.listen( 3000 );
console.log(
 'Express server listening on port %d in %s mode',
  server.address().port, app.settings.env
);
// ------------------ END START SERVER --------------------

---

上面是一个express的静态文件的服务器,当这个服务器启动的时候,默认就会加载这个index.html文件.
当然打包以后成为bundle.js文件然后通过和css文件一样的方式直接路径导入也是可以的.两者唯一区别就是代码的打包过程.通过服务器端打包,js文件可以热更新,由于没有涉及到DOM的渲染工作,页面都不会有什么改变.
从服务器加载的index.html文件才是整个React项目的起点.如果把Redux看做是实现一个数据库,React的作用就是渲染出用户可以操作的界面(UI Component).所以加载index.html文件以后需要做两件事请,就是Redux的数据的初始化,也就是State的初始化工作.React的组件的渲染工作.UI组件的渲染是React的独门秘籍,很多资料都讲过,我就不说了.
我们主要看看Redux的数据初始化工作.
注意的代码是main.js,index.html

---

main.js

import "babel-polyfill"

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import {Provider} from 'react-redux'
import createSagaMiddleware from 'redux-saga'
//import devTools from 'remote-redux-devtools'


import Gallery from './components/Gallery'
//import DevTools from './components/DevTools'
import reducer from './reducers'

import {watchLoadImages} from './sagas';

const store = createStore(
 reducer,
 applyMiddleware(createSagaMiddleware(watchLoadImages))
 //DevTools.instrument(),
);

ReactDOM.render(
 
   
 ,
 document.getElementById('root')
);

---

index.html