Framer Motion (for React) #2 - Project Setup

or rather than gang so for this course I prepared a starter project with a lot of basic setup components for routing and styles already created and that's so we don't have to build all of the basic reaction off from the ground up because remember this is not a react beginners course it's a frame emotion course for react so if you want to learn all of the basics of react first of all definitely check out my react tutorials first then come back here so to get the starter project you can head to the github repo frame emotion right here and specifically we want to go to the lesson2 branch this is the starter project this folder right here called pizza joints now it's up to you you can either download the zip file right here by clicking on this unzip the file and then open up that folder inside your text editor or you can clone the repo if you have git installed onto your computer so that's what I'm going to do I'm going to clone the repo by clicking on this button right here and by the way the link to this repo and this lesson is going to be down in the description so once I've copied that link I'm gonna open up a terminal and first of all navigate to a directory that I want to create this project in then I'm going to say git clone and paste in the URL to clone this repo now once I've done that I'm going to CD into that so see the frame a - motion and then I'm going to say git checkout lesson - - and that gets us the lesson - branch of this repo which is where the starter project is right here so now I want to navigate into this project folder so I'm going to say CD pizza joint's like so and then I'm going to open up this folder inside vs code now to do that I can say code and then dot and that opens up this directory for me inside vs code and now we can see we have all of the files and folders that make up this starts a project pizza joint so the first thing I'm going to do is open up a terminal and I'm going to try and start this project now before I do that I have to install all of the dependencies and all of those can be seen inside package.json right here so we have these dependencies frame emotion react react Dom react router Dom and react scripts so I'm gonna install all of those so npm install like so and that's going to take all of those packages and install them and we should see a node modules folder appear on the left once that's done and there it is okay so now that's all installed i can go ahead and start this project by typing npm start to run it and this should open up the project in a browser which it has done on my other screen so let me just bring that over here and we should be able to see the start of project so it looks something like this i've created all of the base HTML and CSS for this and set up the routing and we'll go through all of that in code in a couple of minutes but let me just walk you through the website first of all we've got the header over here in the logo we've got a button right here and there's no animation to any of this at the minute just basic react and basic CSS and all the functionality does work and then it can order this at the end and we also don't have that pop up at the end either yet because we're going to create that with frame up motion so that is how the website looks to begin with now just before we take a look at the code for this project I just want to show you what the component tree looks like at a glance so at the top we have our root level component a pas and nested inside that we have all of our routes inside a switch component meaning only one of these components can show at a time based on the route that we visit and it's in order from left to right so we're going to start with the home page and then when we click on create a pizza it takes us to forward slash base which shows the base component then when we click on next it takes us to forward slash toppings which shows the toppings component and then when we click on order it takes us to forward slash order which shows the final order component and also we have a header component which is nested inside a pas that shows the title and the logo and that it's at the top of every single page okay so now we've seen that component tree let's dive into the code and just see how all of this is structured inside our application so first of all inside public we have an index.html file this is what he's altum Utley served to the browser right here and it's basically just an empty file it's just got a bit of content in a couple of meta tags at the top and also this div right here with an ID of routes and that's where all of the react component template is dynamically injected into this web page so that's the index dot HTML we also have a font right here a custom font quicksand lights which I got from Google Fonts and I've created that font rule inside the index dot CSS file right here so that we can use that font in our project quicksand right here okay now let's just take a look at these files here so indexed is that comes along for the ride whenever we create a new reactor project and it's the initial setup of our reactor this is what renders it to the DOM and you can see right here I've imported the router from reactor router Dom that was a package I installed and we can see that if we got a package JSON and go to the dependencies right here we have react or outer Dom okay so we installed that and we use that router to surround our app now this app is this app component right here which we import and that is the route component from our component tree so if we take a look down here first of all we can see this is where our switches and this is where we register our different routes so we have one for forward slash which is the home route and for that we're loading the home component well take a look at these other components shortly the second one is for forward slash order right there then we had forward slash toppings and forward slash base they're not necessarily in order right here of the order that we go through them on the website but that doesn't really matter only one is going to show at a time so inside those routes we have these components based toppings order and home and all of those components are inside this components folder and we'll take a look at those in a second we also have the header component outside of the switch inside the Roots app component as well now inside this root component we also declare our state using the use States hook right here so we have a bit of state to keep track of our pizza and as we go through the website we're updating these two properties the base of the pizza that we choose and also any toppings so when we go to create pizza and click on a base type that updates this property right here in the States and we do that via this function add base which we pass as a prop to the base component right and as we go to the toppings page and we add toppings that updates this array right here toppings inside the pizza state we do that via this function right here so we check if the topping has already been added if it has and we click on it we take it out if it's not been added then we put it into the array so that's what this function does right here and we pass that function into the toppings component right here okay so that's the state and that's the functions that we use to control that States now let's take a look at the different components we've created so first of all the header very simple it's just a header tag and I've created this SVG don't worry too much about this for now we'll talk about animating this SVG later and a little bit more about what this means then but that is the logo right here this SVG and we also have the title right here pizza joint so that makes up this bit right here at the top of every page now after that we have the home screen and we can see on the home screen we just have if we go back to the start we should have a title and a button and that's all we have an h2 and we have this link around the button to go to forward slash base so that's this component right here and all we're doing is creating a few different options for the base we're storing those in an array we're cycling through those in the JSX template using the map function and then we're returning an li tag for each individual base and we attach a click event each base to add that base to the pizza States if we go to the app is right here so when we click on a base adds that this property so let me go back to base that's all we're doing right here at the bottom we have this thing right here which is a button to go to the next page but that only shows when a pizza base has been selected so we can see that if we go to create pizza there's no button as soon as we select one then we can go to the next page which is the toppings so all the toppings are right here again is the same kind of thing we create a toppings array with all the different toppings options we have a title then we map through those toppings and output a bit of template for each one again we attach an on-click event each one to add that topping to the base or rather the toppings property on the pizza right here okay so we output each one of those and then again at the bottom we have a link or a button to the next page which is order and all we do here is we take in the pizza as a prop we output an H to a paragraph tag with the base of the pizza and then we output the toppings using the map function as well again all of this it doesn't really matter too much this is just the base react websites and functionality and it's got really nothing to do with frame emotion yet which is what I'm going to teach you if you're finding all of these are really confusing then definitely check out the react tutorials first and then you'll understand what all of this means but hopefully now you know basically how this website is working so far so that in the next video we can start to work with frame emotion to animate some of these different elements now just one more thing before we finish inside the package Jason we had a dependency called frame emotion and we installed that before when we said npm install because that looks all of these and installs each one of them now if you were starting a blank project from scratch then you would need to install frame emotion to use it and all you do is say NPM install framer - motion that's all you need to do and that's gonna install this package for you in your project ok so now in the next lesson we're going to learn about the basics of frame emotions animate elements on our webpage

Channel: The Net Ninja

Views: 41,016

Keywords: framer motion, framer motion tutorial, utorial, react motion, react animation, react animation tutorial, animation tutorial, react framer, react motion tutorial

Id: lfR2X-jsy8A

Length: 11min 14sec (674 seconds)

Published: Mon Jun 01 2020