bwin亚洲必赢5566手机版小白学react之altjs官方实例初探

小程序开发工具

世界会包头分舵注:随着微信应用号的有声有色,相信新一轮的APP变革即将产生。从得到微信应用号诚邀的业夫职员发出来的一张开发工具源码截图可以看来,reacjs及其对应的FLUX框架altjs很有或然会成为前端开发主流。作为行业爱妻士,本人以前根本不曾做过web及webapp开发,所以那方面终于一名小白。那段时间在忙完工作之余准备储备一下那上边包车型客车知识点,以防今后被微信应用号的大潮所淹没。

本篇初叶上学reactjs的FLUX框架altjs。学习最好的法子自然依然经过实例的翻阅和改建了,不过学习在此之前,我们务必先要确定保障这一个代码及其依赖的包是流行的,不然花了大时间而学习回来的是几年前的破旧的知识就无谓了。

待通过本章将法定实例协理上风行的依靠包和工具包之后,以后会准备开几章来依据新型的altjs版本对代码举行改建,以及将包装工具从browserify改装成当下更流行的webpack,期待我们对techgogogo公众号的频频关怀。

注:初叶从前希望大家对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.
法定实例重视安装—那是3个基于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"}

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命令将不会看出有亟待提高的重视包。到此,大家的百分百借助包都已经升任到最新。

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. 升迁后的正视性包调用/引用情势变了。

爆发那种工作,第3时半刻间想到的终将是去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引用找不到的一无所能了。

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“的时候就不会再报任何错误。

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

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

10. 预备知识


万一对reactjs和flux的基本概念不明了的,请先查看阮一峰互连网日记中的相应作品:

<<未完待续>>