Application Setup

[00:00:00]
>> Before we jump in, I just wanna preface this with the fact that we're gonna be using create-react-app. Under normal circumstances, if you're building a design system, you would not use create-react-app. You would want to have a different kind of pipeline a different environment. Maybe you wanna use a monorepo, if you have different packages for different types of components.

[00:00:17]
Maybe you have react, we have Angular, a monorepo like learner would allow you to do that. We're not gonna be setting that up today,for several reasons, I'm not an expert in monorepos. Secondly, it might not be the best solution. There was a library called create-react library which is really cool, it's linked in the website, and it was really great.

[00:00:36]
But I could not get it to work very well with style components, and it's great for actually deploying your components to npm, it worked super well with npm. But I wanted to use CSS in JS, and I didn't wanna run into errors. So, because I wanna focus on how we build styled components, and the styling in storybook, we're going to use create react app.

[00:00:54]
But you would not use that in production. Okay, let's do it. So, you can open your terminal, I'm going to save my project to my desktop, I just find it to be the easiest. And I'm gonna use npx to create this react application, npx comes with npm version 5.2.0 and greater.

[00:01:17]
It's a great tool that allows you to use different versions of packages, to create your applications. So previously, like you would run, create-react- app and then your app name, with npx you do npx create-react-app. And so you don't need to have create-react-app globally installed, that's another important thing nps lets you do that.

[00:01:35]
So if you have npm greater than 5.2, you can use this command and if you don't, that's totally fine. Just use the current react app CLI tool. Does everyone have create react up enabled, like you're able to use it? Okay, so we're gonna create react app, I'm going to call it my component library.

[00:01:54]
And I'm going to chain two commands together using this ampersand. You could run this and then the second command cd into it, change directories and I'm just gonna do cd, create react, or my component library, my component library. So this is going to create this new component library, and that's gonna change directory so we are in there.

[00:02:13]
It might take a second, but while it does, I wanna show you a really cool tool. Let me go to the notes here, this tool is a CLI tool for VS code if you are using VS code, it's going to allow you to, Actually run like a code command to open your current directory in VS code.

[00:02:37]
So, you can grab that here, it's again, on the website, it's the CLI interface tool. So what this is gonna allow me to do once I'm actually in this directory in my terminal, I can run code dot, meaning the current directory, saying open that current directory in VS code.

[00:02:51]
So I'm gonna be doing that in just a moment. But if you want to go download it, this is where you can find it. I'll also show you my editor settings just in case I have a couple of things that you're curious where I got them, while it's still loading.

[00:03:06]
So, in terms of font, a really fun font that has ligatures, what I use is, I think it's called Dank Mono, Dank Mono, this is the font I'm using in case you're curious. I think it's paid, I think it's about 40 British pounds. But it's really, really nice, if you don't wanna pay for it, what was the other one is just gonna mention?

[00:03:26]
Fira Code, Fira Code is free, looks very, very similar and you can download this for free use, it's for free experiment, it looks very similar I just repeated myself. So those are my two fonts that I would choose from. Another fun thing that you can do is these material icons, I just like to share this with you since we're waiting.

[00:03:47]
So this allows you, if you have a project and you drag it in, when we create ours, you'll see mine. It'll actually use the material design icons on the side for all the different files and it looks really pretty. So that's another plugin that I really, really like.

[00:04:03]
Can you define styled components? Yeah, so styled components is a CSS in JS library, It is, to your Google app, styled components dot com. This is what it looks like. In contrast emotion, like I mentioned emotion is another CSS in JS library. They're very similar, they have very similar foundational elements.

[00:04:33]
And so the whole concept here, is we're gonna create JavaScript files. And we're going to actually apply CSS directly onto these HTML elements. And once you do that, you can just render them like normal, like normal elements. So that's what a styled component is, it's a library for creating CSS in JS components.

[00:04:53]
We are now inside of my component library directory. So I'm gonna, like I mentioned before, I'm gonna run that code command. It's gonna open my current directory in VS code. You can get at the link to that again, on the website. Okay, so, the first thing that we're gonna do, is delete everything inside the source folder, this is a lot of boilerplate.

[00:05:10]
So I'm just going to select all of this, my holding Shift, and delete. Okay? From now on, I'm going to use this integrated terminal in VS code, and you can open that by pressing Cotrol backtick. And let's go ahead, well let's not start our dev-server yet, cuz it's gonna break.

[00:05:29]
So inside of source create a new folder, new file, I'm sorry, a new file, called index.js, okay? Import react from react, and then importReactDoM from ReactDom, okay. Let's just instantiate a simple stateless functional component that just returns a div saying Hello, World. So, const, what did I call you?

[00:05:54]
App, And we'll just do, we'll do an h1 we'll be semantic. And we'll say, hello world, okay? Let's render it, so ReactDom.render will render our app, and we will use document querySelector to grab the root. You can also just use get element per ID, whatever you prefer. So ,now, if I run npm start, it should spin up our dev-server if it doesn't take two weeks to start up, and it should show us a header tab that says Hello, World.

[00:06:33]
I use a tool called Spectacle to snap my windows if you're wondering how I'm doing that really easily. But there are much better tools that are maintained that you can use as well. Okay, so we've got Hello, World, that's exciting. Let's actually go ahead, let's install styled components.

[00:06:51]
I'm gonna create a new terminal window, terminal window in VS code by pressing this plus, and there are two ways that you can install. I'm gonna close my sidebar with Command B. There are two ways you can install this you, can write npm install styled-components. Or you can just simply write npmi styled-components, it's kind of shorthand components.

[00:07:15]
Components. So I spell that right, yeah. So let's go ahead and install that And while that's installing, we can actually go ahead and start using it. So the first thing we wanna do, let's create a new component folder. So inside of source create a new folder called components, and we're gonna add a buttons dot.js file.

[00:07:35]
Now a fun little trick if you wanna just do both of those at the same time. If you hit New File, and you type components slash buttons d.js, this is gonna create a folder and put that file inside it. So it's a fun little trick. So, we've got our buttons.js file inside of our components folder.

[00:07:54]
And let's actually, let's create ourselves component. So the first thing we need to do is import styled from styled components. Okay? Now let's just build out a little simple primary button. So const primary button, the way styled components work is you're gonna have this word styled, it's gonna say hey, styled components I want to style and you give it an HTML element.

[00:08:20]
So I want to create a button, so style.button. You're gonna put two backticks like you would if you were using template strings, and everything inside here is going to be our CSS. You would just write it like you would in a CSS file, sometimes if you're using react like inline Styles, it's different shorthand like you would right margin, right?

[00:08:39]
If you are doing some inline styling but you can just write regular CSS so you just use the hyphenated slight margin right like that. Okay? So let's give it some properties, let's give it a background colour red. Give it a border with none, no border. We'll give the color of white.

[00:09:00]
We'll give it some pattern of 12 pixels, 24 pixels on the left and right. And lastly, let's just that font size 2 1 ram. The last thing we just wanna do here is just export, I'm gonna use a default export for right now. We will come back and refactor this.

[00:09:23]
So here's our default export. So as soon as this is done, we can go and instantiate this and hopefully it works great, okay? So just to reiterate, you just have to write the words styled, followed by the type of component you want this to be styled upon. And you'll see when we actually go and instantiate this button, you would just use the regular tags like you would for any HTML element.

[00:09:44]
It's just a styled component. So let's head back over to our index file in the root of our source folder. And let's import primary button from components buttons. So because we're using the default export here, we don't need those curly braces for those of you who are kind of new to this whole process.

[00:10:06]
A default export you don't need those curly braces, but if we were exporting many different kinds of things from the same file, you would need a named export. So we'll see those differences in just a little bit. Okay, so styled components is now installed. And let's actually, let's change this from an H1 to a primary button.

[00:10:24]
If you're wondering how I selected those, if you highlight something in VS code and you press Command D. It will highlight every instance of what you've highlighted. It's really great way to change the start and tag or something very quickly. So primary button. Just like that. Now we can see our button showing up on our UI.

[00:10:42]
So it's looks really nice.