1 00:00:02,000 --> 00:00:03,000 By now, we learned a lot 2 00:00:03,000 --> 00:00:07,000 about the most essential React features you must know to 3 00:00:07,000 --> 00:00:12,000 get started building Reactive user interfaces with React. 4 00:00:12,000 --> 00:00:17,000 But the demo app, the demo website we built thus far 5 00:00:17,000 --> 00:00:20,000 of course only works in the browser. 6 00:00:22,000 --> 00:00:27,000 There It works absolutely fine, but if we add posts 7 00:00:27,000 --> 00:00:31,000 and we then reload this site, all the data is lost 8 00:00:31,000 --> 00:00:34,000 because at the moment it's only stored in memory 9 00:00:34,000 --> 00:00:38,000 whilst this React app, this JavaScript app 10 00:00:38,000 --> 00:00:41,000 in the end is running in React. 11 00:00:41,000 --> 00:00:42,000 And that's really important 12 00:00:42,000 --> 00:00:46,000 is a frontend JavaScript library. 13 00:00:46,000 --> 00:00:49,000 You use it to build a user interface. 14 00:00:49,000 --> 00:00:54,000 It powers your web user interface with JavaScript 15 00:00:54,000 --> 00:00:58,000 in the end, and it therefore executes in the browser. 16 00:00:58,000 --> 00:01:03,000 Indeed, what we're building with ReactJS in most cases 17 00:01:03,000 --> 00:01:08,000 is a so-called single page application and application 18 00:01:08,000 --> 00:01:13,000 a website where we in the end have only one single HTML file 19 00:01:13,000 --> 00:01:17,000 this index html file here, and then everything 20 00:01:17,000 --> 00:01:20,000 that happens on the screen is powered by JavaScript. 21 00:01:20,000 --> 00:01:24,000 So if we open a model here, that's not a new page 22 00:01:24,000 --> 00:01:28,000 not a new HTML file that's being downloaded or opened. 23 00:01:28,000 --> 00:01:31,000 Instead it's the existing page being edited 24 00:01:31,000 --> 00:01:36,000 by JavaScript the DOM being edited by JavaScript. 25 00:01:36,000 --> 00:01:41,000 If I view this page source here, I just see the basically 26 00:01:41,000 --> 00:01:46,000 empty HTML file, this index html file 27 00:01:46,000 --> 00:01:48,000 that was downloaded initially. 28 00:01:48,000 --> 00:01:51,000 But in this file we have this script import, which 29 00:01:51,000 --> 00:01:56,000 in the end imports our Java script, our React application 30 00:01:56,000 --> 00:02:00,000 and its stat application that then edits the DOM 31 00:02:00,000 --> 00:02:04,000 so that the actually rendered DOM has far more elements 32 00:02:04,000 --> 00:02:07,000 than the initial HTML file. 33 00:02:07,000 --> 00:02:11,000 So we use React to build this interactive front end, and 34 00:02:11,000 --> 00:02:15,000 in the end what we're building is a single page application. 35 00:02:15,000 --> 00:02:19,000 But it would of course be nice if the posts 36 00:02:19,000 --> 00:02:23,000 that we create here would not just be stored locally 37 00:02:23,000 --> 00:02:26,000 in memory so that they're lost whenever we reload this 38 00:02:26,000 --> 00:02:30,000 and so that also no other users can see them. 39 00:02:30,000 --> 00:02:33,000 But if we instead had some backend to which we 40 00:02:33,000 --> 00:02:37,000 can send requests and from which we get back responses 41 00:02:37,000 --> 00:02:41,000 where the data could then be stored in a actual database. 42 00:02:41,000 --> 00:02:45,000 So with backend, I mean a separate web application 43 00:02:45,000 --> 00:02:50,000 a web api, rest api, for example, running on some server 44 00:02:51,000 --> 00:02:54,000 so not in the browser of our users, but on some server owned 45 00:02:54,000 --> 00:02:58,000 by us, for example, and that backend api, 46 00:02:58,000 --> 00:03:02,000 that rest API could be built with any language 47 00:03:02,000 --> 00:03:06,000 or framework of your choice, not necessarily with JavaScript 48 00:03:06,000 --> 00:03:10,000 and typically not with React, since React 49 00:03:10,000 --> 00:03:15,000 is not really a backend library, I'm saying not really 50 00:03:15,000 --> 00:03:19,000 because there are frameworks like Next JS or Remix 51 00:03:19,000 --> 00:03:24,000 on which I also got courses that build up on top of React 52 00:03:24,000 --> 00:03:28,000 and allow you to blend backend code into your React app. 53 00:03:28,000 --> 00:03:32,000 But React itself is not a backend library. 54 00:03:32,000 --> 00:03:35,000 Instead, it really focuses on allowing you 55 00:03:35,000 --> 00:03:39,000 to build interactive user interfaces as you learned. 56 00:03:39,000 --> 00:03:41,000 But we still might want to be able to store data 57 00:03:41,000 --> 00:03:44,000 on some backend, in some database, for example. 58 00:03:44,000 --> 00:03:46,000 And for that we need such a backend api 59 00:03:46,000 --> 00:03:50,000 either a third party API or an API built by us 60 00:03:51,000 --> 00:03:55,000 and then that api, that backend service could interact 61 00:03:55,000 --> 00:03:57,000 with files or with databases 62 00:03:57,000 --> 00:04:01,000 or anything like that so that our frontend application 63 00:04:01,000 --> 00:04:04,000 the React app then can send HTTP requests 64 00:04:04,000 --> 00:04:08,000 to the backend so that some data gets stored there 65 00:04:08,000 --> 00:04:11,000 or so that we fetch some data from the backend which 66 00:04:11,000 --> 00:04:15,000 is then returned to the frontend through an HTTP response. 67 00:04:15,000 --> 00:04:19,000 That is something we might want for this demo app here. 68 00:04:19,000 --> 00:04:22,000 And for that reason attached you find a link 69 00:04:22,000 --> 00:04:26,000 to a dummy backend project, a dummy rest API 70 00:04:26,000 --> 00:04:29,000 in the end built with Node and Express JS. 71 00:04:29,000 --> 00:04:31,000 So no React code here 72 00:04:31,000 --> 00:04:34,000 and you don't need to know node or express to follow 73 00:04:34,000 --> 00:04:38,000 along because this backend API is already finished. 74 00:04:38,000 --> 00:04:39,000 And what I'm doing here 75 00:04:39,000 --> 00:04:42,000 in this backend API is I'm storing some data 76 00:04:42,000 --> 00:04:45,000 in a post dot JSON file. 77 00:04:45,000 --> 00:04:46,000 We could also use a database 78 00:04:46,000 --> 00:04:49,000 but that would simply require some extra setup. 79 00:04:49,000 --> 00:04:50,000 So for this demo, I'm just 80 00:04:50,000 --> 00:04:53,000 using this file we're storing some data there 81 00:04:53,000 --> 00:04:55,000 and we're fetching some data from there. 82 00:04:55,000 --> 00:04:58,000 And I provide various REST API endpoints 83 00:04:58,000 --> 00:05:03,000 that allow us to get a single post or create a new post. 84 00:05:03,000 --> 00:05:04,000 And then I got all the logic 85 00:05:04,000 --> 00:05:07,000 for doing those tasks in here in this api. 86 00:05:07,000 --> 00:05:11,000 And therefore if we start this backend server locally 87 00:05:11,000 --> 00:05:14,000 on our machine for this demo, we can add code 88 00:05:14,000 --> 00:05:17,000 to this frontend application to this React application 89 00:05:17,000 --> 00:05:20,000 for it to reach out to this backend. 90 00:05:20,000 --> 00:05:21,000 And of course, if you 91 00:05:21,000 --> 00:05:24,000 would deploy this you would have two different servers 92 00:05:24,000 --> 00:05:26,000 with two different domains. 93 00:05:26,000 --> 00:05:28,000 Here we can run both on our local machine 94 00:05:28,000 --> 00:05:32,000 and simply use different ports to simulate different servers 95 00:05:32,000 --> 00:05:33,000 and domains. 96 00:05:33,000 --> 00:05:35,000 This backend application listens 97 00:05:36,000 --> 00:05:39,000 on port 8080 and we can start it by first of all, running 98 00:05:39,000 --> 00:05:42,000 NPM install to install all dependencies that are required 99 00:05:42,000 --> 00:05:46,000 and then running NPM start to start that node server. 100 00:05:46,000 --> 00:05:49,000 And just as the front end development server 101 00:05:49,000 --> 00:05:51,000 you should keep that server up and running as long 102 00:05:51,000 --> 00:05:54,000 as you wanna be able to send requests to this backend. 103 00:05:56,000 --> 00:05:57,000 So now with that back at up and running 104 00:05:57,000 --> 00:05:59,000 we can go back to the front end 105 00:05:59,000 --> 00:06:02,000 and add some code to it that allows us 106 00:06:02,000 --> 00:06:05,000 to send requests to that back and to create new posts, 107 00:06:05,000 --> 00:06:08,000 and of course to fetch posts as well.