EOS [EOS DAPP 开发] 03 - React 项目结构和调用 EOS RPC-API

pendingauth · 2019年05月13日 · 30 次阅读

本文转载自币乎,作者松果,原文链接:https://bihu.com/article/1361328953

EOS Studio

EOS Studio是为EOS开发专门打造的IDE,集成了各种EOS开发所需的工具,感谢 @张江中本笨 的推荐。

到官网:https://www.eosstudio.io ,直接下载可执行程序即可使用。

后续会写使用EOS Studio开发EOS智能合约的教程,时间有限,先还是使用VSCode进行开发。

Tips

目前写的系列是基础教程,Demo项目代码已开源,GitHub地址:https://github.com/songguo6/eos-react-dapp

React项目结构

打开VSCode,选择File -> Add Folder to Workspace... ,把上一篇文章中使用 create-react-app 创建的项目目录添加到VSCode工作区,然后可以看到如下的项目结构:

可以看到,React项目结构有如下目录和文件:

  • node_modules目录:保存node依赖的第三方模块,是自动生成的,编程不用管它;

  • public目录:存放外部资源、入口文件(index.html)、移动端配置文件(manifest.json),也不用修改;

  • src目录:我们要编写的代码都保存在这里;

  • .gitignore:配置代码上传到Git时要忽略的目录和文件;

  • package.json:node项目的描述文件,会在这里做一些配置;

  • package-lock.json:可以锁定安装的第三方包的版本号,上传到git上,使其他人install时候依赖版本相同,自动生成的不用管它;

  • README.md:项目说明文档

为了项目代码的精简,可以先删除现在用不上的文件,在src目录下:

  • 删除App.test.js

  • 删除index.css

  • 删除logo.svg

  • 删除serviceWorker.js

现在src目录下只剩下3个文件了: App.css、App.js、index.js

  • index.js:react项目的入口文件,先删除代码中不需要的引用,然后代码看起来是这个样子:

这里我们看到了【React的设计思想之一:组件化】,就是一个组件。

ReactDOM.render(<App />, document.getElementById('root'));

这句代码,使用ReactDOM把App组件渲染到id为root的DOM节点上。

  • App.css:css文件暂时用不上,也可以先删除里面的样式;

  • App.js:App组件的代码,它是一个类,只有一个render函数,返回就是App组件的具体内容,先删除不需要的代码,然后写上“Hello EOS”,代码看起来是这个样子:

现在到项目目录使用 npm start 命令启动它,在localhost:3000就可以看到输出了:

Hello EOS!恭喜你,踏上了EOS DAPP开发的第一步!

调用EOS RPC-API获取区块链数据

先确保config.ini中配置了eosio::chain_api_plugin插件,然后启动EOS区块链:

nodeos -e

可以现在浏览器中访问:http://127.0.0.1:8888/v1/chain/get_info,看能否获取数据:

为了能从前端访问EOS RPC-API,我们需要一个Http Client,这里使用 axios,它是一个node第三方模块,在项目目录使用如下命令安装它:

cd eos-dapp
npm install axios --save

安装好后,在package.json的dependencies中,会多出一个axios,然后就可以import这个模块进行使用了。

使用了axios的App.js代码如下:

import React, { Component, Fragment } from 'react';
import axios from 'axios';

import './App.css';

class App extends Component {

  //保存页面数据
  state = {
    info : {},
  }

  //Component的生命周期函数之一,在组件挂载到DOM节点完成后调用
  componentDidMount(){
    axios.get('http://127.0.0.1:8888/v1/chain/get_info')
      .then(res => {
        //异步获取数据后,修改state,会调用render函数重新渲染页面
        //我们不需要进行DOM操作
        this.setState({info: res.data});
      })
      .catch(error => {
        console.log(error);
      });
  }

  //渲染函数,每一个组件都必须实现,Component生命周期函数之一
  render() {
    //ES6语法:解构赋值
    const { 
      server_version, chain_id, head_block_num, last_irreversible_block_num, 
      last_irreversible_block_id, head_block_id, head_block_time, head_block_producer, 
      virtual_block_cpu_limit, virtual_block_net_limit, block_cpu_limit, block_net_limit,
      server_version_string,
    } = this.state.info;

    return (
      //render函数不能返回多个元素,用Fragment包起来
      <Fragment>
        <h1>EOS Blockchain Info:</h1>
        <h3><span>server_version:</span>{server_version}</h3>
        <h3><span>chain_id:</span>{chain_id}</h3>
        <h3><span>head_block_num:</span>{head_block_num}</h3>
        <h3><span>last_irreversible_block_num:</span>{last_irreversible_block_num}</h3>
        <h3><span>last_irreversible_block_id:</span>{last_irreversible_block_id}</h3>
        <h3><span>head_block_id:</span>{head_block_id}</h3>
        <h3><span>head_block_time:</span>{head_block_time}</h3>
        <h3><span>head_block_producer:</span>{head_block_producer}</h3>
        <h3><span>virtual_block_cpu_limit:</span>{virtual_block_cpu_limit}</h3>
        <h3><span>virtual_block_net_limit:</span>{virtual_block_net_limit}</h3>
        <h3><span>block_cpu_limit:</span>{block_cpu_limit}</h3>
        <h3><span>block_net_limit:</span>{block_net_limit}</h3>
        <h3><span>server_version_string:</span>{server_version_string}</h3>
      </Fragment>
    );
  }
}

export default App;

在浏览器中就可以看到获取的EOS区块链信息了:

假设你已具备HTML和JavaScript基础,这些前端代码都比较好理解。

需要注意的是,在React中,是不需要自己来操作DOM的,React是面向数据编程,我们只需要关心数据就好,当数据变化时,页面会跟着变化。

这就是【React的设计思想之二:面向数据编程】。

JSX

JSX是React引入的一种语法糖,是对JS语法的包装(类似的还有CoffeeScript、TypeScript等),最终都会被转换成JS供浏览器执行。

JSX=JS+XML,可以在JS中直接使用标签<>,还可以使用自定义组件(标签)。

在JSX中,自定义组件名必须以大写字母开头(也可以用来区分自定义组件和原生标签)。

要使用JSX语法,必须引入react包:

import React from 'react';

JSX中可以使用js表达式,放在{ }中:

{1+2}


ES6

ES6全称是:ECMAScript 6,是JavaScript的最新标准,在这个项目中以及现代前端开发领域,都会大量使用ES6语法。

这个系列教程,是以讲解EOS和区块链为主,就不细讲ES6的语法了。需要学习ES6的同学,推荐看这本书:

ES6标准入门(第3版)

到这里,我们了解了React的基础知识,完成了一个基础的React应用,接下来会深入学习React和把EOS、IPFS、Scatter整合到项目中。

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册