Send email with React js node js nodemailer

hey what's going on my dear friends my dear dudes code Ito is back here with you and today we are gonna make something cool cool cool I'm just kidding guys it's nice kidding you can't be all the way serious so now let's get to work what we are gonna cry so guys we are gonna create this contact form which is fully functional we're gonna use react GS 4 front end from the front and for the back we are gonna use no GS and note made there so let's see what happened first of all let's put a name my name let's see Cody what I'm doing right last name let's say someone do you worry food mail let's put an email for example let's say F F F double gmail.com cool hello my dear youtubers okay it's not bad cool let's submit okay cool message has been sent and let's see our mail now we are just gonna it's here yes yes our mail came to our Gmail let's see formation Nemco Tito last name someone write email FFF hello my dear youtubers okay this is guys how an email can be sent to our Gmail I will try to make it as simple as possible there are many profit youtubers web developers who tries to make things extremely difficult and at the end you are disappointing with them so I will try to do my best not to explain it as busy as I can so guys of course this forum is responsive we use some media queries right and if you now to write to send a message look please fill out this build you can send you have to complete at least this field right right let's send another mail let's say PPP PPP PPP let's say Jim May let's say for example code code let's say let's say dddd dddd stop me now a tab is going to appear here message has to be sent and that's the three amino acids icon is gonna disappear let's see now what happened we're just waiting now message from bbbbb that's the message DVD cool let's go and get started guys first of all let's go and create a folder with a name of let's call it my form cool cool [Music] you know let's copy the destination go here copy a con copy and code to our s CMD s md cool c'mon bro control the press control the cool oh no mistake is a mistake don't do it press C or C D control then cool now we are in this folder we are here in this folder or don't see the crack don't like we are in this folder now what we are gonna do now let's great and pigs great the front end create react let's say for on all client client no it's the same client good cool MPX create react app client cool now we are waiting for for the creation of the folder of the react folder which is gonna be the our front-end cool it's gonna take a couple of minutes me not so I'm gonna stop for a while okay guys we are back we are here it took me almost ten minutes I don't know maybe maybe it's good to make an update to my laptop so hey where we were so let's I'm gonna close it now I don't want my command fly-in this year let's do something saying to go to your text editor just great the folder that we created great the my form and put it inside your text editor pretty nice after this why don't we let let's go guys and so we want to create now a package.json file in order to bring our know the modules inside because we need a couple of things in order to make our form so MPM they need cool now that's right put push and there and the description for the tribe and and Auto code it to cool and now a package JSON JSON it's here cool what else now we need to download a couple of things here gonna see what we need of course we need and p.m. installed we need no mailer what else we need body parser we need course patel's don't remember what else I need now let's go to my ah I need guys also I need no daman in order for no GS to make update automatically concurrently in order to run both the front and back-end on [Music] rendering right and of course we need we need Express in order to make our server and generally to transport our input forms data let's write Express and BOM and gender and now we are waiting for for our modules to appear here what I suggest you guys is just doing what I'm doing because if you are doing something different in a different way maybe you will not have the same result so so follow what I'm doing and in the end just experiment with yourself if you want to do something else what I don't like in YouTube tutorials that everyone makes the same in the same tutorial they try to make difficult things and they lose the the simplicity of things I can understand and then everyone who's who attended toriel get frustrated and give up don't like this of course I like doing everything from scratch the reason the reason is that with that it's very very simple and easy to understand something I don't like when I'm working in a file doing something and then just from somewhere Justin good thing input file I lose my concentration okay that you started let's stop with a body part second crazy course Express not mailer no daman what else funding something else cool let's create now out of the client okay let's create now no see Adam a file with the index dot GS which will be our server cool right cool close it now we don't need now let's go inside to our client go to sources app GS where is up GS after Papa Papa Papa cool good here now this CD Lyon and NPM stop I'm gonna eat lament our form design and then we are going back to our initial reacted up is starting come on right let's do a couple of things now I don't need the logo don't need the header delete that's great here in our sources create a file the name of four dot s cool press as CC which is a class-based component nice let's import it here in Port for okay from for just imported here a component for coal right now we don't need this anymore good we are going to write everything here No let's get sad guys let's not delete lead even write a class name but with container beautiful next step let's write our oh no for forum cool we don't need the action yes let's go and create our div dot single damn right after this that's great La Belle let's write here HTML food let's write a name cool name right it got the name let's do let's go to up CSS control aid delete everything we don't need this cool after this let's go and create our in put dot name Cole likes name name equal with name right what else let's write a placeholder here why not placeholder equal with your name go to code good nice let's write something else we are single single all right then in order not to get confused and of single item right like now copy it ctrl copy a page face okay right here last name last name and just put your capital and write what is cool yeah your last good let's go now email email right email your email beautiful what else and for this will be name last name in mail you know we don't need this just close deleted single eye single text area okay this is a text text area tip dot text area cool let's also write here a single sing I why not Thanks area message let's put here don't want to be so big hey like older equal with your message dot dot dot cool we want the label label let's put a label in later message message alright we're gonna improve it so below the forum above the floor let's create ATM a baton and let's call it back type with serving me serve me cool we got the button with a toke the beauty and let's create a message div dot and msg okay and here message send good or not the same st. right now okay now let's go and create our style first we want to prevent our default with asterisk margin let's put 0 padding:0 box-sizing let's put border box cool right let's go to dot-com pain and just put let's create a background in order to see what I'm doing lie lie stickering I like this color cool right ok let's put a margin I don't want to put it in the finder pick cells and what else oh right after this let's I'm gonna put a wings of night tip percent full nice box shadow of one big cell one the except for the Excel one pixel and let's put a light gray with light gray like gray okay let's go now to dot container for the wings will be 100% is gonna hold follow the initial greens let's put a padding of 10 pixels again now it's better after this we need dot container label let's put let's display block block cool now we see that we are close letter-spacing what I do 0.1 REM yeah pond time let's put it down if I like it I'll yeah good [Music] let's say given both wrong three pixels forgetful it's nice okay three pixels somebody cool let's go to Todd container and put dot container text area Cole we need the winds of 100 percent all inputs are gonna follow this wind right right it's good work load and margin of 0 oh ah ha ha there oh yeah pardon sir it's not bad ok now it's better border we don't need the border right compatible that now in school why don't we give it books both shadow what I'm doing one pizza one pixel for pixel one PX l GP let's put right okay so but it's not bad and what else copy all this model copy paste put nowhere let's put focus who's also here focus a box shadow one Excel one pixel for pixel one pixel GP let's board 49 right 240 look when we will push the edge we see these focus it's not bad I like it you can do you can put whatever cool background you want I like it right next thing let's go to dock single item and put a margin of then the Excel zero right what rather I can see here the space something I saw only this pace let's see what happened ah and we need to put in here single Oh what I'm doing here then what I'm doing guys so you can see how is it to get confused with things okay now we it's cool now I like it I like you like it I don't know I liked so let's go now let's go and implement dot BTN light wind to 100% right let's put the text align both sender cool don't beat the end button cold winds let's put this amount right cool font size of 810 pixel goal letter spacing let's put the 0.2 REM ya pad 5 pixel time pixel not bad right or their pixel solid runs power and got right outline we don't need a blind man let's put a transition all 0.5 second easy now right for this young relative margin-top let's put a magical side itself right cool copy as you can see guys you we can't avoid the fairy creating things with CSS CSS it's essential it's a nice a certain order code to create things this oh cool let's just great bow there one pixel so I'm gonna put Effy Effy Effy right and let's see it's not you can say now Y dot begin button folder would they do but ground let's choose our Gd quick okay it's not bad I like it like it just put a car some point there in order to see she are the car sir right right I like simple and nice cool let's go to our message and the sorry guys got ms/ms g text-align:center nice nice when you put a magic boat on cutting board honest Tempe excels write letters pacing let's put a little space about 0.2 REM and of course my favorite style of italic it's nice a wins off Jay they had it for the big sales let's put a party of three big sell font size of 60 pixel right with us font away let's put it ball right very nice now call our our GT it's five and five RJ is not nice now because we this color is not good the combination we are gonna do something else so but around if we put ffff now it's nice why don't we put a border radius of five pizza party I like it now it's nice cool let's create a class that is not in our deal dot M s J appear it's gonna be this play do you know cool and now we are gonna put at this playing man where it's a display come on display man cold so what now is man and when we choose the dist class all these things all the tab is gonna PR guys okay you are going to see it later let's make some a query media screen and put a wings of let's put it winds of 60 let's see yes we got a 60% copy all this control coffee days let's go to to savings of 40% now cool let's see what happened yeah okay we got it I'm not going to deal with this anymore close it now let's go and create a couple of things we need to create a state so they eat well with [Applause] named Jay last name Jay which is the default one in the mapping your default is an empty string email message cool yeah and finally let's create a send or change which is sense and is we created gonna put it false as default so if the message has then we want to see the class the message appeared that with great in CSS or this reason we created okay let's create our now handle and of the all right good the name all equal with its great avatar of factions yeah this dot said state cool name ito target damn always the same thing curly bracket and no all right right pedo target ah yes we got to put an event here right cool copy it total copy/paste pain face it's a handle name and the last name [Music] let's put a capital T a candle and the last name cool put here a last name the guitar dot last just be careful guys what are you doing handle email Cole handle message cold oh right message yes we got it let's go now here in our inputs and put let's make it better so there we need that value equal we please God take dot name goal after this we want the own change to be equal with this dot handle name cool let's see okay our name is not changing something is wrong this dog stated me what I do let's say [Music] ah what I'm doing guys here we need a value let's see oh Jana it's changing also here you can see how easy to get confused for things value you need to change the target of value cool let's go now to class name value ways about you let's make that same things here value equal this dots state dot last name and of course we need one change in the work change what I'm doing these dots paid dot between tax this dot handle candle last name cool let's see it's forty the same thing let's grab it control copy all do the same thing here when this is just a dot email here yeah email cool and email let's see oh I did a mistake here May doesn't wanna miss maybe here is a mistake ah yeah - put it in mail so when you copy and paste many times these things consulted right last last is the message let's make the same thing if you are a value is time doing I've already have it just copy and paste values of state dot message gold this daughter handle message right let's see and we got the same problem here I didn't change it let's put main seat and cool we got it now let's go and create first of all let's kill our server control our front-end Gordon clear yes we want to install NPM install we want Axios game install Axios in order to make API calls after the race cool let's see we got Axios really parents Axios it's here we see okay we are here in package.json of fair sources okay but confused with package.json of a client look this is a client purchase we asked here and package.json of sources food let's go and do something else now okay after the prelate just create a proxy cool and right oh let's put two double quotes right HTTP hello right okay close it now in port Axios Axios go CR let's make our form submit now form to beneath submit federal funds ah it's around this yeah and I am [Applause] you got revenge that's right this is the data that we want to send [Applause] and the message [Music] always this right and now we want to use Axios make a post okay in this direction cool and what we want to send a data cool dot then let's use price sticker right this dot set state we want of course the scent to be true it has been sent when you want to the same to be true and of course single be true and of course here we want the form to be reset so we said form and of course these don't reset for copyright in this tone instead form we don't have it we are gonna create it right so isn't everything is not going to be right let's create a catch there is a no error catch and the log is gonna be our message no send cool for a resetting resetting initial data that's right reset for pick one really is not said state and then when when we write something to be we want to be again empty initial last name email and of course the message right okay hey why don't we put instead I call this dot said stay Sam to be false I think we want to be false again after sending the message right let's say time out issue scare we need to port and it's puts three thousands right it seemed to be okay alright guys after this let's go and create close this group in our index GS and we want this is the servant now the back end we want cones X red red equal with require express cool Const body we want for the buyer sir we need another mailer what's wrong and of course of course cool after this and that's going to the experience I've got news Oh don't use what is happening ah of course I need this right now we can see don't use we need the body parser dot Jason's gonna come as Jason right don't use gold body pass dot you all right expand it to be true right and I've got juice okay we need a course all right let's go I've cooked right and we rest well [Music] [Applause] the post now we are gonna make our posts here to AP forum write a request and their response please let's go let the red dot bad this net is empty Oh Maynard create transport surveys email for the portal for specified also education now you've got to put here your email I [Music] and of course your password of in May and go now here at great let male options with Rome data dot email cool too I'm gonna grate it again the copy right subject that's right message for all today of course we need the HTML is great on HTML CR and by the litterhouse right share something that's right [Applause] [Applause] I know that list cause we need a lie just put here we need to put here they die your name copy put here we need last was gotta clear that about the last name [Music] cool okay after this let's write x 3 3 here a seat and let's write that paragraph [Applause] data dot means age cool recorded [Applause] yes I am the to transport godsend mail call we want mail options yes yeah let's put the bearer and the rest points if arrow rest godsend as what we want rest God's and we need [Applause] success and after this we need ask them to be transport the clothes [Applause] right let's go now and do a couple of things in a package.json yeah we don't meet that test and let's right back note index dot G s right that's right here there there [Applause] more than one index dot punches s a client we need to put here and p.m. start all bread fix clad in good and of course we want to wrap both of them gone Oh rent early right and I am lying there there yeah around Syria [Applause] and damn run client a big good let's go now - yeah and it's cool [Music] kind of yeah yes let's go to the initial and right and I am going let's let forgot something [Music] before [Applause] yeah we got is not take notes and we need m SG msg bacteria CR we just need an MSG right go here now just like npm run death and let's see what is gonna happen our server is gonna start automatically at least we don't have them stapler Blitzer let's inspect element it's like something a and something seems to be wrong suppose [Music] to prevent ah what I'm doing guys I didn't put here or something submit we go to put four where is the phone we have to put the form submit unclick equal this God for submit and message sent it's an Xterra things that I have a syntax error location form GS lying under one column one sissified let's see what happened that's it of course I'm gonna put the I require resistant [Music] quiet yes stop for a while guys when I stop for a while okay guys I'm here again sorry about the problem I found out finally what was a problem damn it if you if you copy from PC these things happened but what can you do don't have choice problems are in our lives so let's do it again so we we're let's now go to England XG s index GS alpha good to put our port of listening guys I don't believe it I was loading my PC and my PC my port this is what I forgot this was and it goes like he like this in PC and I thought okay I write everything but I didn't scroll down and I didn't series so now let's make it from scratch sorry guy about this problem stars in our are in our life so we need to create a cons we need to create port ok let's put a port equal with process dot and V dot all right and we want to put the port a number okay this is a number of porn by the way I'm gonna make the request and we are taking with that cool up dot week one day list them right for cool and of course we need to know if the server really is in this point okay so we're starting at port oh cool and service started at port three and eight thousand one could little eat this now after this we need to do something else okay something that I bought something wrong that I could go to Seoul in the end and here my mistake was that I had the own clique we don't one day on clicking because if we put here every time a foreman is gonna send okay we want the unsub lead on something cool and after this everything is gonna work cool let's go now and write something for example finished that's right a name that's right last call last name OD mail that email for example same to mail these capitals cool write a message finally we think yeah cool let's send a mail now and let's inspect go to lock yeah let's send it cool message has been sent and we could a correct post let's see our message message from the last okay from last name finally after some problems finished yeah okay guys this was a tutorial we have some problems we had some problems but we finally solve it if you liked it subscribe and of course push the like button what else I had something else in my mind forgot it when you write something guys be careful be super super careful because you you saw what problems we faced ok I face probably because I forgot some couple of things but even a dot if you forget you are going to have problems right we finished we don't need something else so guys that was our tutorial about a contact form with react Gia's no Diaz and don't mailer and of course we would try to write something here something is apparently says please below them all you can put here also the same thing to appear you can put require here required here require like in this section okay that was guys have a nice day and don't forget to subscribe

Channel: Codito

Views: 29,396

Keywords: Send email with React js node js nodemailer, How to send email with react nodemailer, How to send email with react.js, How to send email with react node, Nodemailer - Send Emails From Your Node.js App, Send Email with NODE JS REACT JS NODEMAILER, react contact form, node contact from

Id: o3eR0X91Ogs

Length: 92min 49sec (5569 seconds)

Published: Wed Apr 29 2020