1 00:00:02,000 --> 00:00:03,000 So we need a project set up 2 00:00:03,000 --> 00:00:05,000 that supports these requirements. 3 00:00:05,000 --> 00:00:08,000 And a popular tool for creating such projects 4 00:00:08,000 --> 00:00:10,000 that comes with all these features 5 00:00:10,000 --> 00:00:13,000 and tools that we need built in 6 00:00:13,000 --> 00:00:15,000 is Create React App. 7 00:00:15,000 --> 00:00:17,000 This is a tool which you can use to, 8 00:00:17,000 --> 00:00:19,000 well, as the name suggest, 9 00:00:19,000 --> 00:00:20,000 create React apps 10 00:00:20,000 --> 00:00:22,000 that give you this auto reloading 11 00:00:22,000 --> 00:00:27,000 and that supports this HTML with JavaScript Syntax. 12 00:00:28,000 --> 00:00:32,000 An alternative tool which you could use is Vite, 13 00:00:32,000 --> 00:00:37,000 which can also be used to create new React projects. 14 00:00:37,000 --> 00:00:39,000 And you can simply follow the instructions 15 00:00:39,000 --> 00:00:43,000 shared on these websites of Create React App or Vite 16 00:00:43,000 --> 00:00:47,000 to create valid new React projects. 17 00:00:47,000 --> 00:00:49,000 Now, for both tools, 18 00:00:49,000 --> 00:00:52,000 and also to successfully then run the projects 19 00:00:52,000 --> 00:00:54,000 created by those tools 20 00:00:54,000 --> 00:00:58,000 you must have Node.js installed on your system. 21 00:00:58,000 --> 00:01:01,000 Now, you don't need to be able to write Node.js code. 22 00:01:01,000 --> 00:01:04,000 You don't need to know Node.js, 23 00:01:04,000 --> 00:01:07,000 but Node.js is used under the hood 24 00:01:07,000 --> 00:01:09,000 by those tools that create the projects 25 00:01:09,000 --> 00:01:11,000 and then also by the projects 26 00:01:11,000 --> 00:01:14,000 and their built in-tools as well. 27 00:01:14,000 --> 00:01:17,000 So make sure you have Node.js installed on your system. 28 00:01:17,000 --> 00:01:21,000 You can typically download the latest version of Node.js 29 00:01:21,000 --> 00:01:24,000 or use the latest LTS version, 30 00:01:24,000 --> 00:01:27,000 the latest long-term stability version. 31 00:01:27,000 --> 00:01:29,000 And once you got it installed 32 00:01:29,000 --> 00:01:31,000 you can create those new projects 33 00:01:31,000 --> 00:01:33,000 with "npx create-react-app" 34 00:01:33,000 --> 00:01:35,000 to use that tool. 35 00:01:35,000 --> 00:01:38,000 Or by running "npm create vite" 36 00:01:38,000 --> 00:01:39,000 to use that Vite tool. 37 00:01:39,000 --> 00:01:40,000 And I'll do that, 38 00:01:40,000 --> 00:01:42,000 but you can use either of the two approaches. 39 00:01:43,000 --> 00:01:45,000 Now, once you run these commands, 40 00:01:45,000 --> 00:01:48,000 you are typically asked to choose a project name. 41 00:01:49,000 --> 00:01:51,000 And here I'll just name it "react-crash-course", 42 00:01:51,000 --> 00:01:53,000 but the name is up to you. 43 00:01:53,000 --> 00:01:55,000 And then in Vite's case, 44 00:01:55,000 --> 00:01:56,000 pick a template, 45 00:01:56,000 --> 00:01:58,000 where I'll pick "React". 46 00:01:58,000 --> 00:02:00,000 And then JavaScript. 47 00:02:00,000 --> 00:02:03,000 And this now creates a new project. 48 00:02:03,000 --> 00:02:04,000 Now, once that was done, 49 00:02:04,000 --> 00:02:07,000 you can open that newly created project 50 00:02:07,000 --> 00:02:08,000 with an editor of your choice. 51 00:02:08,000 --> 00:02:11,000 In my case, I'm using Visual Studio Code. 52 00:02:11,000 --> 00:02:14,000 And you can start working on that code there. 53 00:02:14,000 --> 00:02:18,000 Now, if you use Vite, you also must open the terminal first 54 00:02:18,000 --> 00:02:20,000 and navigate into this folder. 55 00:02:20,000 --> 00:02:22,000 And for that here I'm using the built-in terminal 56 00:02:22,000 --> 00:02:25,000 in VS code, which is already navigated 57 00:02:25,000 --> 00:02:27,000 into that folder by default 58 00:02:27,000 --> 00:02:28,000 And run "npm install" 59 00:02:28,000 --> 00:02:31,000 to install any extra third party packages 60 00:02:31,000 --> 00:02:34,000 that are needed to build and run and preview 61 00:02:34,000 --> 00:02:37,000 your React application. 62 00:02:37,000 --> 00:02:39,000 Once that's done, you can run "npm start" 63 00:02:39,000 --> 00:02:43,000 when using a project created with Create React App. 64 00:02:43,000 --> 00:02:45,000 And "npm run dev" when using Vite, 65 00:02:45,000 --> 00:02:47,000 which I do here. 66 00:02:47,000 --> 00:02:50,000 And then you can visit the website on this address, 67 00:02:50,000 --> 00:02:52,000 which should be output in the terminal 68 00:02:52,000 --> 00:02:55,000 to preview your React app. 69 00:02:55,000 --> 00:02:57,000 And the exact output on this screen here 70 00:02:57,000 --> 00:02:59,000 might change over time, 71 00:02:59,000 --> 00:03:02,000 but you now have a basic React project 72 00:03:02,000 --> 00:03:05,000 which we'll now use to learn React. 73 00:03:05,000 --> 00:03:05,000 As a side note, 74 00:03:05,000 --> 00:03:09,000 attached you also find a link to a project snapshot, 75 00:03:09,000 --> 00:03:10,000 which I prepared, 76 00:03:10,000 --> 00:03:13,000 which was created with help of Vite, 77 00:03:13,000 --> 00:03:15,000 and which I also cleaned up a little bit 78 00:03:15,000 --> 00:03:19,000 so that we can all start with the same starting state. 79 00:03:19,000 --> 00:03:22,000 So feel free to also look into this starting snapshot 80 00:03:22,000 --> 00:03:25,000 and use that starting snapshot to follow along.