Starting your journey in Web3 with a ReactJS setup for your first dApp is a great choice! React's flexibility paired with the power of Web3 can lead to some amazing applications. Remember, tools like SubQuery can be a big help in managing your data needs efficiently. They make sure your dApp not only works well but also stands out in the fast-evolving web3 space. Can't wait to see more of this series!
Hey Gregory, I'm Btech CSE final year student and trying to build a dApp for my final year project and _i must say your tutorials are indeed a great work and helping me a lot for my project_ . It would be great if you make some more tutorials on how to make our client side application with some more features to interact with our smart contract. I'm not much familiar with client side application development framework so please make some more videos for *_React Js, Web3, Webpack & truffle contract_* :)
Hi Gregory, I am quite new in web development. First of all I get a lot of warnings when I install webpack. Second, the command "npm run start" returns errors. After researching and trying things out, at least the webserver ran. But since there were still problems with the depencies, it still doesn't work. Could you maybe help us out, with a blog post or a short video, explaining how to install all dependencies? Thanks a lot
Hi, I am getting the following error "Election has not been deployed to detected network (network/artifact mismatch)" ? In which part of this tutorial is the election contract getting deployed blockchain?
Greg I've been looking for a tute to teach me how best to use Web3 and a unity game with react all the component scoping issues potentially arising, this vid helped this few-month noob a lot. Thanks!
i have an error: ncaught (in promise) Error: Election has not been deployed to detected network (network/artifact mismatch) at build.js:1 i can't fint buid.js in my folder of project
Can all these Videos tuts for DAPP work the sam w/ EOSIO? I wan. I want to create a web hosting business on EOS. I am looking for a partner who know how to do this on EOS. Thanks
Hey Gregory, haven't seen your channel for a while and it seems you've added a lot of new videos, great job! Any plans to add a tutorial How to build a dapp without a Ganache and deploying it on a Ropsten/Kovan instead?
Hi @dapp University team, Great tutorial on react and truffle. We have come across truffle box on react and uport, can you post a video on truffle-react-uport box
****Do mine instructions before run this**** *Run these in Command Prompt at location .../election_react> 0/ > npm install 1/ > npm install -g webpack webpack-cli 2/ > npm install -g truffle 3/ (Now run the fake Blockchain at port 7545, if you download Ganache UI to the computer and run it already, then SKIP this step 3, moving directly to step 4) > npm install -g ganache-cli > ganache-cli -p 7545 4/ > truffle migrate --reset (This will auto compile all the contracts and forget all the old address, letting you deploy all new contracts to the Blockchain) 5/ > npm run start
he has posted another blog with the same program ,the issue comes because metamask is not connected ,i forgot the blog and i will see the blog and send you the link,if you have tried any other links please let me know,becaz my PhD is in blockchains
i cannot do truffle building cuz there are so many errors. here are errors. arning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead. function Election () public { ^ (Relevant source part starts here and spans across multiple lines). ,/Users/kwonohsung/IM7/election/contracts/Migrations.sol:11:3: Warning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead. function Migrations() { ^ (Relevant source part starts here and spans across multiple lines). ,/Users/kwonohsung/IM7/election/contracts/Election.sol:48:9: Warning: Invoking events without "emit" prefix is deprecated. votedEvent(_candidateId); ^----------------------^ /Users/kwonohsung/IM7/election/contracts/Election.sol:1:1: SyntaxError: Source file requires different compiler version (current compiler is 0.4.24+commit.e67f0147.Emscripten.clang - note that nightly builds are considered to be strictly less than the released version pragma solidity 0.4.20; ^---------------------^ ,/Users/kwonohsung/IM7/election/contracts/Election.sol:24:5: Warning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead. function Election () public { ^ (Relevant source part starts here and spans across multiple lines). ,/Users/kwonohsung/IM7/election/contracts/Migrations.sol:11:3: Warning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead. function Migrations() { ^ (Relevant source part starts here and spans across multiple lines). ,/Users/kwonohsung/IM7/election/contracts/Election.sol:48:9: Warning: Invoking events without "emit" prefix is deprecated. votedEvent(_candidateId); ^----------------------^
The comments in the error message show everything you need to change in order to make this work... will help you with the first two: change pragma solidity to the version you are actually using (in my case 0.5.0)... second, replace function election() with constructor()... now it's your turn. correct all the errors that popup and you will be able to compile and migrate
i seem to be able to npm start but the app remains in Loading mode and only displays the Title text "Election Results." nothing else th-cam.com/video/qlJ3cs7o2DE/w-d-xo.html some terminal warnings i have. WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment. WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: build.js (947 KiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (947 KiB) build.js
Starting your journey in Web3 with a ReactJS setup for your first dApp is a great choice! React's flexibility paired with the power of Web3 can lead to some amazing applications. Remember, tools like SubQuery can be a big help in managing your data needs efficiently. They make sure your dApp not only works well but also stands out in the fast-evolving web3 space. Can't wait to see more of this series!
Thanks for the great videos, truffle-contract does not exist anymore though, it appears depreciated, what do you suggest instead?
What if we want to use react-functional-component ?
i really do appreciate this ,i have been copy pasting a lot of useless stuff
How to create this project with all the required configuration?
Hey Gregory,
I'm Btech CSE final year student and trying to build a dApp for my final year project and _i must say your tutorials are indeed a great work and helping me a lot for my project_ . It would be great if you make some more tutorials on how to make our client side application with some more features to interact with our smart contract. I'm not much familiar with client side application development framework so please make some more videos for *_React Js, Web3, Webpack & truffle contract_* :)
You can find those videos on other channels
Hi Gregory,
I am quite new in web development. First of all I get a lot of warnings when I install webpack. Second, the command "npm run start" returns errors. After researching and trying things out, at least the webserver ran. But since there were still problems with the depencies, it still doesn't work. Could you maybe help us out, with a blog post or a short video, explaining how to install all dependencies? Thanks a lot
Ah, fat chance of that happening. He won't tie your shoe laces, too. :D
Do you think this project is better than the "2 hours video" project? Which one is more simple and easy to use?
Hi,
I am getting the following error
"Election has not been deployed to detected network (network/artifact mismatch)" ?
In which part of this tutorial is the election contract getting deployed blockchain?
Very informative indepth explanations, thank you.
Thanks!!
Greg I've been looking for a tute to teach me how best to use Web3 and a unity game with react all the component scoping issues potentially arising, this vid helped this few-month noob a lot. Thanks!
The candidate area on the page is not showing and a "Loading..." text is there in place of it. Any help?
Same thing for me.... Did u get solution of this issue ?
Need to
truffle compile --all
truffle migrate --reset
Before
npm run start
i have an error: ncaught (in promise) Error: Election has not been deployed to detected network (network/artifact mismatch)
at build.js:1 i can't fint buid.js in my folder of project
Its all outdated
Can you do a video on how to add candidates into blockchain using react as front-end.
Can all these Videos tuts for DAPP work the sam w/ EOSIO? I wan. I want to create a web hosting business on EOS. I am looking for a partner who know how to do this on EOS. Thanks
Fantastic Channel, you are really good
Sir need n updated frontend in react js with solidity. Thanking you
Hey Gregory, haven't seen your channel for a while and it seems you've added a lot of new videos, great job! Any plans to add a tutorial How to build a dapp without a Ganache and deploying it on a Ropsten/Kovan instead?
You can take the links from ropsten.infura.io and after that you need to change truffle-config file. thats all
@@akif409 Hey Akif, thanks! I'll try it now
Hi @dapp University team,
Great tutorial on react and truffle. We have come across truffle box on react and uport, can you post a video on truffle-react-uport box
How does this only have 7.8k views...
****Do mine instructions before run this****
*Run these in Command Prompt at location .../election_react>
0/ > npm install
1/ > npm install -g webpack webpack-cli
2/ > npm install -g truffle
3/ (Now run the fake Blockchain at port 7545, if you download Ganache UI to the computer and run it already, then SKIP this step 3, moving directly to step 4)
> npm install -g ganache-cli
> ganache-cli -p 7545
4/ > truffle migrate --reset (This will auto compile all the contracts and forget all the old address, letting you deploy all new contracts to the Blockchain)
5/ > npm run start
Election Results
Loading... i get this web page when i cloned
Same thing for me.... Did u get solution of this issue ?
he has posted another blog with the same program ,the issue comes because metamask is not connected ,i forgot the blog and i will see the blog and send you the link,if you have tried any other links please let me know,becaz my PhD is in blockchains
www.dappuniversity.com/articles/the-ultimate-ethereum-dapp-tutorial is the answer for ur ques,but i have not yet worked this blog
truffle compile --all
truffle migrate --reset
Before
npm run start
What about angular
exxxceellleeeeenntttT!!!
and now you are a folk guitarist
i cannot do truffle building cuz there are so many errors.
here are errors.
arning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead.
function Election () public {
^ (Relevant source part starts here and spans across multiple lines).
,/Users/kwonohsung/IM7/election/contracts/Migrations.sol:11:3: Warning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead.
function Migrations() {
^ (Relevant source part starts here and spans across multiple lines).
,/Users/kwonohsung/IM7/election/contracts/Election.sol:48:9: Warning: Invoking events without "emit" prefix is deprecated.
votedEvent(_candidateId);
^----------------------^
/Users/kwonohsung/IM7/election/contracts/Election.sol:1:1: SyntaxError: Source file requires different compiler version (current compiler is 0.4.24+commit.e67f0147.Emscripten.clang - note that nightly builds are considered to be strictly less than the released version
pragma solidity 0.4.20;
^---------------------^
,/Users/kwonohsung/IM7/election/contracts/Election.sol:24:5: Warning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead.
function Election () public {
^ (Relevant source part starts here and spans across multiple lines).
,/Users/kwonohsung/IM7/election/contracts/Migrations.sol:11:3: Warning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead.
function Migrations() {
^ (Relevant source part starts here and spans across multiple lines).
,/Users/kwonohsung/IM7/election/contracts/Election.sol:48:9: Warning: Invoking events without "emit" prefix is deprecated.
votedEvent(_candidateId);
^----------------------^
The comments in the error message show everything you need to change in order to make this work... will help you with the first two: change pragma solidity to the version you are actually using (in my case 0.5.0)... second, replace function election() with constructor()... now it's your turn. correct all the errors that popup and you will be able to compile and migrate
i seem to be able to npm start but the app remains in Loading mode and only displays the Title text "Election Results." nothing else th-cam.com/video/qlJ3cs7o2DE/w-d-xo.html
some terminal warnings i have.
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
build.js (947 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (947 KiB)
build.js
@①③①③⑦⑤⑥⓪⓪③③whatsAℙP Grow up and stop trying to rip the real Dapp Uni off. scumbag
This content is already outdated .. I'm working on my own implementation .. wish me luck
Use typescript amigo~