If I remove the styles from this app and I reload it that will give you a better idea of what we going to be accomplishing in this guide which is just adding in this input here and this date picker field option here. So let's go ahead and get started. So in our code create a new file in components and call it birthdayForm.js.

Here if you remember we need to import React, { Component } form 'react'; and this will give us access to the react library. So now we can type out our component. So that's going to be class BirthdayForm extends Component and in here we need our render function and we are actually going to need a constructor as well for this component. So go ahead and type constructor(props) and super(props) and we finally need to export the components so export default Birthdayform;. You could also type in the export default up here like I'll show you right now and that works just as just as well you don't need that anymore but it's better just to put that down here it makes it more readable. So now we just need to return something here.

Save that and go back to your app localhost 3000 or whatever port you're running it on and you'll notice nothing changes and that's because we haven't included this component anywhere. So back in our app.js, we are just going to import BirthdayForm from 'birthdayForm';. Now we have access to this component and we can use it in our app.js. So let's go ahead and in here and let's type in <BirthdayForm /> and we'll see if it's working. All right so it looks like it says it's failed to compile. Let's find out why. All right so we need to add a dot and a backslash here and that should fix that.

We load the page and you'll see our content is rendering on the screen nicely. And let's get rid of this whole at it since we don't need that. So that sets up our component. Now we need to somehow get the date object in there not the date object but the date picker and the calendar style so the way we can do that is by using a dependency. So if you go into your terminal or we could just manually open up the package.json and you can just add these in here and only these in the guide notes below. But we wanted to manually enter these we could type

 "react-calendar": "^2.13.5",
 "react-datepicker": "^1.0.3",

and then all we need to do is rerun npm install. And the reason I didn't install these directly through the terminal is that I wanted you to have a better idea of what even is happening when we install them through the terminal and basically it's fetching this from the Internet and putting this into our package.json file and then we can install it with NPM installer or NPM I and it looks like this requires react datepicker requires appear dependency of moment.

So we install it through the terminal and the way you can get a better idea of how to find these things in the first place instead of just telling you is by me showing you how to use Google effectively to find these answers so if you type in moment.js we will see that they have a Web site and it's also available on NPM so we can go to NPM and see the details. And this is much like the Dev Camp js builder that was on here when I showed you how to install that. So if I type in js devcamp builder you'll see Jordan Hodgens and here is his package. So basically NPM same idea but different stuff. So let's go ahead and see how we can install this using NPM so it looks like it says all we need to do is npm i moment. Let's go ahead and save that to our package.json as well by typing in npm i --save moment. Hit enter and that should install it and put it in here into our package.json. So it's installing it should pop into here. All right. So popped it right there and that's the same exact thing as what we just did here. We just included it into our pacakge.json. The only difference is we had to run npm install after we entered in these two things so that they would actually install by typing in npm i --save moment.
We were able to save it to our package.json and install it at the same time and that's the same exact thing as typing it in here and then typing in npm install. All right. So with those installed, we can go ahead and use them. So in our birthdayForm.js, we need to import DatePicker from 'react-datepicker'; and the way we can include the styles is by pacing the length and the guide notes below into your index HTML. So if I go to my index.html and I paste that in we will get access to the react date picker styles.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/1.0.3/react-datepicker.css">

So that implemented installed we can go ahead and reload our web page and at first, we need to actually use it in here so let's get rid of this or let's actually cut this command x less and then in parentheses let's put it div in here and let's paste this back in and let's use date picker like this.

Now save that reload the page and we'll see if it's there. All right so there you click on it. We have our styles we have our date picker and that sets up our date picker. So the next guide we are going to learn how to set up state in the birthday form component and we will use it to map over certain pieces of state to our date picker. So this will actually display something when we click a date. All right I'll see you guys in the next guide.