稍白学react之altjs官方实例初探

注:伊始在此以前要大家对reactjs和FLUX有要旨的摸底,可以参照最终一稍微节。假若现在着实没有工夫错开探听之,也能够先行按照本章的讲述将实例搭建运行起来,到常对正在代码修改调试,相信广大知识点就自不过然的过渡了。

8. dispatch 函再三请勿定义错误


这会儿大家查阅打开的网页,可以看Locations和Favorites五个列表的标题都已显示出,不过Locations下边的情节可从不亮。打开chrome开发调试工具:

dispatch-not-found

察觉凡是LocationActions.js中,每个action都调用了dispatch方法:

var alt = require('../alt');
class LocationActions { 
  updateLocations(locations) { 
      this.dispatch(locations); 
  } 
  fetchLocations() { 
      this.dispatch(); 
  }
  locationsFailed(errorMessage) { 
      this.dispatch(errorMessage); 
  } 
  favoriteLocation(location) { 
      this.dispatch(location); 
  }
}
module.exports = alt.createActions(LocationActions);

查看altjs官网得知,最新版本被大家不应该显式调用dispatch来将action分发至store,而是应当经过return来达成。所以最后的代码应该改成为:

var alt = require('../alt');
class LocationActions { 
  updateLocations(locations) { 
    return locations; 
  } 
  fetchLocations() { 
    return null; 
  } 
  locationsFailed(errorMessage) { 
    return errorMessage; 
  } 
  favoriteLocation(location) { 
    return location; 
  }
}
module.exports = alt.createActions(LocationActions);

运行npm run start命令后大家可以看出所有页面会正常显示和操作:

page

9. 小结


作为同名小白,通过本次的行,这里关键有几乎独地点用有些了下以便为自己提个醒:

  • 透过npm outdate查看时因包之本情状
  • 经将package.json的依赖性包之版本信息设置成*号,然后通过“npm update
    –save“ 或者“npm update –save-dev“
    可以批量将持有的依包升级至最新版本(那里而爆发另更好的方的乞求以评头论足着指教)
  • 官方的reactjs-tutorial实例并无当即更新,稍不留神就可能学到之是有些破旧的文化-
    境遇问题时可以预先考虑去官网找答案,效率往往会于去google来得抢还准确

本章的系代码都放github,本人fork了alt-tutorial到alt-tutorial-webpack,大家可以clone出来然后切换来01这些branch来查看本篇著作提到的照应代码修改。

github地址:https://github.com/kzlathander/alt-tutorial-webpack.git

待通过本章将法定实例援助上流行的依赖性包跟工具确保后,以后碰面准备上马几节来因新型的altjs版本对代码举办改造,以及将包装工具从browserify改装成时更盛的webpack,期待我们对techgogogo公众号的不断关注。

本篇起先学习reactjs的FLUX框架altjs。学习最好好之办法自然如故通过实例的读书与改建了,不过读书此前,我们无法不先行要力保这些代码及其倚重之管是风尚的,不然花了酷工夫如读书回来的凡几乎年前之陈旧的学问就是无谓了。

领域会秦皇岛分舵注:随着微信应用号的呼之欲出,相信新一轱辘的APP变革将发生。从落微信应用号邀请之业内人员发出来的如出一辙摆设开发工具源码截图可以看来,reacjs及其对应的FLUX框架altjs很有或相会化前端开发主流。作为行业内人员,自己在此之前向没有做了web及webapp开发,所以这上头到底一称呼小白。这段时在百忙之中了工作之余准备储备一下就上边的知识点,以免未来让微信应用号的大潮所淹没。

6. chromeDebug模块找不至左


从以上命令的出口我们得看来这一次的一无是处是模块alt下之utils中找寻不顶chromeDebug这个引用:

chromeDebug-not-found

立是以altjs官网没有找到呼应的解决办法,可是咨询了生google,发现原chromeDebug已经改成化于alt-utils那几个独自的模块的lib之下,所以唯有待拿相应的援代码改一转移便吓了。遵照指示,找到出现问题之代码是当src/alt.js代码中:

var Alt = require('alt');
var alt = new Alt();
var chromeDebug = require('alt/utils/chromeDebug')chromeDebug(alt);
module.exports = alt;

此间咱们用拿chromeDebug的援改化”alt-utils/lib/chromeDebug”:

var Alt = require('alt');
var alt = new Alt();
var chromeDebug = require('alt-utils/lib/chromeDebug')
chromeDebug(alt);
module.exports = alt;

然后我们装上alt-utils模块并以因保存至package.json下边

npm install alt-utils --save

这又走“ npm run start“的时候即使不会晤再报任何不当。

稍序开发工具

4.3 软件开发倚重包升级


连片下去我们用开发工具包devDependencies也一头更新了。同理,大家先行将package.json中devDependencies相关的凭项设置成*:

{ "name": "alt-tutorial",
 "version": "1.0.0", 
"description": "A simple flux tutorial built with alt and react",
 "main": "server.js", 
"dependencies": { "alt": "^0.18.6", "react": "^15.3.2" }, 
"devDependencies": { "browserify": "*", "reactify": "*" },
 "scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", "start": "npm run build && open 'index.html' " }, 
"author": "Josh Perez <josh@goatslacker.com>",
 "license": "MIT"}

这一次我们以npm update –save-dev命令来更新支出倚重包

npm update --save-dev

最后我们以会见意识package.json中之devDependencies的乘项为整个翻新了过来:

{ "name": "alt-tutorial", 
"version": "1.0.0", 
"description": "A simple flux tutorial built with alt and react",
 "main": "server.js", 
"dependencies": { "alt": "^0.18.6", "react": "^15.3.2" }, "devDependencies": { "browserify": "^13.1.0", "reactify": "^1.1.1" }, "scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", 
"start": "npm run build && open 'index.html' " }, 
"author": "Josh Perez <josh@goatslacker.com>",
 "license": "MIT"}

那还经npm
outdate命令将不会见盼出要升级之依赖包。到此,大家的总体指包都已经擢升到新型。

10. 备知识


如对reactjs和flux的基本概念不明白的,请预翻阮一峰网络日记中之附和作品:

<<未完待续>>

1. altjs官方实例下载


altjs官方提供了相应的入门实例,我们可以进去进入其官网查阅:http://alt.js.org/guide/

实例的源码可以自github拿到:https://github.com/goatslacker/alt-tutorial.git

咱率先以其clone下来:bashgit clone https://github.com/goatslacker/alt-tutorial.git#2.
法定实例依Ryan装—这是一个冲nodejs的花色,所有的凭自然都是于档次之package.json中布局好的。

{ 
"name": "alt-tutorial",
"version": "1.0.0",
"description": "A simple flux tutorial built with alt and react",
 "main": "server.js", 
"dependencies": { "alt": "^0.16.0", "react": "^0.12.2" }, 
"devDependencies": { "browserify": "^8.0.3", "reactify": "^0.17.1" }, 
"scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", 
"start": "npm run build && open 'index.html' " }, 
"author": "Josh Perez <josh@goatslacker.com>", 
"license": "MIT"}

所以源码clone下来后我们先是使做的即是在类型被施行npm
install去装package.json中指定的乘了。

npm install```

#3. 官方实例运行
---
依赖安装完后我们返回来再看下package.json中的scripts那部分配置:``` json{ "scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", "start": "npm run build && open 'index.html' " },}``` 可以看到整个项目是通过browserify来进行构建管理的(往后我准备将其切换成更流行的webpack),而在运行命令“start“中会自动调用“build“来进行构建,构建好后就直接在浏览器中打开index.html进行显示。所以我们现在直接调用“start“来构建并运行:``` bashnpm run start```然后默认浏览器(我的是chrome)就会打开相应的页面,我们可以点击“favorite“按钮来将相应的location加到Favorite下面:![运行页面](http://upload-images.jianshu.io/upload_images/264714-f791d3f7c3c38446?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

玩了下会发现这个例子很简单直观,就是上面显示相应的一些地名Locations,然后通过点击每个地名后面的Favorite按钮可以将对应的地名添加到下面的Favorites列表里面。

#4. 依赖升级
---
##4.1 依赖包升级状态查看

从官方实例的修改历史可以看到,该实例代码有点老了,特别是在nodejs更新迭代如此快速的今天。

![altjs官方实例](http://upload-images.jianshu.io/upload_images/264714-89cafcef4234e952?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

我们也可以通过npm来查看依赖模块的版本情况:

``` bash
npm outdate

npm update

其中:

  • Package: 倚重包的讳
  • Current: 当前安装版本
  • Wanted: Package.json中希的本
  • Latest: 当前市场最新的本子

4.2 软件运行倚重包升级

这就是说我们怎么用这个靠包批量荣升到新型版本也?我找到的一个方法是,首先用package.json中”dependencies”或”devDependencies”的有的靠包项设置成*号,然后再一次举办npm
update, 然后即便会收获新型版本。

咱俩先举行软件运行看重包dependencies的升级:

{ "name": "alt-tutorial", 
"version": "1.0.0", 
"description": "A simple flux tutorial built with alt and react",
 "main": "server.js", 
"dependencies": { "alt": "*", "react": "*" },
 "devDependencies": { "browserify": "^8.0.3", "reactify": "^0.17.1" }, 
"scripts": { "build": "browserify -t [reactify --es6] src/App.jsx > build/app.js", 
"start": "npm run build && open 'index.html' " },
 "author": "Josh Perez <josh@goatslacker.com>", 
"license": "MIT"}

然后实施npm update –save来装时的版并记下到package.json里面

 bashnpm update --save

设置到位后实施 npm oudate

bashnpm outdate

npm outdate

好望dependencies的负既更新到新型的版本(所以没有彰显出,因为此命令是查看是否需要革新的)。可是开发工具相关的看重devDependencies还一贯不改进,因为我们才只是以dependencies相关的靠设置成*号来开展批量更新。

末尾查看package.json可以看来dependencies已经更新至新型版本:

{ "name": "alt-tutorial", 
"version": "1.0.0",
 "description": "A simple flux tutorial built with alt and react", 
"main": "server.js", 
"dependencies": { "alt": "^0.18.6", "react": "^15.3.2" }, 
"devDependencies": { "browserify": "^8.0.3", "reactify": "^0.17.1" }, 
"scripts": { 
"build": "browserify -t [reactify --es6] src/App.jsx >build/app.js", 
"start": "npm run build && open 'index.html' "
 },
 "author": "Josh Perez <josh@goatslacker.com>", 
"license": "MIT"}

5. AltContainer依赖担保寻找不交不当


这儿非常满意(原谅我于是是词,小白仍旧较好满足的)的我准备npm run
start来平等欺凌呵成的运转从所有实例的早晚,却发现平素走不起来:

AltContainer-Error

遵照指示,应该是src/component下的web组件有利用到alt的AltContainer这多少个包,而在升级依赖包后,这多少个包却找不至了。大家第一看下代码中援到AltContainer的地方,按照提示,打开项目之src/components文件夹,可以看下边来一个Locations.jsx文件,打开后看文件最起始发生对AltContainer的援:

var React = require('react');
var AltContainer = require('alt/AltContainer');

冲涉,现身这种问题的下只是零星个因:

  1. 这一个仗包没有是安装
  2. 升迁后底依赖性包调用/引用情势易了。

发这种事情,第一时间想到的必定是去altjs的官网查阅了。在官网的API
Documentation
受到老分明AltContainer的援形式已更换了:

new way to import AltContainer

援的不再是’alt/AltContainer’,而是’alt-container’,至于官网提醒着运用的要害字’import’,推断应该是es6风靡导入形式,现在事先不任,今后习过程被暴发或以这类型之代码转换成es6,敬请期待。所以我们这里才待依据官网提醒用引用方式改变成为以下就好了:

 var React = require('react');
var AltContainer = require('alt-container');

当,大家或用用之依靠包吃装及之:

npm install alt-container --save

这会儿咱们再一次构建运行:

npm run start

相会发现仍然有报错,可是曾经休是AltContainer引用找不至的荒谬了。

7. React.render没定义错误


而是此时打开的凡空网页,打开chrome的开发者工具查看时发现错误如下:

react.rendor not a function

故是当新式的reactjs版本中,渲染函数应该调用的凡react-dom模块中的render,而非调用react模块中的render。追查后意识问题是地处src/App.jsx文件被:

var React = require('react');
var Locations = require('./components/Locations.jsx');
React.render( <Locations />, document.getElementById('ReactApp'));

此地大家得改成为:

var React = require('react');
var ReactDOM = require('react-dom');
var Locations = require('./components/Locations.jsx');
ReactDOM.render( <Locations />, document.getElementById('ReactApp'));

设置react-dom看重模块:

npm install react-dom --save

然后构建运行:

npm run build