React Truffle Box
This box comes with everything you need to start using smart contracts from a react app. This is as barebones as it gets, so nothing stands in your way.
Installation
First ensure you are in a new and empty directory.
Run the
unboxcommand vianpxand skip to step 3. This will install all necessary dependencies. A Create-React-App is generated in theclientdirectory.npx truffle unbox react
Alternatively, you can install Truffle globally and run the
unboxcommand.npm install -g truffle truffle unbox react
Run the development console.
truffle develop
Compile and migrate the smart contracts. Note inside the development console we don't preface commands with
truffle.compile migrate
In the
clientdirectory, we run the React app. Smart contract changes must be manually recompiled and migrated.// in another terminal (i.e. not in the truffle develop prompt) cd client npm run start
Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you're in or outside of the development console.
// inside the development console. test // outside the development console.. truffle test
Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors.
// ensure you are inside the client directory when running this npm run test
To build the application for production, use the build script. A production build will be in the
client/buildfolder.// ensure you are inside the client directory when running this npm run build
FAQ
How do I use this with the Ganache-CLI?
It's as easy as modifying the config file! Check out our documentation on adding network configurations. Depending on the port you're using, you'll also need to update line 29 of
client/src/utils/getWeb3.js.Where is my production build?
The production build will be in the
client/buildfolder after runningnpm run buildin theclientfolder.Where can I find more documentation?
This box is a marriage of Truffle and a React setup created with create-react-app. Either one would be a great place to start!
-
应用步骤： npm install --save react-resizable 安装到当前项目中 安装过后可先执行一下 npm install 有可能会出现'react-scripts' 不是内部或外部命令，也不是可运行的程序或批处理文件。 在app.js中引用 import { Resizable, ResizableBox } from 'react-resizable'; 在render
-
这个是typescript类型下的自定义拖拽组件，相关api请查看官方文档 引入HTML5Backend的时候需要注意一下，目前官方文档是直接import HTML5Backend from 'react-dnd-html5-backend'; 这么导入的，但是在react-dnd-html5-backend的版本高于11之后，这么引入会报错Catched error TypeError: bac
-
用 react-search-box 组件，实现目录搜索 Installation # npm npm i react-search-box --save # yarn yarn add react-search-box Usage import React, { Component } from "react"; import ReactSearchBox from "react-s
-
拆分面板组件 react-split-pane。在使用开发工具时，例如vscode会发现左侧的的项目目录区域可以拖拽改变大小，react-split-pane 这个工具就是可以做到这种效果。 地址：https://www.npmjs.com/package/react-split-pane 安装 yarn add react-split-pane 使用 import React from 're
-
Tab navigation 移动应用中最常见的导航是基于Tab的导航。这可以是屏幕底部的标签，也可以标题下面的标签（甚至可以代替标题）。 本指南涵盖了createBottomTabNavigator。您也可以使用createMaterialBottomTabNavigator和createMaterialTopTabNavigator来为您的应用程序添加标签。 在继续之前，首先安装@react-
-
在项目中要实现多行省略，-webkit-line-clamp: 2;打包后不生效，使用下面的方法样式为.. overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 结果打包之后不生
-
介绍 StackNavigator -用于实现各个页面之间的跳转： 一次只渲染一个页面，并提供页面之间跳转的方法。 当打开一个新的页面时，它被放置在堆栈的顶部 TabNavigator - 渲染一个选项卡，让用户可以在几个页面之间切换 DrawerNavigator - 提供一个从屏幕左侧滑入的抽屉效果 安装 yarn add @react-navigation/native react-nav
-
问题内容： 我注意到可以这样导入： …或像这样： 第一个导入模块中的所有内容（请参阅：导入整个模块的内容） 第二个仅导入模块导出（请参阅：导入默认值） 似乎这两种方法是不同的，并且根本上是不兼容的。 为什么它们都起作用？ 请参考源代码并解释该机制…我有兴趣了解其工作原理。 ES6常规模块信息回答了该问题。 我在问使模块像这样工作的机制。在这里，它似乎与源代码中的 “ hacky”导出机制有关，但尚
-
这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使
-
我已经改用react Native制作跨平台应用程序（虽然没有制作）。我只是想要一个答案，我的问题，反应和反应之间的区别。我在网上搜索了一下，但没有找到合适的答案。
-
问题内容： 与 哪个更好，为什么？ 还是除了以后编写更少的代码外没有其他区别？ 写作是否意味着只导入Component对象？ 问题答案： 让您代替。它减少了React名称空间的键入和重复，这通常是一种理想的现代编码约定。 此外，Webpack 2和Rollup之类的工具会“摇晃”，这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用/，您可以保证所有React的源代码都将被捆绑。使用，某些工具
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
我正在使用“React admin”创建一个管理界面（前端）。我正在使用spring boot作为我的REST API。我的React应用程序的url是：“http://localhost:3000”。我的spring boot API的url是：“http://localhost:8080”。 下面是CORS配置的spring boot代码，它在一个单独的类中，称为CORSCONFIG： 下面是
-
主要内容：React 实例React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。 使用方法 绑定一个 ref 属性到 render 的返回值上： 在其它代码中，通过 this.refs 获取支撑实例: 完整实例 你可以通过使用
-
主要内容：React 实例React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。 以下实例演示了获取 Github 用户最新 gist 共享描述: React 实例 cla