React Ethereum Dapp Example 项目启动与配置教程

React Ethereum Dapp Example 项目启动与配置教程

react-ethereum-dapp-example A starter boilerplate for an Ethereum dapp using web3.js v1.0, truffle, react, and parity 项目地址: https://gitcode.com/gh_mirrors/re/react-ethereum-dapp-example

1. 项目目录结构及介绍

本项目是基于以下技术构建的 Ethereum dapp 起始模板：

• Ethereum JavaScript API (Web3.js) 1.0-beta
• Truffle
• Parity
• React Redux Universal Hot Example (包括 React, React Router, Babel, Webpack, Redux, Redux Dev Tools, React Router Redux, ESLint 等)

项目目录结构如下：

react-ethereum-dapp-example/
├── api/
├── bin/
├── contracts/
│   └── ...（智能合约文件）
├── docker/
├── docs/
├── images/
├── migrations/
│   └── ...（迁移文件）
├── src/
│   └── ...（源代码文件）
├── static/
├── test/
├── webpack/
├── .babelrc
├── .bootstraprc
├── .dockerignore
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .travis.yml
├── CONTRIBUTING.md
├── Dockerfile
├── LICENSE
├── README.md
├── app.json
├── circle.yml
├── karma.conf.js
├── package.json
├── postcss.config.js
├── server.babel.js
├── tests.webpack.js
└── truffle.js

• contracts/：包含所有的智能合约文件。
• migrations/：包含部署智能合约的迁移脚本。
• src/：包含 React 组件和 Redux 相关的源代码。
• webpack/：包含 Webpack 配置文件。
• .babelrc：Babel 配置文件。
• .editorconfig：代码编辑器配置文件。
• .eslintrc：ESLint 配置文件。
• package.json：项目依赖及脚本。
• truffle.js：Truffle 配置文件。

2. 项目的启动文件介绍

项目的启动主要是通过 package.json 文件中的脚本实现的。以下是一些主要的启动命令：

• npm install：安装项目依赖。
• npm run dev：启动开发服务器。

在 package.json 中的 scripts 部分，你可以找到以下启动脚本：

{
  "scripts": {
    "dev": "webpack-dev-server --hot --inline --config webpack/dev.config.js",
    // 其他脚本...
  }
}

使用 npm run dev 命令将启动 Webpack 开发服务器，并实现热重载功能。

3. 项目的配置文件介绍

本项目的配置文件包括但不限于以下几个：

• .babelrc：Babel 配置文件，用于配置 JavaScript 的转译规则。
• .editorconfig：用于配置代码编辑器的编码风格，如缩进、换行符等。
• .eslintrc：ESLint 配置文件，用于定义代码质量规则。
• webpack/dev.config.js：Webpack 开发环境配置文件。
• webpack/prod.config.js：Webpack 生产环境配置文件。
• truffle.js：Truffle 配置文件，用于配置智能合约的编译、部署等。

这些配置文件确保了项目可以按照既定的规则和标准进行开发、编译和部署。

react-ethereum-dapp-example A starter boilerplate for an Ethereum dapp using web3.js v1.0, truffle, react, and parity 项目地址: https://gitcode.com/gh_mirrors/re/react-ethereum-dapp-example