drizzle 和 react 学习 _react

是Suite 的最新成员，也是我们的第一个前端开发工具。的核心是将合约数据和交易数据等内容从区块链同步至 Redux store 。基础库顶部有更高级别的抽象; 用于React兼容性（-react）和一组即用型 React 组件（-react-）的工具。
今天我们专注于初级应用，带你从头开始用 React 和设置项目。通过这种方式，我们可以更好地了解在应用中如何使用。有了这些知识，您可以利用您选择的任何前端框架充分利用，或者放心使用更高级别的React抽象
这将是一个非常初级的教程，专注于设置和获取存储在合约中的简单字符串。它适用于具有基础知识的人，此外还需要对和 React.js 有一定的了解，但是不太熟悉。
注意：了解基础，可以参考 Pet Shop 教程
本教程将覆盖：
设置开发环境
从头开始创建项目
编写智能合约
编译和移植智能合约
测试智能合约
创建 React.js 项目
设置前端客户端
用连接 React 应用程序
写一个从中读取的组件
写一个写入智能合约的组件
1. 设置开发环境
开始之前有一些技术要求。请安装以下内容：
1.1
安装如上内容后，安装：
npm install -g truffle
验证是否已正确安装，在终端上输入。如果发现错误，请检查是否已将npm模块添加到路径中。
1.2 -CLI
我们还将使用 -CLI ，这是一个用于以太坊开发的个人区块链，可用于部署合约、开发应用程序和运行测试。可以使用以下命令全局安装：
npm install -g ganache-cli
这里如果出现非全局安装问题，可使用 ln -s 将 -cli 链接至 /usr/local/bin/。详细使用方法请
1.3 -React-App
最后，由于这是一个 React.js 教程，我们将使用 -React-App 创建我们的React项目
如果你拥有 NPM 5.2 或更高版本，则无需执行任何操作。你可以通过运行 npm -- 来检查 NPM 版本。如果没有，则需要使用以下命令全局安装该工具：
npm install -g create-react-app
2. 创建项目
在当前目录中初始化，因此首先在你选择的开发文件夹中创建一个目录，然后移动至目录
mkdir drizzle-react-tutorialcd drizzle-react-tutorial
运行如下命令生成空项目
truffle init
简单看一下生成的目录结构
2.1 目录结构
默认的目录结构包含如下：
3. 编写智能合约
我们将添加一个名为的简单智能合约。
在 / 目录中创建名为 .sol 的新文件。
文件中添加如下内容：
pragma solidity ^0.5.0;contract MyStringStore {string public myString = "Hello World";function set(string memory x) public {myString = x;}}
由于这不是教程，所以您需要了解的是：
注意：

文章插图
这里需要在 set 函数传入参数 x 中添加属性，不然可能会在 4.1 编译部分出现如下错误（应该是版本的问题）：

文章插图
3.1 运行测试链
在我们继续操作之前，让我们首先使用 -CLI 启动我们的测试区块链。
打开一个新终端并运行以下命令：
ganache-cli -b 3
这将生成一个新的区块链，默认情况下会侦听127.0.0.1:8545，并将每3秒进行一次挖矿。如果我们没有指定这个，会立即挖矿，我们将无法模拟真正的区块链开采所需的延迟。