1 00:00:02,380 --> 00:00:03,300 So what is 2 00:00:03,310 --> 00:00:04,660 React Native? 3 00:00:04,660 --> 00:00:06,520 Let's start with the React part, 4 00:00:06,520 --> 00:00:07,860 also known as 5 00:00:07,900 --> 00:00:08,190 React.js 6 00:00:08,200 --> 00:00:13,260 which is the name of that library and I do expect that you know what React.js is. 7 00:00:13,360 --> 00:00:15,570 You don't have to be an expert in React.js 8 00:00:15,580 --> 00:00:18,290 but you should know what React.js is. 9 00:00:18,310 --> 00:00:22,450 Nonetheless, let's briefly summarize what it is so that we're on the same page. 10 00:00:22,480 --> 00:00:25,910 It's a Javascript library for building user interfaces, 11 00:00:25,930 --> 00:00:27,400 that's the official definition, 12 00:00:27,400 --> 00:00:35,560 that is what React does in the end. It runs on Javascript and it's good at building user interfaces. 13 00:00:35,560 --> 00:00:41,420 Typically, we use React in web development for building web apps but it's important to understand that 14 00:00:41,430 --> 00:00:42,880 React itself, 15 00:00:42,880 --> 00:00:49,360 the library actually makes no assumption about what we're building with it because it's actually another 16 00:00:49,360 --> 00:00:54,970 library which you'll also use when you're building web apps with React that is responsible for rendering 17 00:00:54,970 --> 00:00:56,260 something onto the screen 18 00:00:56,260 --> 00:00:58,470 and that's the React DOM library. 19 00:00:58,570 --> 00:01:04,660 Now in every React for web project you're working on, you will call ReactDOM.render at some point of 20 00:01:04,660 --> 00:01:11,070 time and hand off the React app to that method to actually render something onto the screen 21 00:01:11,170 --> 00:01:18,310 and that's the library that knows about the web and knows how to render HTML elements and so on. React 22 00:01:18,310 --> 00:01:21,130 itself is platform-agnostic, 23 00:01:21,220 --> 00:01:27,850 it's just a library that's good at building trees of components, of finding out whether something changed, 24 00:01:28,120 --> 00:01:33,010 if something needs to be re-rendered, of managing state, of passing data around 25 00:01:33,100 --> 00:01:38,890 but it does so in an abstract way which is why you can use React on any platform. 26 00:01:38,890 --> 00:01:42,490 You're not restricted to the browser, to HTML, to the web, 27 00:01:42,610 --> 00:01:50,020 you can use the logic React gives you anywhere, it's the React DOM part that then knows how to work with 28 00:01:50,100 --> 00:01:55,420 HTML and so on and that is super important to understand because that's important when we think 29 00:01:55,420 --> 00:02:02,890 about React Native. React Native is a separate library which in the end is a collection of special React 30 00:02:02,890 --> 00:02:08,530 components it gives you, so a collection of components you can use in your React app and these components 31 00:02:08,560 --> 00:02:15,370 are special because React Native actually knows how to translate them, how to compile these components 32 00:02:15,610 --> 00:02:23,410 to native widgets for iOS and for Android. So React Native kind of is like React DOM, it knows how to 33 00:02:23,410 --> 00:02:30,490 talk to native platform, to Android and iOS and how to render native widgets and it gives you a bunch of 34 00:02:30,490 --> 00:02:36,820 these widgets as React components so that you can build a user interface with these compilable components 35 00:02:36,820 --> 00:02:43,690 so to say because you won't be able to use your regular divs and h1 and paragraph tags in React Native 36 00:02:43,690 --> 00:02:49,620 apps because there are no direct equivalents for that in native code but I'll come back to that. Now 37 00:02:49,630 --> 00:02:55,330 besides giving you these components, React Native is a bit more than that, it also gives you access to 38 00:02:55,330 --> 00:02:59,740 some native platform APIs, for example it helps you use the device camera, 39 00:02:59,800 --> 00:03:05,680 so things like that, common tasks you would want to do in native apps and in general, React Native gives 40 00:03:05,680 --> 00:03:11,560 you tools to connect Javascript code to native platform code because you typically build a React Native 41 00:03:11,560 --> 00:03:17,890 app by mostly writing Javascript code or depending on the app you're building, by entirely writing Javascript 42 00:03:17,890 --> 00:03:18,490 code. 43 00:03:18,520 --> 00:03:25,600 Now I say mostly, at least that's a possibility because you can also write native code for iOS or Android 44 00:03:25,840 --> 00:03:30,670 and React Native gives you the tools to connect your Javascript code to that native code, though that's 45 00:03:30,670 --> 00:03:36,310 a bit more advanced and in many apps, you will never need that and therefore, React Native gives you full 46 00:03:36,310 --> 00:03:42,460 flexibility, it gives you a way of connecting Javascript to native code and it also gives you a lot of 47 00:03:42,460 --> 00:03:48,090 pre-built native features which are conveniently usable from inside your Javascript code. 48 00:03:48,280 --> 00:03:54,550 So if you then combine React Native and the features that gives you with React.js which knows how to 49 00:03:54,910 --> 00:04:00,700 update a user interface and how to control a user interface, then you get everything you need to 50 00:04:00,700 --> 00:04:06,730 compile a real native mobile app and that's also what React Native gives you, it gives you everything 51 00:04:06,730 --> 00:04:12,780 you need to then take your Javascript code and compile that to a real native mobile app which you can 52 00:04:12,780 --> 00:04:16,760 then ship to the App Store for iOS or to the Google Play Store for Android, 53 00:04:16,870 --> 00:04:19,840 so you get a real native mobile app as a result in the end.