文章插图
npx create-react-app client
如果您有较旧版本的 NPM ，请确保按照up the部分中的说明全局安装 -React-App ，然后运行以下命令：
create-react-app client
这应该在您的项目中创建一个目录，并生成一个裸的 React.js 项目，让你开始构建您的前端 。
7. 设置前端客户端
现在我们在目录中有一个前端客户端，使用命令 cd切换到该目录，然后继续执行以下步骤进行设置 。
7.1 链接编译文件
由于 -React-App 默认不允许从 src 文件夹外部导入文件，因此我们需要将我们 build 文件夹中的放入 src 中 。我们可以在每次编译合约时复制和粘贴一次，但更好的方法是创建符号链接 。
如果你之前没有创建过符号链接，请将其视为文件系统中的一个
切换到 src 目录，然后创建符号链接文件夹：
// For MacOS and Linuxcd srcln -s ../../build/contracts contracts// For Windows 7, 8 and 10// Using a Command Prompt as Admincd srcmklink /D contracts ..\..\build\contracts
实际上，这应该在 src 中创建看起来像文件夹的内容，但它实际上指向我们的项目的 build/ 文件夹中的文件 。
7.2 安装
这是最有趣的部分，我们安装。使用命令 cd .. 更改回目录，然后运行以下命令：
npm install drizzle
这就是依赖关系！ 请注意，我们不需要自己安装 Web3.js 或 -。包含我们与智能合约交互所需的一切 。
8. 用连接 React 应用程序
在我们进一步讨论之前，让我们通过在目录中运行如下命令来启动我们的 React 应用程序：
npm start
这将在 ：3000 下启动前端服务，因此请在浏览器中打开它
注意：如果已经安装了 ，请确保使用隐身窗口（或暂时禁用） 。否则，应用程序将尝试使用中指定的网络，而不是 ：8545 下的开发网络 。
如果加载的默认 -React-App 页面没有任何问题，你可以继续 。
8.1 设置商店
我们需要做的第一件事是设置和实例化商店 。我们把以下5行添加到 /src/index.js ：
// import drizzle functions and contract artifactimport { Drizzle, generateStore } from "drizzle";import MyStringStore from "./contracts/MyStringStore.json";// let drizzle know what contracts we wantconst options = { contracts: [MyStringStore] };// setup the drizzle store and drizzleconst drizzleStore = generateStore(options);const drizzle = new Drizzle(options, drizzleStore);
首先，我们从和软连接的合约定义中导入工具
然后我们为构建了我们的选项对象，在这种情况下，它只是通过传入 JSON 构建工件来指定我们想要加载的特定合约 。
最后，我们创建了并使用它来创建我们的实例，我们将其作为支持传递给我们的 App 组件 。
完成后，index.js 应如下所示：
import React from "react";import ReactDOM from "react-dom";import "./index.css";import App from "./App";import registerServiceWorker from "./registerServiceWorker";// import drizzle functions and contract artifactimport { Drizzle, generateStore } from "drizzle";import MyStringStore from "./contracts/MyStringStore.json";// let drizzle know what contracts we wantconst options = { contracts: [MyStringStore] };// setup the drizzle store and drizzleconst drizzleStore = generateStore(options);const drizzle = new Drizzle(options, drizzleStore);// pass in the drizzle instanceReactDOM.render(