13.10. FramerX - Design System and React Site

13.10. FramerX - Design System and React Site

(dinging) (upbeat music)

Hi, my name is Meng.
And today I wanna tell you, how to use your Framer X code components, on a real React project. So the first thing that we need to do is to create a React site and the template that I'm recommending to you, is called Gatsby. Which comes with SEO, multiple pages, caching, really, really fast build time and all that stuff. If you want to get started, click on Get Started. And here you want to install this. Now before installing this, you're going to need Node, which I've shown you how to install that in a previous session about style components. So all you need to do is, copy and paste this command right here, do command + space for spotlight, and type terminal. And here we're going to paste that command and install Gatsby. Once it's installed you can go to your desktop so, cd Desktop and then create a new Gatsby site. So Gatsby new my-new-site and then press Enter. Once it's done, let's go to that directory. So cd my-new-site, Enter, now because we using Typescript in Framer X, we need to install the plugin called Typescript. So if you search in plugins, typescript, it's going to give you instructions on how to install that. So, lets copy and paste this command and install that. For installing this plugin, you also need a second step. We have to go to the gatsby-config. But first of all let's go back to terminal and open a project. Let's do open. This is going to open Finder to your project and let's switch to this view and drag and drop my new site to VS Code. Now as mentioned for the plugin I just need to copy and paste, the name of the plugin right here between the backticks copy go back to VS Code, go to Gatsby config and right after the comma, right here after offline, Enter. Single qoutes. Paste and you can put a comma at the end as well, and save. Awesome. Last but not least, we have to install style components because we are using style components. So control and then tilde to open the integrated terminal, and here we're going to install style components. Type nPm install -save styled-components and then press enter to install it. Once you've installed everything, you can do Gatsby develop to start your server to start your website, in local host. So press enter and then wait until it says compiled successfully right here. And this is the link to your website. This is the link to Graphql, if you want to learn more about how to setup your React site I have a course about React for designers, which is going to teach you about Graphql content fold, about using Stripe Payments, and basic styling and CSS's as well as animations. Now let's go to the website. Going to local host, this is your local environment. Meaning that it only exists on your computer. It's your server, it runs discreet, so that it builds the website for you. Let me put VS code in fullscreen, like this. And I will put the website right next to it, like this.

Perfect, I'm going to close this window
and then open the SRC folder, and this is where I have all the files for my React site. I have the components, which contains the header, the layout, the Images folder, as well as the pages. The page that I'm seeing on the right side is called index.js and this is where you can see the html content, Hi people welcome to your new Gatsby site. So Gatsby provides these pages for free. Including the page two, so if I click on here it creates this beautiful link right here to page two and to the normal index page. And if a user goes to a page that does not exist, it's going to go to the 404 page right here. And then if you look at the layout of JS inside components, this is what wraps the whole thing all the pages so that it's using the same header which is here and then some basic styling. If I want to I can just remove the header if I save and no more header, I can go to layout.css, remove everything, and just put body, background black, save, and everything's gonna be black. Let's put the color to white and let's put the font family to Apple Systems using the order completion, put ; at the end. You can use option Z to wrap and then save and now I have a very basic site which is now ready to receive some of the goodies that I have created in Framer X. First of all let's create a new component. So right click on the Components folder and click on new file. I'm going to create icon.tsx. So exactly the same name as I have created right here. And now from the Framer code, I can just select everything copy and paste it right here, and then save. Let me just close the Open Editor. At this point we just need to make sure that Gatsby is able to accept all the code. But because some of the code is very specific to Framer X, I have to remove that code. That code has no use on a React site. For example, the property controls, the control types which basically controls all the overrides. I don't need that on a real site. So let me remove this line right here, about Framer. And if I scroll down I can find the property controls and I can also remove this part and then save. The last thing I need to do, is to export this. So export, default, icon and the reason why we export is so that we can use on the main Gatsby site. Let's save this, and open index.js and pages. So click here and then let's import that component. So import icon from ' . . / Now the reason why we're doing dot dot is because it means we're going back to the pan folder. In this case this is the index.js, it is inside the Pages folder. We're going to the parent, which is SRC. And then we're going to go to components and we're going to find icon.tsx. So let's do that, using order completion again and then icon and then save. Now we can replace this code right here by icon, / which is to close the icon tag and then save.

And then viola, you'll find the icon on the right side.
Obviously because we're not using overrides it's not allowing us to select which icon we want to show. But this is essentially just showing the SVG code from the default prompt, which is the first result, which is the close icon right here. Okay so let's try another component. Let's go back here and let's try the Avatar component. I'm going to click on edit code. This is my code and select everything, copy, go back here, create a new component avatar.tsx,

paste the code, remove the Framer's specific code.

Export. Default.
Avatar. Save. Then going back to index.js import the avatar. So import, avatar from ' and then inside components,

avatar and put
avatar right here. Now you'll notice that nothing is happening. That's because there are certain things that you need to be aware of, let's look at our avatar component. First of all, we're noticing that there's no width and we're using a 100% height. And 100% height depends on the parent container, since we don't have a parent container we have to use, pixel units. So if you save, you already see that something is happening. The next thing we need to do is to set the width to 100 pixel. Now the reason why we're doing this is because if you don't set the width a DIV always takes, by default a 100% of the parent container. Now I mentioned about the height not having a parent container. The thing is because the actual parent container, which is the whole window does not have a set height that's why 100% was not doing anything. So if I save this now my avatar is enlarged by 100. And I can set the border radius but the border radius is not being controlled by anything except for the default props, which is a radius of five. And the same thing applies to the photo which has a default image, another thing that you'll notice is that the AP I called that is after Render is not really applying to this image. So we need to fix that by putting this API call, in a function call component DidMount

is equal to parenthesis,
arrow, curvy braces and I'm gonna cut and paste this code here. Now the reason why I'm moving outside of Render is because it's going to go into a loop and it's going to make the API called infinitely. And it's really not good for the server. Component DidMount is only going to happen once when your component is going to be loaded the first time. The only thing that I need to change is how I'm setting my state. So I need to do setState({

Enter and here I'm going to set
the photo column and then get response.photo which is the data that I'm suppose to get from the API call. Now if you save this you'll see that it's going to change your avatar after this is called. So when you're doing states in React there's a certain order of things. First of all, it gets the default prop. So that's the first picture that you see and then after a second, after it's making the API called, then it receives it and it applies to the state and then that's why you see a delay of like one or two second depending on your internet. So that's basically it, we can try and do a third component such as the full name right here, edit code get the code, and create a new component called name.tsx,

paste the code, remove the Framer parts,

export default name, save, and then bring that to index.js.
So, import name from . . components, name and then put that after name close. And if you save you see that name is there, we just need to change the way we're doing the API call yet again, so we're going to put this API call in a component DidMount.

So parenthesis, arrow, curly braces
out the API call then set the state. So, I'm going to put this value right here, set the state, parenthesis, curly braces, change the name to this, and there you go. You see that after a second, it's loading a new name and a new avatar. I can basically set more padding. I set a padding of 20 from the top and bottom a zero from each side. And then a font size of 20 pixel, save. So this is it, this how you bring your component code to your React site from Framer X to any production website that use the same libraries and of course you can adapt a code if you're not using style component. For example, you don't need to use that library. If you're not using Gatsby that's fine as well. So, I hope that you enjoyed this whole course about Framer X, how to create your prototype, how to use the basic tools, how to do animations. How to do design components as well as code components and how to bring those code components to a real React site. This course is completely free. So you can share it to your friends. All the source files will be provided so you can compare it against your own work. And if create something awesome please share it to me on Twitter I would love to reTweet it. Thank you so much for following along this far. I'll see you next time. (chiming)


We're not around right now. But you can send us an email and we'll get back to you, asap.


©2021 RussellCoder

Log in with your credentials

Forgot your details?