您的位置:澳门新葡萄京最大平台 > www.4996.com > 小白学react之altjs官方实例初探

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

发布时间:2019-10-05 13:11编辑:www.4996.com浏览(192)

    小程序开拓工具

    世界会邯郸分舵注:随着微信应用号的绘身绘色,相信新一轮的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. 官方实例依赖安装---那是二个基于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. 升迁后的依据包调用/援用格局变了。

    发生这种工作,第有的时候间想到的终将是去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的基本概念不知情的,请先查看阮一峰互连网日记中的相应作品:

    • reactjs基本概念:请参见阮一峰的《Flux 框架结构入门教程》
    • flux基本概念:请参谋阮一峰的《React 入门实例教程》

    <<未完待续>>

    本文由澳门新葡萄京最大平台发布于www.4996.com,转载请注明出处:小白学react之altjs官方实例初探

    关键词:

上一篇:HTML 注释

下一篇:没有了