本文目的很明确：手把手教你使用 DApp 开发框架 Embark 构建一个去中心化百度贴吧（文末附 GitHub 地址），主要包括以下 3 部分：

1. 明确 DApp 需求，部署智能合约；

2. 使用 EmbarkJS 测试智能合约；

3. 使用 React 构建 DApp 的前端。

在上一篇文章中，营长手把手带你们使用 Solidity 语言部署合约，并使用 EmbarkJS 完成智能合约测试，本文基于此将继续深入，使用 JavaScript 用户界面框架 React 构建去中心化百度贴吧的前端。

渲染第一个组件

在构建与智能合约实例交互的组件之前，我们需要先在屏幕上实际渲染一个简单的文本，以确保 React 框架已经得到了正确的配置。

为此，我们需要将 React 框架添加为项目的依赖项。事实上，我们的代码依赖两个程序包：react 和 react-dom。之所以需要 react-dom 是因为它可以在 DOM (Document Object Model，文档对象模型)环境中渲染使用 React 框架定义的组件，听起来令人摸不着头脑，简单来说这就是浏览器所做的工作。

接下来我们需要将这两个依赖项添加到项目的 package.json 中：

"dependencies": {  "react": "^16.4.2",  "react-dom": "^16.4.2"}

完成后，我们需要实际安装这些依赖项，我们只需要在终端中执行以下命令：

npm install

一切正常的话，现在我们就可以使用 React 框架了。由于 Embark 框架并不需要指定任何前端框架，因此我们不会过多关注 React 框架特有的属性，仅仅完成构建应用程序的工作就已足矣。

在 React 框架中创建组件非常简单。我们需要做的就是创建一个继承了 React 的 Component (组件)类型的类，然后添加一个渲染函数 render() 来展示组件的视图。

我们需要为项目中的所有组件创建一个文件夹：

mkdir app/js/components

接下来，我们需要为根组件创建一个文件，我们简单地把根组件命名为 App 并使用相同的文件名：

touch app/js/components/App.js

如前所述，我们需要在屏幕上渲染一些文字来确保 React 框架没有出错，也就是说，我们需要编写以下代码：

import React, { Component } from 'react';export class App extends Component {  render() {    return 
DReddit
  }}

这些代码的可读性还是很强的，几乎可以做到自解释(self explanatory)。在代码中我们导入了 React 及其 Component(组件)类型，并创建了一个继承 Component 组件的 App 类。React 框架将使用渲染函数 render() 来展示出组件的视图，并且会返回用 JavaScript 语法拓展 JSX 编写的模板。JSX 在语法上看起来很像 HTML，只是它带有一些用来嵌入像控制结构这样功能的额外语法，稍后我们会再使用它！

现在我们已经定义好了这个组件，接下来就需要告诉 React 框架来实际渲染这个组件。为此，我们需要转到 app / js / index.js 文件，并在其中添加以下代码：

import React from 'react';import { render } from 'react-dom';import { App } from './components/App';render(, document.getElementById('root'));

由于 React 在当前这个脚本范围中还不可用，所以我们首先需要再次导入 React，同时我们还需要从 react-dom 中导入渲染函数 render()，渲染函数会帮助我们将根组件渲染到 HTML 文档的某个元素中。在这种情况下，我们想要渲染的根组件元素是那些显示为根组件 root 的元素。

接下来我们来快速设置它，我们需要在 app / index.html 文件中添加一个显示为根组件 root 的新元素：

  
    
            

            Tags:                 [db:tag]
                    
        
    

        

                            上一篇：UCK区块链微课堂—简析挖矿及矿业的发展  门槛或成最大阻力
                    
        

                            下一篇：研报 | 美国加密基金的宏观观察
                    
    
    

	

		版权说明：

		1.版权归本网站或原作者所有;

2.未经本网或原作者允许不得转载本文内容，否则将视为侵权;

3.转载或者引用本文内容请注明来源及原作者;

4.对于不遵守此声明或者其他违法使用本文内容者，本人依法保留追究权等。