Time: 2025-07-11 11:47:51 Source: Codora.ai Author: news Reading: 877 times

be running with it has a couplelogo images and exclusive rapper interviewsit has a manifest theManifest is something that we want tochange this tells our browsers a littlebit about what our app is and what ourapp actually does so this is somethingthat we we would change but everythingin here here is pretty self-explanatorythe short name of our application thelong name of our application some iconsstart URL this is something that if youwant to fiddle with it later absolutelyplease go for it and then robots. textwe're not going to talk about this atall this helps web Searchers andindexers learn a little bit more aboutyour site we can ignore this one as wellso for the most part we're not reallygoing to do anything in the publicfolder or the node modules folder oursource folder however we are going to bespending a lot of time in it has our app. CSS which includes a whole bunch offormatting for HTML we have app. test.TSX this is going to be testing ourfront end yes you can even test yourfront end we're going to totally skipover testing the front end which yes Iknow we've spent a lot of time testingour contracts if you want to learn moreabout testing your front ends there'ssome fantastic links in the GitHub andin the description to go over this app.TSX which we are going to be spendingsome time in and it's one of our themain places for us to write some codeindex.cssagain formatting and styling fileanything that ends in CSS is some typeof formatting and styling all these TSXare going to be typescripts index. TSXwe're going to pretty much ignore we aregoing to change the logo and we canignore all these last bits here apackage.json this file tells our projectwhat dependencies it needs and no JSpackages it actually needs to getstarted we have a readme which of coursefores a read me we have a typescriptconfig which gives us some options onhow to work with typescript we're goingto ignore this and then we have ouryarn. loock which is an autogeneratedfile we're not going to touch it at allbecause yarn is going to automaticallycreate this if you're not if you'reunfamiliar with yarn. loock andunfamiliar with a lot of this stuffdon't worry too much about it this isn'tgoing to be a file you're really goingto need to pay attention to but okay nowthat we've created the basic createreact app we can actually go ahead andWR now we can see what a front end wouldlook like so we'll CD to the front endwe'll run yarn just to make sure we haveeverything installed what yarn does isit actually installs all of ourdependencies anything in thispackage.json yarn's going to go out anddownload these dependencies and storethem into node modules and then yarn.loock is going to tell us exactly whatit downloaded once running yarn now itjust checks to see it says Ah it lookslike you already have everythinginstalled because when we run createreact app it already goes ahead anddownloads everything but now we can justrun yarn start if you want to know wherethis is coming from if you go on yourpackage.json and you look under scriptsthese are the four different scriptsthat we got actually run running yarnstart runs this MPX react scripts startwhich will actually start our front endso we'll do yarn start you'll see reactscript start you'll see it says startingthe development server and after alittle bit of time time we'll getsomething that looks like this editSource slapp TSX and save and reload andthis is a super simple front endobviously this isn't at all what we'relooking for but we've now started afront end which is fantastic it'll saycompiled successfully it'll say you cannow view front end in the browser it'lltell you exactly where it's located onour local host on the network and it'llgive you any outputs from the front enddown below so we're just going to stopthe front end for now by hitting commandC or control C and closing it down ofcourse if we reload now on the front endit's going to be blank but great so wehave a really basic setup for workingwith a front end awesome if we look atan application like app. a.com you'llsee they have like this really funconnect button that pops up and they'vegot some nice user interface tools foractually working with the blockchain wedon't want to have to reinvent the wheeland build all these custom tools fordoing this so we're going to use thisapplication called usep or thisframework called usep which has a wholelot of these already built in to getstarted installing all we have to do isrun this Command right here yarn addused appcore so here in our front endwe'll do yarn add at usap SLC and thiswill go ahead and install all the usedapp pieces into our front end so we canactually work with used app and notreinvent the with working with walletsand working with ethereum and othersmart contract applications awesome nowwe have that installed we can actuallygo ahead and start building our frontend now what we're going to do is we'regoing to go to app. TSX folder and we'regoing to start in here we're going tostart adjusting some bits in here sowhat we can do is we can do yard andstart and we'll get our our little reactfront end here now what we can do is wecan go ahead and do something likechange anything in here right see howthis line says edit source. apppp sourceslapp and save to reload you do wechange this wholeline being something just like hellowe'll save it it'll recompile we can goback and now it just says hello right sothis is how we can actually upload andupdate our front end we have these thesewonderful return pieces here thesereturn sections here which will returnthe HTML to actually render the frontend and this is also our starting pointfor allowing our application to be web 3compa able so if we go to this used dapdocumentation right we go to our ourgetting started section we have a littleexample here that shows kind of whatwhat something should look like rightbut it's not

(Editor in charge: ai)

Previous article: GenAI Essentials – Full Course for Beginners - Ep87
Next article: Bloodhound Q50 Tells His Life Story (Full Interview) - Ep9

• 
• 
• 
• 
• 
• 
• 
•