1 00:00:02,000 --> 00:00:05,000 Now that we're able to render a couple 2 00:00:05,000 --> 00:00:06,000 of meetups there, 3 00:00:06,000 --> 00:00:10,000 with help of our MeetupList and MeetupItem components, 4 00:00:10,000 --> 00:00:14,000 it would of course be good if those meetups would not come 5 00:00:14,000 --> 00:00:19,000 from our dummy_data source, but from an actual server. 6 00:00:19,000 --> 00:00:21,000 And they should actually end up 7 00:00:21,000 --> 00:00:24,000 on that server because we created them 8 00:00:24,000 --> 00:00:26,000 on the add new meetup page. 9 00:00:26,000 --> 00:00:28,000 After all, that's the goal 10 00:00:28,000 --> 00:00:32,000 of this demo application that on this add page, 11 00:00:32,000 --> 00:00:37,000 we have a nice little form for entering data about a meetup, 12 00:00:37,000 --> 00:00:40,000 so entering this kind of data in the end 13 00:00:40,000 --> 00:00:45,000 and then that data should be sent to some server 14 00:00:45,000 --> 00:00:49,000 to some backend where it's then also stored in a database 15 00:00:49,000 --> 00:00:54,000 so that then it can be fetched and loaded in all meetups. 16 00:00:54,000 --> 00:00:56,000 By doing that, meetups that are added here, 17 00:00:56,000 --> 00:01:00,000 could be shared with all visitors from all over the world, 18 00:01:00,000 --> 00:01:04,000 since data is stored in a database on some backend server, 19 00:01:04,000 --> 00:01:09,000 not just in our browser and the data would also be there 20 00:01:09,000 --> 00:01:12,000 if we reload the page. 21 00:01:12,000 --> 00:01:14,000 If we just store data in memory, 22 00:01:14,000 --> 00:01:17,000 any data is lost if we reload the page, 23 00:01:17,000 --> 00:01:20,000 because the JavaScript application restarts 24 00:01:20,000 --> 00:01:22,000 and the previous state is lost. 25 00:01:23,000 --> 00:01:27,000 And therefore the first step is to add this form 26 00:01:27,000 --> 00:01:29,000 to this add new meetup page. 27 00:01:29,000 --> 00:01:31,000 So that then in a second step, 28 00:01:31,000 --> 00:01:36,000 we can gather the entered data and send it to a server. 29 00:01:36,000 --> 00:01:40,000 And for this will work in this NewMeetup.js file 30 00:01:40,000 --> 00:01:43,000 which is the file that should render this meetup form. 31 00:01:45,000 --> 00:01:48,000 So in here, I'll actually also add a section 32 00:01:48,000 --> 00:01:52,000 and the h1 title of add new meetup, 33 00:01:52,000 --> 00:01:54,000 but then below that, 34 00:01:54,000 --> 00:01:56,000 I wanna output the meetup form 35 00:01:56,000 --> 00:01:59,000 which I will actually create 36 00:01:59,000 --> 00:02:01,000 and store in a separate file 37 00:02:01,000 --> 00:02:05,000 to again keep this NewMeetupPage clean. 38 00:02:06,000 --> 00:02:09,000 Now a good folder would be the meetups folder 39 00:02:09,000 --> 00:02:11,000 in the component folder. 40 00:02:11,000 --> 00:02:14,000 And therefore, in here, we can add a new file, 41 00:02:14,000 --> 00:02:19,000 the NewMeetupForm file, for example, NewMeetupForm.js. 42 00:02:21,000 --> 00:02:26,000 Now attached again, you find a styling file for this file, 43 00:02:26,000 --> 00:02:29,000 the NewMeetupForm.module.css 44 00:02:29,000 --> 00:02:31,000 which you can just download 45 00:02:31,000 --> 00:02:34,000 and add next to this JavaScript file 46 00:02:34,000 --> 00:02:38,000 so that you have some styles, which I prepared for you. 47 00:02:38,000 --> 00:02:41,000 And in the NewMeetupForm.js file, 48 00:02:41,000 --> 00:02:43,000 we now create another function, 49 00:02:43,000 --> 00:02:46,000 because we're going to create another component. 50 00:02:46,000 --> 00:02:51,000 The NewMeetupForm function and component 51 00:02:51,000 --> 00:02:55,000 which just as before is exported here 52 00:02:55,000 --> 00:02:58,000 to make it availble outside of this file. 53 00:02:59,000 --> 00:03:02,000 In the NewMeetupPage component, 54 00:03:02,000 --> 00:03:03,000 below this title, 55 00:03:03,000 --> 00:03:07,000 we can then already add that NewMeetupForm. 56 00:03:07,000 --> 00:03:11,000 Make sure you also add the appropriate import. 57 00:03:12,000 --> 00:03:17,000 Now, once you did add it back into NewMeetupForm.js file, 58 00:03:17,000 --> 00:03:21,000 we can start with outputting the JSX code for the form. 59 00:03:21,000 --> 00:03:24,000 Now I wanna actually wrap this form again 60 00:03:24,000 --> 00:03:28,000 in this card to give it to this card look 61 00:03:28,000 --> 00:03:29,000 and that's why I created 62 00:03:29,000 --> 00:03:32,000 that separate card component before. 63 00:03:32,000 --> 00:03:35,000 So that we can now reuse that component. 64 00:03:36,000 --> 00:03:39,000 So now, besides using the card component 65 00:03:39,000 --> 00:03:42,000 in the MeetupItem component, we can also use it 66 00:03:42,000 --> 00:03:46,000 in the NewMeetupForm simply by using it here 67 00:03:46,000 --> 00:03:48,000 and of course by importing it, 68 00:03:48,000 --> 00:03:51,000 you always need to import what you use 69 00:03:51,000 --> 00:03:56,000 in a file from the UI folder and the card file. 70 00:03:57,000 --> 00:04:02,000 Now card will then be wrapped around the actual HTML form 71 00:04:02,000 --> 00:04:05,000 that we'll create and then we'll well populate 72 00:04:05,000 --> 00:04:07,000 that form with various inputs. 73 00:04:08,000 --> 00:04:12,000 Now I did provide that css file for the form. 74 00:04:12,000 --> 00:04:14,000 So that's also already import classes 75 00:04:14,000 --> 00:04:19,000 from ./NewMeetupForm.module.css 76 00:04:20,000 --> 00:04:22,000 to have these scoped styles. 77 00:04:22,000 --> 00:04:26,000 And we can start assigning classes on that form element 78 00:04:26,000 --> 00:04:30,000 where you should assign the form class like this. 79 00:04:32,000 --> 00:04:34,000 Now inside of this form, 80 00:04:34,000 --> 00:04:36,000 you can of course structure this however you want, 81 00:04:36,000 --> 00:04:40,000 but to fit the styles which I provided to you, 82 00:04:40,000 --> 00:04:45,000 I'll add a div with a class of classes control. 83 00:04:45,000 --> 00:04:49,000 And in that div I wanna have a label where we say, 84 00:04:49,000 --> 00:04:51,000 Meetup Title, for example, 85 00:04:51,000 --> 00:04:53,000 for the first input we're going to add. 86 00:04:54,000 --> 00:04:58,000 Now that input is added here and is of type text. 87 00:04:58,000 --> 00:05:00,000 It should be required, 88 00:05:00,000 --> 00:05:03,000 so that we have that in-browser validation. 89 00:05:04,000 --> 00:05:09,000 And I will give it an ID of title and then self close it 90 00:05:10,000 --> 00:05:12,000 and now connect this label 91 00:05:12,000 --> 00:05:15,000 to this input by adding the for attribute, 92 00:05:15,000 --> 00:05:20,000 but just as class, for is a keyword in JavaScript 93 00:05:20,000 --> 00:05:23,000 and therefore the actual property name 94 00:05:23,000 --> 00:05:26,000 for setting this, for value or 95 00:05:26,000 --> 00:05:31,000 for setting this attribute here is htmlFor. 96 00:05:31,000 --> 00:05:34,000 So I add htmlFor as a prop 97 00:05:34,000 --> 00:05:38,000 and that's another exception besides classname 98 00:05:38,000 --> 00:05:42,000 where you use a attribute name that deviates 99 00:05:42,000 --> 00:05:45,000 from the regular HTML attribute name. 100 00:05:45,000 --> 00:05:48,000 It's basically the only other important exception, 101 00:05:48,000 --> 00:05:51,000 besides classname, which you have to memorize. 102 00:05:51,000 --> 00:05:54,000 And then we point at title here. 103 00:05:54,000 --> 00:05:56,000 And this simply connects this label 104 00:05:56,000 --> 00:05:59,000 to this title for screen readers 105 00:05:59,000 --> 00:06:01,000 and other assistive technologies. 106 00:06:02,000 --> 00:06:05,000 Now we have this input with this label here 107 00:06:05,000 --> 00:06:09,000 and we can now repeat this entire control div, 108 00:06:09,000 --> 00:06:14,000 multiple times to also render a label 109 00:06:14,000 --> 00:06:18,000 for the meetup image and maybe use an id 110 00:06:18,000 --> 00:06:23,000 of image here and change this to type url. 111 00:06:23,000 --> 00:06:28,000 Since the image set here should actually be a url pointing 112 00:06:28,000 --> 00:06:29,000 at an image. 113 00:06:29,000 --> 00:06:33,000 If you're interested in uploading files with react, 114 00:06:33,000 --> 00:06:37,000 that is not really that much of a react task, 115 00:06:37,000 --> 00:06:39,000 but mostly a backend server task. 116 00:06:39,000 --> 00:06:41,000 And hence I discuss file uploads 117 00:06:41,000 --> 00:06:44,000 in my node JS course, for example, 118 00:06:44,000 --> 00:06:48,000 but to learn how to make file uploads work with react, 119 00:06:48,000 --> 00:06:51,000 I also have a resource attached, a tutorial 120 00:06:51,000 --> 00:06:53,000 which you can take a closer look at 121 00:06:53,000 --> 00:06:57,000 to learn how to upload files with react. 122 00:06:57,000 --> 00:06:59,000 Here we'll not upload files. 123 00:06:59,000 --> 00:07:04,000 We'll just insert the URL of a existing image 124 00:07:04,000 --> 00:07:06,000 which already exists on some server. 125 00:07:08,000 --> 00:07:13,000 Then we can, let's replicate this div again 126 00:07:13,000 --> 00:07:17,000 for our address here, let's say 127 00:07:17,000 --> 00:07:20,000 and the id could be address. 128 00:07:20,000 --> 00:07:23,000 And here we'll again, just have some plain text 129 00:07:23,000 --> 00:07:27,000 as an input type and there after, 130 00:07:27,000 --> 00:07:30,000 I wanna have one more control 131 00:07:31,000 --> 00:07:34,000 which is the actual description of the meetup. 132 00:07:34,000 --> 00:07:38,000 And hence we could use description as an id, 133 00:07:38,000 --> 00:07:41,000 but here I'll actually not render an input, 134 00:07:41,000 --> 00:07:44,000 but instead a text area, 135 00:07:44,000 --> 00:07:46,000 which is another default HTML element. 136 00:07:47,000 --> 00:07:51,000 It'll still get that id description here. 137 00:07:52,000 --> 00:07:56,000 And it will also still get the required attribute 138 00:07:56,000 --> 00:08:00,000 for adding this in-browser validation. 139 00:08:00,000 --> 00:08:02,000 And I'll set rows to five. 140 00:08:02,000 --> 00:08:04,000 That's another default attribute, 141 00:08:04,000 --> 00:08:06,000 which we can add to text areas. 142 00:08:08,000 --> 00:08:10,000 Now last but not least, below that, 143 00:08:10,000 --> 00:08:14,000 I'll add another div with a class name of classes, actions. 144 00:08:14,000 --> 00:08:18,000 And in there I wanna have the button that submits the form. 145 00:08:18,000 --> 00:08:21,000 So here we can add a button where we say Add Meetup. 146 00:08:21,000 --> 00:08:24,000 And that button will then submit that form. 147 00:08:24,000 --> 00:08:27,000 That's how HTML in the browser works. 148 00:08:27,000 --> 00:08:29,000 If you have a button in a form, 149 00:08:29,000 --> 00:08:32,000 a button which is not of type button. 150 00:08:32,000 --> 00:08:34,000 So if you have a regular button like this, 151 00:08:34,000 --> 00:08:38,000 then such a button will submit that form. 152 00:08:38,000 --> 00:08:41,000 And we can later listen to that submit event. 153 00:08:42,000 --> 00:08:45,000 And this should be actions as a class here. 154 00:08:46,000 --> 00:08:48,000 And with that, if you save that file, 155 00:08:48,000 --> 00:08:52,000 you should see this form on the screen. 156 00:08:52,000 --> 00:08:55,000 Now the form doesn't work yet, but it's there.