Placeholder Image

字幕列表 影片播放

  • guys we're doing and we'll come to a brand new video tutorial.

  • This is my You did, sir, Actually on the freak O camp itself.

  • My boot.

  • And hopefully you can interaction.

  • You draw in the story as a marshal.

  • You Dorian making this and created the application gonna do today.

  • So for this one we're gonna probably do is create really awesome and cool react weather application.

  • So I'm gonna just go had to stop by step by step from scratch, start up a project creating react application and create all the different components and stopping this.

  • Put them together with the CSS styles and different things actually to be handled on.

  • We are gonna go ahead and go through.

  • Quit eating a full weather application with Bristol AP eyes, and we're going to just go ahead and use some things.

  • Actually, some help from a P eyes actually public a Beyonce using the rest ful est.

  • It'd be a prize like this, a p i X.

  • You so we can get the weather data.

  • And the forecast for for probably a couple of days actually ended for Curren's, whether getter for any city we wants.

  • For example, we wants the current city that we are actually in.

  • And we could get a lot of different Dan option.

  • If you don't know me, this luxury might learn you upside his dot com and hope that you could go in and check out the general down there so we can have, like, millions of other stories like this really old and cold stories and stuff like that, other one for web developments.

  • So they're going to try to get start So the final application or the port So I'm gonna work on this is actually the thing that we try to achieve throughout this tutorial, So hopefully you can just go and imagine this in your head.

  • I've tried to put a prototype together in here just a quick one.

  • Using figure, Mama.

  • So for those of you who doesn't know figure, I think that's just like a prototype into you could just go to figure my dark army Pretty pretty nice for two brothers type into could go ahead and just going use it.

  • If even though you're not that much of your ex designer or something, it simplifies your life as a Web developer.

  • Russian.

  • It gives you a lot of over cool, awesome features that you can use to provide such an application.

  • So actually here we've got the weather out.

  • Tyler, we've got the location name.

  • It's gonna probably basically just your location name, like London or something with God's number of degrees or the actual currents weather.

  • And we've got, whether it's sunny or it's dark.

  • For example, it says it's my city is going to show a logo or an image off like darkness like a moon to show that we are shit out.

  • 90.

  • Otherwise, we show a son.

  • So we are you, my shit day and we sell them like even Sonny or with some clouds or partially clothed or something.

  • There's something specifically for weather application in the weather forecast and everything.

  • We could also have just simply this one, this little tiny Barney, and that those two stomachs are probably a location.

  • We can just go and click that and get a pop up on.

  • We can actually storage for a location.

  • We said the name of location and there we go.

  • The locations is gonna go out and change.

  • Jump wholly owned up in the background.

  • Gonna try to make a love that from scratch and hopefully actually enjoying that and get the experience behind creating are like a really Olsen application using reactive me that you are actually knew he still needs to actually full of the story and try to figure out how things are actually working behind the scenes and in the future, apart in here or the boredom bars, where we're gonna probably do it just like, you know, show the forecast.

  • With a couple of next days, like the four next days or something like this, you're gonna show what is going on the next couple of days, like Sunday.

  • Monday.

  • You got the point, actually, and the Celsius degrees we can use referred or Soviets.

  • I prefer Soviets in this case, like, you know, more details about the weather for this particular days, like whether it's sunny or cloudy or everything.

  • I got pretty much the point off how whether application works, so just go in and try to get it started for me.

  • Ask complication if you are a reactive, although you probably heard of ours who used creates react up the command line to the Lowe's, which creates quickly and sent up applications or reacts projects very, very easily without any hassles or problems or that much of configurations I'm gonna use creates react up.

  • So probably you need to open up, Chairman.

  • Only here.

  • Or you can even use CND If your windows uses human during here and you create a jacked up, I'm gonna put, um, whether up, okay, simple is that just type in this one, and it's probably just going to start creating for us.

  • And it downloads and resolve dependencies like the reacts react script and in different packages, all those us to do so And there we go.

  • The setup and the creation of the project has been successfully done.

  • Now we can discover to use our favorite teacher, Chu, start working on the application.

  • I'm gonna use video CD code.

  • It's just, you know, very wholesome and very good.

  • You can use whatever i d you pretty much like.

  • So I'm gonna just go inside of the weather up before that's has been clear for us from the creator reactor Officer I and was gonna use the code of the opening just typing code darts and opens this project on the Brandon.

  • You instance off video zero coat.

  • So waiting for just the projects, you, Leone and everything.

  • And hopefully everything pretty much worked.

  • Fine.

  • So first experts do whenever you created a re experience, especially using the create react topsy line is actually detested and try to just go ahead and start running the star script to see actually what is going on behind the seas.

  • So we just get rid of that really need any more.

  • I'm gonna open up a new terminal instance of the integrated criminal from Fisher Studio Code.

  • And, um okay, now it's trying to run the schedule.

  • Jeez and beyond one star.

  • So he, you know, make sure that the application has been setting up and created successfully without any problems or missing dependencies or something, so we can stop developing the application without any problems.

  • So I actually decided to start the development process of this particular application from the scratch by creating projects and show you everything going on behind the scenes.

  • So probably when people faces ears and doesn't know actually how to go or how to start or something like this.

  • So, yeah, they would have a problem and they would try to fix it by just, you know, falling out from from just the beginning from scratch.

  • And just to make you guys feel comfortable fulminate along this one on There we go.

  • So the service, actually starting with all your problems and being getting like should be through a penny here or Yeah, no exception are also everything hopefully works.

  • Be much fine.

  • Take a look.

  • The application is actually the mean up togs files, so we can actually use this for it's the main components.

  • Eyes being rendered.

  • Wait a couple of seconds, actually.

  • Chew make this actually running around, taking quite some time.

  • There we go.

  • And there we go with the application working in the boiler pal is actually running the lowering your problems or issues.

  • So now we've got to simply just go ahead and start working on the application.

  • So was starting off.

  • Just try to It's our application.

  • If take a look.

  • Gonna gonna use actually the prototype of lot.

  • Let me just do many years in previous years going on, I'm gonna create first the container or the actual main components that gonna passel the props to this particular Vienna.

  • So in this case, I'm gonna create, try and gonna create a new file and I'm gonna use some kind of A flocks like flocks.

  • States management's You probably familiar with this or not It just like a design patron for reacts applications that all those two past Deanna between props very, very easily as we know that you can only pass theater from a parent to a child, nor the vice versa thing, like passing it from a child to her parents.

  • So we actually need some global data to be Ass is from the old actual components that is being rendered in the hierarchy.

  • And the other hand, we could have, like a main upstate that holds the upstate actually off all components like the shirt upstate between all the different components of any component in the hierarchy.

  • Any components being rendered on our application can actually access is theater and alter the d.

  • N A.

  • And set the stage and changeable, different things.

  • So if you're really, really important thing to know, even though our applications is very basic straight to the point, it doesn't really need the flex design parent.

  • But I just wanna point you guys get you better use it in this one for you, Actually, guys.

  • So you can take later along the source code and just develop it, take it to the next level Admiral features to it and make it just a real word.

  • Whether applications So you can easily out of the features without any problems, whenever you find it's actually or g being built on top.

  • This design patron.

  • So I'm gonna need this, for example, is gonna be the store.

  • So why I'm naming it store because it stores the critical global upstate.

  • So, yeah, sort O J s is gonna be a normal components.

  • I'm just gonna go in and do, like, poor reacts gave from.

  • Well, yeah, and I'm gonna do Well, um, it's gonna be in a way that controlled I'm just gonna do export the fools on Try.

  • Okay, so it's gonna be class.

  • I'm gonna create a clause in here.

  • I'm gonna name a store, and he's gonna extend as normally, you and Jax don't components.

  • Okay, there we go.

  • That is gonna be having a constructor of something you could initialize any daniken passing props to the skin trump to structure, which is not really that much of a big deal, But you have still worth having in here.

  • We could have looking mean, upstaging you.

  • What she's like.

  • There's gonna be it.

  • So and I can give you a hand comments in this, like Amine states.

  • Okay, we can have rendered function and movie wants is all of the Children that's gonna be inside of that is actually or any Children that we're gonna pass do.

  • This one is gonna render it just inside the store.

  • We're gonna have passed to them.

  • The state we haven't hear whatever you have in here.

  • For example, try to put some dinner like the name or like, the application name, and I'm just gonna put application name is gonna be wither up.

  • So yeah, on.

  • And here we try to return whatever.

  • Like props stop Children think, but this doesn't actually how it works.

  • What you want is to take the state every single piece of data that is in son of this date are the statements were having is just going to pass it down into the hierarchies or whatever the child's gonna get it is gonna get it as a props.

  • So to do so we're gonna just use the help off props and Children alongside react clone elements function or the method that loses to clone elements very, very easily into components of passing the props down.

  • So here I'm gonna like return, and it's gonna be a malfunction.

  • Is gonna use react daunts Well, Children, And for this reactor, Children gonna use the map function.

  • So the malfunction you need to pass the Brevard child so we can do yeah, Children.

  • So we need to access the props.

  • I totally forgot about the thought may use, actually, status components on.

  • We can actually went to that here on DDE What I wish to use.

  • Well, we've got a serious issue here.

  • So clearly something is actually going on, but on God, I think we have to take a look at this one.

  • Components taking, actually Children.

  • Okay, so just to passing the Children my bad here.

  • So they start promised Children, and the next thing it takes a hold back with a child on, but we can use this, so yeah, boys drew enough keys right now, so you probably see me typing it really were here things and just stupid errors anyway, so here, we can use the child where we're not probably return for each single charge Gonna be passed into this.

  • We're gonna probably just surrender.

  • One single child is gonna be the up components that were gonna rendering us out of this.

  • So I'm gonna return and gonna return Like, um, yeah, clone elements and his clone elements.

  • It takes an actual element, which is gonna be the child.

  • So the child is actually a real word.

  • React involved elements, and he takes the second thing is clearly, see, here it takes whatever props you wanna pass into this child, and it just creates a brand new components with this promise being passed in Ju.

  • So the props you want as, for example, is actually the states that we having up there so I can easily need to meeting this estate.

  • I'm gonna do this, thongs states, and you make sure to mutate this using these expand symbol thing or the actual expend objects in traitor in here.

  • So just to like, you know, merge a knob.

  • Jax, this is an object with another objects and why I'm doing it here.

  • Just merging the state objects with an empty object so he can create a different object rather than ST.

  • So here, free trade just to passing the state, Just gonna pass in the reference of the state We don't want that wanna mutates the actual state and pass it down to the child so you can have the same props as we do for the actual state.

  • So it's gonna be simpler is out.

  • Everything here is gonna have the up name, whatever we adhere.

  • Just gonna be right over there.

  • So, yeah, it's pretty good pattering here.

  • Basically, No.

  • The best thing you can have you Can you have a reduction when the flocks flocks actually have many different ways to be implemented on.

  • So it's just very basic in a very efficient way I actually have and they use a lot of my other projects, so hopefully you can actually like him.

  • And everything is just simply the store door, Jess.

  • Now we can jump back into the abductee s probably off the whole rendering.

  • I don't need any of this, and they could just get rid rid of it.

  • And when it wants to say, need the styling.

  • So I'm just gonna put another final, so guys in here.

  • What is it?

  • Actually the store?

  • And so they also seem gonna put another folder named its ass is gonna hold our SAS files and for actually working with sass and in no jazz.

  • So or probably Cleary, act up.

  • You've gotta go install.

  • Know what to do.

  • So discouraging news.

  • So MPM install node dash sas makes to do this.

  • If you want to use less or something, you use the actual compiler for less.

  • But we want to use SAS just only for development purposes and just gonna install this for evil purposes.

  • No, actually, have been installed.

  • Success.

  • We know we can use this as very easy.

  • So I'm just gonna do it here quitting you found.

  • But I need this.

  • Probably just the SAS.

  • So it's just gonna be the main application style inside of this folder.

  • You can you can have a different ways to create that instructor is about Sam.

  • You know, the best thing for me.

  • So it's actually better to James this from J s to Jess.

  • X.

  • So visual recording l i d can actually recognizes as a real JSX fouls.

  • And he can actually activate some features first like emits.

  • And we can use some estimate features or GSX features in this one.

  • Or you can easy just going down here.

  • So the job scripts and search for react javascript and change it.

  • But I would like very much changed the name here.

  • And rename.

  • It's just adding GSX and clearly see the icon changes into recognizing GSX or Java scripts and react and probably gonna get another beer.

  • So, for Vince, we're gonna probably do is just simply go to the index gorgeous, and it doesn't actually recognize any advance.

  • It can just have the GSX in here, and everything should be much.

  • We're fine.

  • Oh, are you on?

  • Yeah, we've got a complete difference or for a situation that is actually happening from this, and I still can't quite figure out why, but yeah.

  • So if I try to keep me calm Panelist and be amongst on again on yet we've gone completely difference here, which is react.

  • Scripts are not define what?

  • Come, Mr Ayers.

  • Okay, so we're just tying up.

  • Just trying to fix this with enviable stall.

  • Um, Well, yeah, star script.

  • This sometimes happens when you actually configure our we created react up projects.

  • Then you actually installs Apollo Dependence is as begin just installed the node sas.

  • So it basically I don't know, some kind of really hard bunk.

  • It deletes the reaction script, Cherie.

  • It removes it from the back to Jason.

  • This is a really, really bad thing to you.

  • I should actually submit some issue or some other people, actually, some minute issue into the Actually, they get hot issues for the queer Reacts happened.

  • They can let DeVore prospectus as soon as possible because it's very, very annoying for the bulb in things in here.

  • Now, actually, everything is working too much fine.

  • Also installing the REAC scripts.

  • I don't know.

  • Just a serious bug anyway.

  • So just like in a rendering a living here, just just the purposes and he pretty much working fine with all your problems.

  • That's conspiracy in here.

  • We've got the react.

  • Just open up the deaf tools so we can clearly see what's going on behind the seas Now, woman, I probably do just, you know, put it giving here.

  • I'm just gonna put a dent in a class neighborhood give and it's trying to put the cross name I don't know.

  • Like this is gonna be the main container.

  • Then we're gonna have just a smaller containing the sound of it.

  • So it's just gonna mean it.

  • Like container, Okay.

  • And sort of event we're gonna have is, well, another continuance.

  • We're just gonna put another Constantini she's gonna hold.

  • Um well, let's name this.

  • Let me just meaning this like a pup.

  • Continue.

  • The problem is, I believe, with renaming.

  • So the majority of problems are naming your valuables in your classes and ideas and different things to just to have them nicely.

  • You remembering and stuff like that.

  • So I'm gonna name don't waste this.

  • Name me teacher.

  • Okay, I'm gonna be just here.

  • And we could just go in and play with a song a little bit.

  • So gonna have a CIA SAS style is gonna be the up container First, let me just first with the body and the HD moles.

  • I'm gonna start with the chemo and say 40.

  • I don't need get Sascha.

  • I shouldn't have done that.

  • Should Name is a CSS.

  • OK, now we should work.

  • So Barney, and it completes 100%.

  • Okay, is gonna be 100%.

  • I just gonna be the same 100% high as well.

  • Um, well, we're just gonna use the book sizes.

  • So I'm just gonna put box size in your border box is the best book size in that you could use, actually, for your application.

  • It's the best thing, actually, for having a smoothie layouts and responsive design.

  • So, yeah, this is basically what we should have done and try to get.

  • Our classes are first half up, contain yourself.

  • And it's sort of it just gonna use sas are just gonna put inside of me.

  • Continue.

  • Okay.

  • And he's gonna have, like, the width of 100%.

  • So under the problem is actually with typing most of the time, so yeah, 100% as well.

  • On dhe.

  • It's very hardest to time and talk at the same time.

  • So you got a point too much you're gonna use flex displaying here, Just display things moving any consent or things are aligned them in this dangerous or what it wants.

  • I want to take this one.

  • Yeah, after it stops.

  • Okay.

  • Let me just refresh that when it wants is actually to have them old in the centre in here, just the weather application, the whole container of the application gonna be in the center and we don't really care about the older I think that we have.

  • So this is what I mean.

  • This just gonna be its And the other one is just like the outside I paid.

  • So we just only care about inner container off the application and hear the weather application.

  • Just gonna be the main container I'm gonna have, like, flicks Dodge Game.

  • Gonna just do justify continent's centre and a line points in his center so we could have a perfectly centered I think so.

  • Let me just fresh that Really correct.

  • Hopefully just know including in style.

  • Anyways, we just go in and try to include this time just reporting it.

  • I'm gonna pour this style just giving process and up the success so upto issue says go Just saving that Sri compiling it should.

  • Now we have them like horizontally century, but vertically in most of the time, the problem is actually with verdict a centered so that the body taking the full Hinds everything's taking the fall heights.

  • But the route is not so.

  • What he wants is just like to add if it's the same thing to the I.

  • D or fruits, simple as that.

  • Now there we go.

  • We've got them spiritually centered right over here in the center.

  • And the containers, actually, probably just the main continues actually working fine volume problems.

  • And you can put some constraints into a storage comports with and or keep it like minimum with the vast gonna be arnold your 100 big souls or something.

  • Something like this.

  • I'm just going And Colby the pixels of this this house 993.

  • You know, I just got to try to call me this off the main with its quite launch.

  • So I'm gonna try to put six end of pixels or something of this.

  • Okay, that seems that seems pretty decent.

  • Is not really that much of bad on.

  • It can put heights.

  • The highs actually always fix it, and it can put about 400 pixels of height and take a look in that.

  • I think it's quite a lots.

  • So we can actually take this through 300.

  • Okay, Yeah, 300 seems quite decent without any problems.

  • So clearly seeing here just the actual over in on Del Klein is.

  • Show's pretty good.

  • So just copy this with them right over here, and he should be much worse.

  • I'm also gonna put a display of flex you hear so we can have this container's ro gonna be flex design.

  • I'm just gonna add a couple of things in here Just gonna add, for example.

  • Um well, tried some Bordeaux, so we can clearly see it.

  • It's gonna have a big soul with solid.

  • And I'm gonna add a bone to shoot you or mature on eight so we can have a decent CE.

  • Um, okay, they try.

  • I know.

  • So we can have a decent gray here, and I'm gonna add a border radius as well.

  • So for a border, crazy.

  • I'm gonna three big souls and I'm gonna say solid, so Okay, I know I had a solid, but it's not safe for big souls or even three pixels.

  • A little bit much better.

  • It's gonna be everything in here.

  • Okay?

  • Just scoping it is actually a pain.

  • Just copy.

  • Pasting it.

  • Okay, there we go.

  • And Marie wants in here to design and destructor the application.

  • You're gonna have Jude Difference House The first half is the top half, and we have much to leave the Board of Health.

  • And this is actually the meek and gentle with me in containers.

  • Gonna be flexed like flexed box.

  • So we're gonna use the display flex, and you're gonna have to split this into house we're gonna have up section or the top section and the bottom section, both of them.

  • So I'm gonna go ahead and just out of those exactly the same as we want them up togs, and we can actually go ahead and try to put them right over there.

  • So I'm just gonna do this is the me container.

  • I'm gonna be here.

  • Uh, dots, top section.

  • We're gonna have another one, so it's gonna be section go on.

  • There's gonna be actually the top section.

  • I'm just gonna put Tom Point.

  • And so we can easily structure these things and we can put them together with all your problems on.

  • Probably here we're gonna use since we want them in rows.

  • No columns that we're gonna change this.

  • You're actually flex this play or flex direction to birds.

  • Say awesome.

  • Clear.

  • See the flux.

  • Call of a mystery Meat access houses same orientation.

  • So there's actually where he wants.

  • We want them to the actually, both columns like this first column and second column in here.

  • I'm just gonna see Fats and this should hopefully there we go.

  • So this first column, the second column, As we said on we've got the main container in here.

  • But there's not taking the full with how to do so.

  • I'm gonna use the basis or flex main attributes to set this.

  • I'm gonna set 100% for both.

  • Um, but actually, it's takes them out of control.

  • It's gonna say 50% out of the worth.

  • So they have the top has the first top, and the bottom actually has what's left from it and just gonna need to copy this from it and should be much work.

  • So I sort of that's gonna be the main container is gonna put us both of them.

  • So just just stop section I'm gonna put Flex and so that the board of section and flex right over there, So try to refresh.

  • That's there We go.

  • We got both of them.

  • This is the top.

  • This is the bottom.

  • And they have, like a completely separate paths from from actually with different things in here without any problems or issues.

  • So we've got them covered successfully.

  • But just go and try.

  • And now to work for the top health and try to display some much d d n a.

  • That we can actually later oranges and make it dynamic.

  • We just need to put for now just a static data.

  • So later on, we can I don't know, hookup or just try to call in a behind and give the Dina and making actually work as a dynamic think was actually, you know, changes every single, the changes.

  • Whenever he chose that location and changes, it changes over in a one time passes and someone or so forth so you can actually visualize the real world application or whether application.

  • But for now, we just need to get the Deanna out there.

  • Just need to structure it and start with the CSS.

  • Like to put the Deanna.

  • So this is actually what you wants, where they actually designer or quit eating a reactor application, whether another vanilla JavaScript application, any framer calculate using angular view James.

  • So this actually the steps that I would like to commend for you guys to go through for every project for every application, either a simple or a huge application.

  • Of course, when you're dealing with the larger because you're gonna need to prototype lost again puts your costs is inside of, like, UML or some some diagrams you don't you simplified this kind of things for you and make them easier for you actually to reach and understand the whole complicate complexity you for large application.

  • But never mind.

  • Actually, just for a simple one teach prototype like this, just get things out.

  • Put them statically like Jackson here so you could easily visualize them and, you know, design your interface first, then at the functional to do it jumping in here since we're gonna work on the stump going on Nevada, just gonna put it that I'm gonna go to inside of the US Our secret.

  • Another folder name is full darling components.

  • So it's gonna hopeful the components just the best practice.

  • Actually, when it comes to reacts, applications is to put your aside.

  • Components You're like, you know, small components into a different folder called components that you can actually call them from the main application components gonna create The 1st 1 was gonna be top dogs.

  • GSX.

  • So I'm gonna create another one is gonna be the bottom gsx So you can actually named them whatever.

  • But just, you know, naming like this would be pretty good at getting poor.

  • First we ask from Jax, you always do.

  • So, Andi, I am gonna just export defaults.

  • A normal component state for component, actually not gonna work with state its components.

  • In this case, I'm going to say stop.

  • Um okay.

  • Top section.

  • It seems like this is a little bit much bird gonna react components on.

  • It's gonna have a constructor of 11 does and takes the props on, actually, because beacon cold super crops, you have a state in this time an empty or objects of states and just their editor function for you simply on this return to render function already danced, just like with germs and other container you can actually use.

  • I don't know if you use it like a deaf to this case, put something against inside of it.

  • Just for a quick visual ization.

  • It can be a little things.

  • And you're putting the bottom.

  • You're probably just change It is to bottom section on three here, changing it.

  • And there we go.

  • Just you know, you've got juice separate files to separate sections for you ready to go?

  • No.

  • Jump me back into the upto Jan's and hear.

  • Actually, you can import our sections.

  • I'm gonna do imports.

  • Okay, It's up section and from the components folder.

  • I'm gonna go inside components, You grab the top on.

  • There we go.

  • So I'm just gonna go in and render this'll section is out of here.

  • It does have no props, actually, so we could easily just render it simply despite Colin to confirm it like this.

  • And he should be much work.

  • It's unclear here.

  • Now we can just move with the developments.

  • Each of the top that JSX inside of putting a ll the cones off up the Js because he's way, way much better for, you know, civil applications.

  • So you could disappear it with our Europe team.

  • People can actually read it.

  • And just generational happy need behind the seas.

  • Well, then, just putting over chunk off your code logic and application logics and the wine, you know, just mix them all together inside of a father is gonna be really, really painful for a lot of people, actually.

  • Who's gonna read your cups?

  • So make sure to do so if the rights Wayne I'm here.

  • If you take a look on the bright side boy wants is first to get the title up and the time is actually gonna be centered right over here is they're gonna use the display flex, and it's going to get this out of the way.

  • So it's gonna create a closet here.

  • Costs name.

  • Gonna need this, for example.

  • I don't know.

  • Let's try Thio.

  • Tom.

  • You're okay.

  • That seems quite decent.

  • Instead of a top container we're gonna have and I'm gonna have the top title and we're gonna have actually another stateless component.

  • We're just gonna create it down here just in a second.

  • I'm gonna have this is actually the title I'm gonna say, Give the title.

  • Just gonna need me like this for the class name.

  • And here, I'm gonna say is gonna be actually the weather.

  • I just tried to name the application, actually, whether help instead of like, whether awfully, this I actually need the weather up.

  • Always.

  • So always get you whether or something you can choose another meaningful need for the application.

  • Of course, I'm not that much of a person who actually does the name, you know, selection or something that I'm not good at a total.

  • So, yeah, hopefully you can just go and figure out a better name for this.

  • Let me know.

  • We know.

  • So it's gonna be with her application jumping into a style.

  • Let me just move this into a sign That something, Jackson, they're here.

  • We're gonna have so the title.

  • But it's it's out of the top section on Gonna have actually this this actual container.

  • So it's gonna be the talking Jenner we can easy just move it right over here.

  • So it's not gonna be having any any any batch it.

  • But the best thing is not to mix the update CSS or the main CSS styles.

  • All of them just put them in.

  • One single found is gonna be really painful was well, so you meet for each components to split this ass or split the style for them and which each style on a separate file for each components on when it's awkward for each component, is actually, when you have big components like components that plays major roles on the development of application when it comes to a component, for example, toe apartment is actually if you re gonna reuse this bonnet across the whole pages of your application, a lot of cook over compote is gonna depend on this bone, and you obviously gonna go ahead and do the sound for them separately in a separate style sheet foul.

  • So there's gonna be way much better for your shitty guy's gonna be here Another one which is gonna be the top style or the best way actually to go with this one is Let me just go in and show you this I'm gonna quit another folder.

  • Gonna need this Stop gonna create another one.

  • Team it boredom.

  • So we could just Kobe this on.

  • But this is a job says move OK, And he actually viciously Yuko likely tells you to or notifies you.

  • If you want update the import to further move files, I'm gonna say yes.

  • Okay, I'm gonna take the bottom as well moving in here, and it's gonna ask us again.

  • So hopefully it does actually asking, I don't know something's likely wrong with this anyway, so I'm just gonna rename this into index dot Js on.

  • What do we need here?

  • Is just gonna like whenever we try Thio accident.

  • Toto, just only the top directory.

  • And here are the top folder.

  • It automatically knows that we want the vote.

  • Yes, if you specify another foul name.

  • Obviously just gonna go ahead and imports of a fine name for you.

  • Simple enough.

  • I'm gonna change this as well in here.

  • He's gonna put it indictable gs.

  • So now we have, like, this is the bottom is the main entry point of it, and we can put some style files and he's gonna put, like, style dogs as CSS for this.

  • I'm gonna create another one in here, so it's gonna be styled success pretty great.

  • You're gonna have the style for the actual top file.

  • So let me just move this into it.

  • Especially the top.

  • So we're gonna have the container mink in January.

  • Exonerated.

  • We have a title, and the whole container's upset.

  • It's gonna be a display flex.

  • So it's gonna flex display on flex direction is gonna be a column so cold.

  • It's actually just you know, like to display them are very clean here, so yes, there has horizontally.

  • If you want horizontally use where we set up a column you can use Also reverse Roe Reverse column.

  • Stuff like this we're gonna puts, for example, Let me just set the funds family for this one, so you can easily change it Later on, you're gonna say family.

  • You gotta use the oxygen.

  • If it is actually divine for your brother or something, I'm gonna use us.

  • Well, some serious instead of it's in.

  • Case is not defined.

  • We will just fall back and into the stalls serve forms.

  • I'm gonna send a fun size.

  • So fun size is gonna be about 22 big souls because it's kind of a title.

  • So we wanted to show up and going in here.

  • I'm gonna have like, a color for it.

  • So the call was going FFF for completely Weitz and yeah, So this is this is basically what we want to hear.

  • We need to center it since we want this into the actual center.

  • So we probably won't we want sees all the other components.

  • You want them into the center.

  • So we can just take this and put it right over there.

  • So we will think more about this.

  • Is that application?

  • We can have this fun.

  • And, uh, let me just move this so we can have this bond and moved out.

  • Since you're right here, we don't have to do anything with the older spaces in there.

  • Yeah, we can.

  • We can have that spot.

  • It depends on you and how you want to lay out or style instructor application.

  • So I'm just gonna d'oh okay, Just defined conscience and center it since, actually, we're using a column.

  • So this probably should pretty much work and make sure to include with Santa Fine here.

  • So we recognize this really easily so you can just go in and do a side of CSS Now.

  • We told us that he couldn't open up anything in here.

  • It's just don't back into the outdoor, JSX.

  • And actually, he couldn't find out or something.

  • So yeah, it's pretty bad from there we go just very refreshed city index.

  • When you actually go ahead and exit the actual running watch or the server development.

  • Just control C.

  • And you couldn't remove this index and you can just go ahead and we run.

  • That's because it has also another bar guy found out about that.

  • It actually doesn't recognize the index.

  • Whenever you're trying to rename the fouls once the structure, the Iranian or something, this is just, you know, Gary, we're head over its trade to fix it or something.

  • That's now he works without any problems, Hopefully way to jump back into the reactor application?

  • Um, yeah.

  • Shows, actually, nothing for the top container or something.

  • It does shows nothing because we have haven't said any background.

  • Yes, So I'm just going to try to grab this bank around this really nice dark blue background and try to put it right over there.

  • So I'm gonna go to the stubble chomp state background color.

  • Okay, I'm gonna just space the color, and hopefully now he shows.

  • But the height is actually not taking full space.

  • Say right.

  • 100%.

  • A swell is the width.

  • So there we go.

  • So just control us.

  • There we go.

  • We've got we've got now the weather outlook for the 22 picks is cry a lot, so I'm just gonna move into 20 and it's actually century and I don't want to justify contents is we're using the column.

  • So we need to use the alliance oftentimes.

  • Okay, which work?

  • There we go.

  • We've got the weather up perfectly centered up there and everything.

  • Too much working fine without any problems or issues or something.

  • And everything is specially recognized, Expected.

  • Now we can have another components that is gonna be placed right down here, which is gonna play the role off displaying A ll the DEA.

  • That is about this.

  • So all of this theater sexually gonna be grabbed from the A P I hook.

  • So whenever we call the FBI and the baby are gonna uses a a p i x, you or something in this dot com, it's pretty good.

  • It gives you a really nice enough retrial about about 10,000 hits a month or something.

  • This so we could use this intestine and career application.

  • Probably not gonna reach out 10 thousands a month.

  • You could have another e p eyes service.

  • Is that provide a PS like this for a free my final little better one.

  • You know, you could just go ahead and just update the application like this and that would be really nice for you.

  • So I was absent Is gonna be a love it just a containing components that we can create another component separately for it.

  • And it's gonna be, well, another state for components for this one.

  • So I'm just gonna do a class.

  • It's sort of this week we could actually have any sort of ist or we can create it separately.

  • Different file.

  • The best way is actually do created a separate file because, you know, you can take it as each final takes one single components, endless found has a stage for components and a status components.

  • When it comes to state its components, it doesn't actually count as a real components.

  • You got a point?

  • Very much so.

  • Here we can create these.

  • Um, I don't know.

  • So we can call this, like, whether Don't guess X or something.

  • Okay, that seems quite interesting.

  • Um, making this regards from reax, you can explore the folds.

  • You could put a class whether Okay, next.

  • Yeah, it's gonna have a constructor and everything.

  • And why I'm adding in Statesville components that states computers because we're gonna have a state's gonna be managed by this since we needed a P I call, we need to head the servant and give the D A and feature from from the actual FBI, breast or FBI.

  • So we need to change the state, like, over time said the stays when we set it to normal.

  • Since we haven't received there's any heroes or something Andi said the actual state update, the actual current Celsius are going the weather, we update the image of stuff like this.

  • So we're going to see more of all this when it comes to real world things when it comes to working with the ordeal in premature, that restroom baby eyes and I'm gonna have the render.

  • So just gonna be basically Rendina ready Basic scaffold.

  • We think here we have is actually a congeners.

  • I'm gonna return a div dance whether container okay on for this weather container we're gonna have is I see the first is the location name, then these two containers one he's holding the image the older one is actually holding.

  • The currents are no the current weather and just we have another container down here which is gonna be sunny or shows the currents whether details so sunny or cloudy, Whatever things actually happening, so we have in here is gonna be the weather containers gonna be flex designed or flex books.

  • You think of all this second so we can have the best.

  • I'm gonna create a div.

  • So basically, you can have another container inside of this.

  • I'm just gonna need this continued so we can sell them the best way on this container gonna have above this.

  • Hager on it.

  • Put it.

  • Actually, it was this way.

  • Any side of this we can have to get Jane.

  • You're is like image.

  • We could just go this image Another one we can We can call this, actually, um, current weather.

  • Okay.

  • They just put, like, a ton on here.

  • Location, name.

  • So we can actually just with them.

  • And we can see what's going on.

  • You can put for example, sonny on.

  • There we go.

  • Now, AKI, the next step is to take this components actually called in the top in here, so we can actually writes before, right?

  • You much right after the weather up title.

  • We need to render this components and get everything.

  • As I've said that, just wanna put old static information in here.

  • That's right.

  • I did all the static texting here, but the only one we could use the whether a p i to get all of the dynamic Deanna on our components.

  • So just simply important that in here.

  • So I'm just going into that really quick.

  • And then I'm gonna say there's gonna be a weather components and imported from the file component's as we have just created symbols that and now we just need Thio surrendering right down here.

  • So I'm gonna say whether Wait So when's your less save that going back into you, the rocks application is just gonna use the hot reload or to reload for you guys in here and they're real.

  • You've got location, name image here on 10 degrees in here and basically says it's sunny or something.

  • This so it's not quite as we expected it to be, But it does actually agree Jobs ever try no to out of some stylings, the way actually loved to add stylist to my either rock reacts applications or any other C s s style.

  • Whether you're creating a normal static Web site, html CSS website or you're dealing with a reacts application or any other framer here using it doesn't actually matter, because at the end you're going to deal with the CSS.

  • So you need like a live preview of your CSS.

  • You can actually just get back in here typing the CSS save and let the hellhole reload.

  • Or you can go back and re fresh that it's gonna take a quite some time for your actually guys to develop the application to see the actual size and sees, actually, designers or who designs Web page and what developers actually takes a lot of time.

  • Thio point a webpage.

  • Together they needed to alarm modification a lot off, re sizing things.

  • A lot of putting things in your color.

  • Changing for families and phone science is a little different things that makes you feel really uncomfortable while trying to do this.

  • So the best way is actually throughout the deaf.

  • Jules used the death toll is the power of devils and put some CSL stars from here so we can easily, really, really hope you watch through What was your journey as a weapon for printing putting CSS styles together?

  • So I'm gonna probably do just going to the weather up for it.

  • The weather container in here is complete receipts.

  • It's completely empty.

  • It doesn't have any style, is going to start with a display of gonna put a flex display Gonna change the flex direction to call them.

  • So I want them, like, you know, uh, you know, just a column waiting here.

  • But this is basically a little bit more complicated than that Mrs we have in here.

  • This is the hater.

  • And we have, like, chew component, then have the future.

  • So when this is actually we're gonna have, like, three or one more container, so this represent the head of the other one represents an inner container.

  • And the last one here, the sunny thing represents the future.

  • So I've got to go ahead and work around with this, because this way, it's not gonna work.

  • So we need to work around the structure changed a little bit since you have admitted here is quickly receding inner container, the photo and the hitter, or did the structure and everything.

  • So we need to structure it using the CSS style and put invested together.

  • I know that you actually make a difference.

  • So now We just put it like a display flex in years.

  • It's a flex container and everything.

  • I need to go into the hitter and I'm gonna say it's also gonna be a display flex Flex that Russian is gonna be a row So it's always gonna take the road thinking here.

  • Yeah, it's basically that it is.

  • I'm gonna go to the inner container and the ID number displayed.

  • Flex was gonna say flex, But this time the flex direction is gonna be really as well, because I want them to be displayed.

  • Its role, like the image is gonna be alongside the degrees Celsius of the weather.

  • So, basically, is that image on the rights image of the or the left side, and we've got degrees in here on the right side.

  • Basically, that's basically what I want.

  • And finally, we've got the fridge.

  • Or so it's just simply a CE we did in the other side is just gonna display flex and I can I can just like put flicks are justified content to center this out because I needed in center as well as the location name they need gets in centers or we could just go back to the hitter and just to find contents to your center.

  • It's already being centered because the with Annie has taken the full of it.

  • But you can you can see the difference.

  • When must the science actually or the Texas getting smaller?

  • So, yeah, it doesn't actually matter for this time now, we can just jump back in here.

  • We can go to the style of the weather and that if I understand anyway, so add like I have tops.

  • Now, I can add a queer novel style for but that doesn't really matter, because it

guys we're doing and we'll come to a brand new video tutorial.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

React教程。使用RESTful APIs的天氣應用 (React Tutorial: Weather App with RESTful APIs)

  • 0 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字