WEBVTT 00:00.740 --> 00:01.310 Okay. 00:01.310 --> 00:06.550 Let's talk a little bit more about the things we can do in React Native. 00:06.560 --> 00:13.700 And basically in this video we'll be talking about the components views and also we'll be talking about 00:13.700 --> 00:15.440 the props and states. 00:15.440 --> 00:20.900 So everything as we have in React is also available in React Native. 00:20.930 --> 00:23.120 So there is not a new here. 00:23.180 --> 00:26.960 The way we've done it in React is pretty much the same. 00:26.960 --> 00:32.990 But I would like to show you how we can actually reuse the same kind of logic here in React Native. 00:33.020 --> 00:41.810 So what we can do here is at the moment we have only one application and if you go to the folder here, 00:41.810 --> 00:48.860 actually there is no folders structure like we had in React so we can create it on our own. 00:48.860 --> 00:55.640 And if you would like to follow the same kind of strategy as we have in React, you can go ahead. 00:55.640 --> 00:59.570 But this this will be more like a explanation video. 00:59.570 --> 01:03.960 So I don't really care about the the placement of this thing. 01:03.960 --> 01:07.500 So what I could do is I could create a new folder. 01:07.500 --> 01:09.540 I can call it component. 01:12.050 --> 01:12.980 Components. 01:13.460 --> 01:19.100 And then inside I will create a new component and let's say I will call it home. 01:20.090 --> 01:21.110 JS. 01:22.280 --> 01:24.920 So that's going to be my home JS component. 01:24.920 --> 01:32.600 So what we can have actually what I could do is I could copy whatever I have here and I can copy paste 01:32.600 --> 01:33.470 that here. 01:33.470 --> 01:42.830 So this will be our home component here and then we can, we can have whatever we had here before. 01:42.830 --> 01:48.140 So basically I duplicate App.js App.js here and I paste it into home. 01:48.140 --> 01:52.130 JS So this App.js I could removed most of it. 01:55.310 --> 02:00.790 I will give it a little bit more space here and then I will also remove this. 02:00.800 --> 02:10.850 So what I can do here is I could actually use a home component here so it is automatically imported 02:11.000 --> 02:11.900 for me. 02:11.900 --> 02:20.360 So instead of having that app.js as I had it before, now I have the app.js here and inside I just render 02:20.360 --> 02:22.880 a simple component, which is my home. 02:22.880 --> 02:27.710 So I have a component here and that's basically the same as I had it before. 02:28.250 --> 02:36.440 And then we have this is a kind of placeholder, so I don't need to pollute this main app.js here. 02:36.440 --> 02:40.880 So whatever I will have in my application, I can have it in a separate component. 02:40.880 --> 02:48.350 But that will give us already an opportunity to test some kind of a functionality we can use in React 02:48.620 --> 02:49.400 Native. 02:49.400 --> 02:56.880 So in the same way as we use it with React, we can actually pass some props into our component. 02:56.880 --> 03:06.840 So I can say, let's say message, I can say hello from. 03:08.200 --> 03:13.570 Up so I can pass that as a prop here. 03:15.120 --> 03:18.930 And then we can actually use it in our component here. 03:18.930 --> 03:27.990 So what I can do is I can accept props here and then that props, I can display that here. 03:27.990 --> 03:34.680 So I will do curly braces, props and message as I had it before. 03:34.680 --> 03:36.510 So I will save it now. 03:38.430 --> 03:41.360 And hello from App is here. 03:41.370 --> 03:47.880 So basically what I have here, I have some information here and I pass it to my component and inside 03:47.880 --> 03:49.950 the component I can access that here. 03:49.950 --> 03:54.210 So basically that's not a new we've done that before with React. 03:54.210 --> 04:00.690 So this is more like a reminder of what's possible in the same way as we had it there, we could use 04:00.690 --> 04:04.020 some kind of state so we can have. 04:06.580 --> 04:09.250 We can have here are constant. 04:09.250 --> 04:12.730 And let's say I will have name. 04:14.180 --> 04:19.780 Set name, for example, and then we'll do use state here. 04:19.790 --> 04:23.510 So that's a react hooks. 04:23.510 --> 04:26.270 I will need to also import it here. 04:26.720 --> 04:32.180 So use state from react and then we can provide a default value here. 04:32.180 --> 04:37.070 So let's say my name will be Krystian like this. 04:37.070 --> 04:41.870 So we have our state here because this is functional components. 04:41.870 --> 04:46.430 The way to do it with the class will be different, but it doesn't really matter. 04:46.430 --> 04:48.770 We can use hooks in our React native. 04:48.800 --> 04:57.920 So for example name I could duplicate this and then I can use name here. 04:57.920 --> 04:59.330 So if I will save it. 05:02.180 --> 05:04.190 I can see this is printed. 05:04.190 --> 05:06.800 So this is printed basically from the state. 05:06.800 --> 05:13.400 And I could also have some, some kind of logic to change the name and it will be displayed there. 05:13.400 --> 05:23.060 So this is a very simple example of having the different components and sometimes components are called 05:23.060 --> 05:25.460 views in the React Native. 05:25.460 --> 05:29.270 And the reason for that is that view container here. 05:29.270 --> 05:33.410 So the view basically it's like a div in our HTML. 05:33.620 --> 05:41.240 So in React Native we will have a views and we can have views inside our views so we can think about 05:41.270 --> 05:48.860 views as a container or as a component or like just a simple div. 05:48.890 --> 05:56.000 And that will contains some content inside and we can have a different styling for different components. 05:56.000 --> 06:05.220 So at the moment we have only one application here which one component loaded in here. 06:05.220 --> 06:11.160 So as you can see here, this is very much the same as we've done it with React. 06:11.160 --> 06:13.140 So there is not a new here.