anything that wedo obviously now in our header. JS we'llsee reflected on katt williams theo vonour front end so we cando high from header blah blah blah youknow just a bunch of jarales and we'llsee it on our front end so this is goingto be our section where we're going tomake our header or our Navar or all thefunctionality for the connect button nowI'm going to tell you something and someof you are going to love this and someof you going to hate this I'm going toshow you I'm going to show you the hardway first then the easy way why am Igoing to show you the hard way firstwell because I want you to becomefamiliar with what's actually going onbehind the scenes and what's actuallygoing on with some of these componentsbecause it is really helpful whenbuilding these front ends to understandah okay here's what's going on if youdon't understand what's going on behindthe scenes you're going to go to try tobuild more advanced applications andyou're going to have no idea what to dobecause you've just learned the shortcutI like the thing of it is like calculuslike we're going to learn how tocalculate a derivative first and thenwe're going to learn the shortcut toquickly getting derivatives so don'tskip this part because this is going tohelp you well and Beyond down the lineokay we're going to learn this theharder way to set everything up in ourHTML funme we just used raw ethers tokind of do everything and you absolutelycan use raw ethers to do everythinghowever there are some packagesespecially for react that make lifedeveloping a front end substantiallybetter and in our full blockchainsolidity course JS we have a number ofother packages that you can use fullstack development and other librariesand if you watch this six ways toconnect your D to a wallet you'llactually understand some of thedifferences so if you haven't watchedthat video go back watch the video butthere's a whole bunch of library IESthat we can use that are going to makeour lives a lot easier we've listed someof them here react Morales is the onethat we're going to be using today theyhave some additional plugins and theyhave probably my favorite thing on theplanet which I'm going to show you howto do very soon but these are also opensource Morales also comes with someoptional functionality to hook into yourown backend to to give your app evenmore features and even morefunctionality and that's the otherreason that we're doing it so and we'regoing to go over that later and if youwant to use pure ethers you absolutelystill can a lot of these packages thatwe're using do rely on ethers but we'renot going to use just ethers so we cango to the react Morales page and to getstarted we can just do this bit righthere so we're literally going to copythis and bring it into our project andif you go to our package adjacent weactually already have react and reactDom so we can just do yarn add Moralesand reactMorales now you'll notice I'm not doingthese as Dev dependencies I didn't doyarn add- ddev here the reason isbecause for our production builds whenwe actually create the website here youwill need Morales and you will needreact Morales we don't need prettier tocreate our website prettier is a toolthat we're using as developers so in allof our projects so far we've been usingjust Dev dependencies that's becausewe've only been building our projectsfor developers our GitHub repos theyhaven't been made to build a websitethey've only been to do things on theback end for our website we're actuallygoing to be building a front end so weneed to put this in the dependenciessection because we need to say hey theseare the ones that you need to bundle uptogether for the front end and you canignore these ones and if it's just likea tool to make our lives better it'sgoing to go in Dev dependencies so we'readding Morales and react Morales and alot of the syntax that we're going to dofor our header is actually going to bereally similar to what we've been seeingso far so let's do this and thenactually we're just going to change thisname to manual header manual headerupdate Imports for manual header you cango ahead and hit yes do manual headerhere we're going to copy manual headermake sure it's in ourindex.js y we're going to change headerto manual header and we're going tochange header to manual header here andthe reason we're doing this is becauselike I said we're going to create a muchsimpler header after we create this kindof harder one and we're going to want tocreate that connect button which againwe made an HTML fundme by calling ethrequest accounts what we can do actuallywith Morales is we can just do thisthing called enable web 3 so at the topwe're going toimport useMorales from react Morales and if you goto the react Morales page here or totheir GitHub you learn how to set allthis up too and learn more about thedocumentation so we're going to importuse Morales from react Morales andinside our function here but outside ofour return we're going to say constenable web 3 equals use Morales now useMorales is what's known as a hook as areact hook and it's a way to keep trackof State in our application now in orderto use Moralis our entire applicationneeds to be wrapped around what's calleda Morales provider which is going to bea context provider for us and I'llexplain what that means in a minute butbasically what we need to do is we needto add this Morales provider to ourapp.js so in here we're going to importMorales Provider from react Morales andwe're going to wrap our entire apparound this Morales provider so we'regoing to do some little parentheses herenew line we're going to paste morouseprovider like this it's going to give usthe closing tag copy it paste it likethis and save and then in here we'regoing to writeinitialize on Mount equals false thisinitialize on Mount piece here is theoptionality to hook into a server to addsome more features to our website

(Editor in charge: swift)