WEBVTT 00:01.330 --> 00:06.310 Okay, We are in the terminal now and we have everything installed. 00:06.310 --> 00:10.360 So we are ready to create our first React application. 00:10.360 --> 00:15.280 And I have to say there is not just one way to create a React application. 00:15.280 --> 00:21.610 Basically, you can hook up a react library to your existing websites, just downloading the source 00:21.610 --> 00:26.260 code from example from CDN, and then you can start using React. 00:26.290 --> 00:33.340 What I will show you now is I will show you a command line interface for creating brand new React application 00:33.340 --> 00:35.080 and we'll be using terminal for this. 00:35.080 --> 00:40.960 And that's very handy because we can type one command and everything will be set up for us automatically. 00:41.080 --> 00:48.880 So what I will do is I will go to my desktop here and here I can create a new React app. 00:49.090 --> 00:53.710 To do that, I need to type in NP like that. 00:53.710 --> 00:58.390 So basically NP, it's a command available from NPM. 00:58.390 --> 01:10.310 So since version I think version five you can use NPM and then you can type create React app like that. 01:10.310 --> 01:18.980 So Npx create React app and then after the space you need to name your application. 01:18.980 --> 01:23.870 So let's do first Dash app like that. 01:23.900 --> 01:30.500 We can name it whatever we like, but for this tutorial I will just make it first application like that 01:30.500 --> 01:32.300 and then I click enter. 01:32.300 --> 01:40.670 And what is happening now is NPM will download all the requirements like react, react, Dom and React 01:40.670 --> 01:41.120 scripts. 01:41.120 --> 01:48.200 That's a libraries that are available or the frameworks modules that are available for us and it will 01:48.200 --> 01:54.020 be downloaded automatically from the server and it will create a new application. 01:54.020 --> 01:57.890 So you can see here the progress in a second. 01:57.920 --> 01:59.540 It will be all ready. 02:01.660 --> 02:05.850 And you can see here, everything is ready for us. 02:05.860 --> 02:14.380 So what's happening here is we have installed and create our first application with React. 02:14.380 --> 02:19.480 And you can see here success created first app inside our desktop. 02:19.660 --> 02:26.800 So here the blue one is the commands You can run and you can see all of the commands start with NPM. 02:26.830 --> 02:33.820 So NPM start if you will have yarn, it will be yarn, start, yarn, run, build and so on and so on. 02:33.820 --> 02:43.870 So basically what this is, is that options to run some commands and this will do something for us. 02:43.870 --> 02:48.880 So NPM start will start start a development server and this is what we are after. 02:48.880 --> 02:52.060 We want to have a server running locally. 02:52.060 --> 02:59.260 So we'll build our application and we'll open that in the Chrome or whatever the browser of our choice 02:59.260 --> 03:08.150 is and we will run this application and we will be able to write a code and see the output in the browser 03:08.150 --> 03:11.060 and NPM will help us doing that. 03:11.060 --> 03:13.400 And I will show you in a second how does it work? 03:13.400 --> 03:18.050 Npx Run build will actually build a file for production. 03:18.050 --> 03:21.290 You can see here for production, for for production. 03:21.290 --> 03:27.890 That means for the live server because if you will do NPM start, it will kind of build a development 03:27.890 --> 03:28.700 server. 03:28.820 --> 03:32.090 So it's not going to prepare all the files for us. 03:32.090 --> 03:40.610 Run, build will create take our our code compiled into ready minified version and that's NPM run build. 03:40.790 --> 03:44.630 We can also do NPM test which is testing our application. 03:44.630 --> 03:50.420 If you will write unit test on end to end test with this command, you can run it, but we are not going 03:50.420 --> 03:56.840 to focus on the testing in this tutorial so you can do your research on your own if you would like to 03:56.840 --> 04:01.370 have your application testable and then you can also do a run eject. 04:01.400 --> 04:06.410 So remove this tool and copy this build dependencies, configuration files and scripts into the app 04:06.410 --> 04:07.280 directory. 04:07.340 --> 04:10.010 So if you do that, you can't really revert it. 04:10.010 --> 04:11.360 We are not going to do this. 04:11.360 --> 04:16.820 So I will show you how to do a normal development and then build later on. 04:16.820 --> 04:25.580 So what you need to do now is you can do CD and then name of the folder, which is you can see first 04:25.580 --> 04:25.790 app. 04:25.790 --> 04:29.360 This is the name of the our application and also it's the name of the folder. 04:29.360 --> 04:31.820 So let's go inside our folder. 04:32.030 --> 04:38.270 We are inside this folder now and then we can do NPM start, npm start. 04:42.980 --> 04:44.700 What is happening here? 04:44.720 --> 04:46.820 I put npm start here. 04:46.820 --> 04:52.130 You can see starting development server and automatically our default browser. 04:52.130 --> 04:55.790 For me it's Chrome is starting react application. 04:55.790 --> 05:02.450 So you can see here new tab has been opened localhost which is our local development server on port 05:02.480 --> 05:03.560 3000. 05:03.590 --> 05:05.570 That's a react application. 05:05.570 --> 05:12.950 And you can see here we have some React logo and some output and link to learn, react. 05:12.950 --> 05:20.110 And if I go back to the terminal here, you can see that our server is running and you can see here 05:20.180 --> 05:26.810 local or link to on your network if you would like to access from another computer. 05:26.810 --> 05:34.490 This this React application, you can use this IP to access it if you are on the same network. 05:35.120 --> 05:36.980 So that's pretty much it. 05:36.980 --> 05:38.630 Our application is running. 05:38.630 --> 05:44.970 We had one command and then we run server which is NPM start and application is running. 05:44.970 --> 05:50.190 So let's go to the Visual Studio code and we can open that folder now. 05:52.820 --> 05:54.320 First up, open. 05:55.960 --> 05:59.680 And we have our application here open. 05:59.680 --> 06:06.550 And in the next video I will show you and we will walk through all the files that are included in this 06:06.550 --> 06:07.450 folder.