Connect Ethereum Smart Contracts To A Superior UI Foundation
React Dapp Boilerplate is an expert React boilerplate for building full-stack DApps. It's built with the latest versions of React, Redux, and Webpack and has a superior organization and directory structure. It comes with a solid CSS architecture that helps you correctly skin your DApp.
Material-UI is baked into the boilerplate to help you quickly start prototyping your DApp. If you need expert guidance in developing a full-stack Dapp, check out Full Stack DApps now.
If you have any questions, join the Full Stack DApps Slack channel.
Also, watch the intro video on Youtube to learn more.
Create a directory and change into it.
mkdir your-react-dapp-name cd your-react-dapp-name
Install the Truffle box inside of the directory your just created.
truffle unbox hackingbeauty/react-dapp-boilerplate
Start the dapp, then point your browser to localhost:3000. If you want to use yarn instead of npm, just nuke the node_modules directory and run the command
npm run start || yarn start
Start your local blockchain (I use Ganache-CLI).
Place your Smart Contract into the /contracts directory, then compile and migrate it.
truffle compile truffle migrate
Jest is included for testing React components and Truffle's own suite is incldued for Smart Contracts. Be sure you've compiled your contracts before running jest, or you'll receive some file not found errors.
// Runs Jest for component tests. npm run test || yarn test // Runs Truffle's test suite for smart contract tests. truffle test
To build the Dapp for production, use the build command. A production build of the entire Dapp will be placed in the /build folder.
npm run build || yarn build