 Hello everyone! Welcome to part one of what's going to be a series of videos in which I do my best to talk about end design and cover all of the components that we can use inside of it and basically what end design is is kind of like Material UI in that it is a React library that if you install in React gives you a lot of components that you can use in your React app and just overall speeds up your development process a lot. I am here at end design's documentation site and in my opinion end design just gives us like better documentation compared to Material UI and it's one of the biggest reasons why I would suggest you to use end design over something like Material UI. But before we can do anything with end design let's just walk through the setup process of the entire workflow that I'm going to use. So I'm going to go to the documentation site here and we are going to look for using create React app. So open your terminal up and then you want to run you want to install Node.js and NPM of course I'm going to leave it to you to do that and once you have that installed you can run npx create dash react dash app and then the name of your app here. You can choose any name for your app doesn't matter but what I've done is I've run I've ran this command npx create React app and if I ls here you can see that I have a folder called nd I'm sorry the color scheme isn't that great I'm gonna do my best remember to change the color scheme of my terminal for next video so run this command and once this is your command is completed you can go and CD into that directory that was created by create dash react dash app. Just a quick note for the rest of the videos I'm in this series I'm going to be using yarn instead of NPM so if you don't have yarn you can of course just substitute yarn with NPM or you can just go ahead and install yarn. We now have a fully functioning React app if I do ls you can see the directory structure of this directory that I'm in but this is not what we are doing this series for right we're talking about nd so we have to install nd design and you can do that by running yarn at nd and let's let that run for a minute here. While this is installing nd I'm going to go to my VS code editor here I'm gonna show you a few extensions I'm gonna use and if you want you can install them and use them along with me if you don't want to you can leave them out doesn't matter I'm using bracket pair called colorizer to colorize my brackets so it looks nicer and it's more understandable and I've prettier which will automatically format my code whenever I save it so I can go to my preference here format on save you can see I have that checked so if you want to install prettier and you you want it to format your code to make it look nicer when you save your files you can click this checkbox here so the first thing I'm gonna do is go and clear out some of the stuff that I don't need in here so I'm gonna delete all of these files because I don't really need them and I'm just gonna leave app.js and index.js so right click delete and I'm gonna delete these so let's delete the logo we don't need that and then I'm gonna clear the entire header here so I'm just left with the divs and then I'm gonna go index.js clear out index.css and I'm gonna remove report web vitals so now let's go and fix that app.css here you can see I'm leaving this in because I'm gonna create app.css again and I'm gonna put something in here and it's gonna be and these style sheets so you can see in these documentations here we have this at import and then this location so I'm just gonna copy this I'm gonna paste it in here so if you don't do this step here you don't put the import into the app.css file your React app will still work by the end designs styles will not apply to your components so this is quite an important step I keep forgetting every time I create a new and the project and in my divs I'm gonna add hello world and then let's go to our terminal and let's start this app with the yarn start and we can see we have our browser here and says hello world because that's what I typed in here hello world another thing to notice here is that every time you type yarn start or npm start create react that will automatically open a new tab in your browser and there's a way to disable that I'm gonna just show you to you really quickly here so go to your package.json and go to your scripts and in the start script add this thing in front of your start script browser equals to non-space so by adding this environment variable to the start script every time I run yarn start or npm start it's not gonna automatically pop up a new browser tab for me and I can just reuse my existing browser tabs. I'm gonna show you that everything is working by making a simple button here in nd so let me go and import button from nd and then I'm gonna go into div here and I'm just gonna render that button here let's say this hi hi I am a button let's go and save that and see if it appears in our page and it's compiled and you can see that the button is there and I can change the type of the button by going to button tags add type equals to primary and then we can see it becomes a primary button now if you don't see a styled button here and you just see a regular HTML button then chances are you forgot to add that import statement in your app.css and you forgot to import your app.css into your app.js so that's just something that you have to do to make sure your styles actually go through and render on your browser page so let me comment this out and you can see what I mean then so now this is just a regular HTML button and if I uncomment this you can see that it becomes a react and design button so in the next video I'm gonna talk more about how you can use and design buttons in react