Made withReactClip

React Native Tutorial #1 - Introduction

N

Net Ninja

Creator on the React channel

Watch on YouTube ↗

878K viewsNov 25, 20198:27 runtime

Learn the fundamentals of React Native and build your first cross-platform mobile app for Android and iOS. This introductory tutorial explains how React Native leverages your existing React knowledge, including concepts like functional components, state, and props, to create…

Chapters

#react#clip#frontend

What is React Native?

React Native is a library that allows you to use React to create native mobile apps for both Android and iOS devices. It's an excellent choice for web developers already familiar with React.

Prerequisites

Important
This tutorial series assumes you have prior knowledge of React and JavaScript. It is not for absolute beginners to programming or web development.

React Fundamentals: A solid understanding of core principles like functional components, state, and props is required.
React Hooks: You should be familiar with React Hooks, especially the useState hook.
Modern JavaScript: You need a good grasp of JavaScript fundamentals, including objects, arrays, and arrow functions.

Core Concepts

Component Tree: You build your app's UI by creating a tree of nested components, starting from a root App component.
Props: Data and functions are passed between components as props, enabling them to communicate.
Native Compilation: React Native takes your JavaScript components and compiles them into native UI widgets that run on the target platform (Android/iOS).
Core Components: React Native provides a set of basic, unopinionated components like <View> and <Text> that you can use to build your own custom components (e.g., buttons, cards).

Development Setup

Node.js: Required to use the Node Package Manager (npm) for installing dependencies.
Android Studio: Used to run a virtual Android device (emulator) for testing the app.

Tip
You can also test on a physical Android or iOS device instead of using an emulator.

Text Editor: The instructor uses VS Code, a free, cross-platform editor.
VS Code Extension: The ES7+ React/Redux/React-Native snippets extension is recommended for helpful code snippets.

Course Project & Files

Project: The series will guide you through building a game review app called "Game Zone". It will feature a home screen with a list of reviews, a review details screen, a form to add new reviews, and a navigation drawer.
Source Code: All course files are available on a GitHub repository. Each lesson corresponds to a specific branch.

Note
If you clone the repository, you must run npm install in the project directory to install all dependencies before the code will work.

Introduction & Prerequisites

Hey gang and welcome to the very first lesson of the best React Native tutorial on the internet.

So, a lot of people have been asking me, probably now for the last three to six months I think, to do a React Native series on YouTube. So here I am, giving the people what they want, hopefully.

So what is React Native? Well, in a nutshell, React Native allows us to use the React library to create native mobile apps for Android and iOS devices. So it's a really good option for a developer that wants to create some kind of mobile app, who are already comfortable with React. Now, in fact, I would definitely, definitely recommend that you already understand the core principles of React before you start this playlist, things like functional components, state, props, and all that jazz. Because we are going to use all of that in this course, and I'm not going to be explaining everything from the ground up. I would expect you to know all of those basics of React before you start this playlist. Now, I do have a complete React for beginners series on this channel that I'm going to leave a link to down below, so feel free to check that out first of all, and when you're comfortable with React, come back to this one.

Okay, now I'd also recommend knowing a little bit about React Hooks as well, specifically the useState hook because we are going to be using that quite a lot in this series too. Now again, I've got a complete hooks and context playlist right here on this channel, so that link is going to be down below as well.

And finally, since React Native uses JavaScript, I would definitely expect you to have a basic to good grasp of the language fundamentals, things like objects, arrays, arrow functions, callbacks, yada yada yada, all that kind of stuff. And if you don't have an inkling of what JavaScript is, this is probably not the best place to start. I do have a free modern JavaScript course here on YouTube and also a more in-depth one on Udemy as well, so I'll leave both of those links down below.

Anyway, now that's out the way, let's take a little look at how React Native kind of works.

Core Concepts: The Component Tree

So it actually works very similar to how React for web works, in that we create apps by building up a tree of components like this. And then we can pass data or functions between those components in the form of props, so that they can then communicate with each other or show data to the screen.

Now an example of this is a very simple component tree like this. We have a root component at the top, App. Then nested inside that, we have a Header component over here. We also have a Content component nested inside that. And down below that, we have two Text components which each receive some data or props from the Content component right here.

Now React Native provides us with a bunch of components out of the box that we can use to make our own layouts like this. And those components are things like a Text component or a View component, etc. and we're going to see all those later on. And then when we build or test our React Native app, React Native takes these components and it compiles them into native code and widgets that work on Android and iOS so that then we can see them in either our real device or some kind of emulator.

Now there's not that many core components that come with React Native in comparison with something like Flutter which comes with a lot of different ones, but you can easily expand on those core components to create custom ones like buttons or cards and it gives us basically ultimate flexibility.

Project Preview: "Game Zone" Review App

Okay then, so before we begin, I just wanted to give you a quick preview of what we're ultimately going to be making in this series. So here it is. It's called Game Zone, and it's just a review app. And you can already see we've got three reviews listed right here on the home screen. If we click on one, then we can see the review detail screen, and we have the title, the content, and a rating at the bottom as well. And we can also add new reviews by clicking on the icon and then just adding a new one, for example, 'Testing', and then 'Review details yada yada', and then a rating which is going to be three. Submit that and we should, fingers crossed, see that new review over there as well.

And we also have this navigation drawer at the top left as well. So if we click on that, we can see some different screens. We just have an About screen down here. So if we click on that, we get the About screen as well, and then we can go back to Home. So this is the app that we're ultimately going to be making in this series. It's going to teach all of the basics, all of the essentials of React Native, and hopefully you'll enjoy it as well.

Required Setup: Node.js, Android Studio & VS Code

Now before we start writing any code whatsoever, there are just a few more things I need to plow through. And the first one is this right here: node.js. We need Node installed at our computer to be able to create React Native apps. Now, if you don't know anything about Node, do not worry. We don't need to be proficient in Node. We only need this for the node package manager, NPM, to install a few things that we need for React Native to work. And I'm going to show you how to do all of that. All you need to worry about for now is just installing Node on your computer. So if you don't already, I suggest you do so by clicking on this link right here. And I'm going to leave the link to this website right down below as well. So that's step one, install node.js.

The next thing, since we want to be able to preview our app at some point, then you might want to install Android Studio. Now you don't have to. You can preview your app on your own device, like an iPhone or something like that, a physical device. And I'm going to show you how to connect that up later on. But for the rest of this series, or rather most of this series, I'm going to be using an Android Studio emulator to run and test our code on. So if you want to follow along exactly as I do, then you want to head to this website and download Android Studio as well. And I'm going to show you in probably the next video how to set up a virtual Android device so that we can test our code on it later on.

The next thing is that you obviously need some kind of text editor. Now, I'm going to be using VS Code, but you can use whatever editor you like. VS Code is a free, cross-platform editor, which is really nice, and it does also work well with creating React Native apps. And actually also, I have a package installed for VS Code that's going to help us create those React Native apps, which I'm going to show you now. And that package is this thing right here, this big long package which also has React Native snippets. So that just helps to create React Native apps. I might not always use it, but you know, it does help. So if you want to install that as well, then just search for it up here. You click on this little icon to get these extensions, search for 'ES7 React', and it's probably going to be first or second in the results. Install that and then just restart VS Code, and you'll be able to use it.

Accessing Course Files & Conclusion

And then finally, I've created course files for every single lesson inside this series and I've uploaded them to GitHub. So it's this repo right here, 'react-native-tutorial'. This link is going to be down below as well.

Now, each lesson in the course has its own branch on GitHub, and to see the code for a particular lesson, you need to select that branch. So for example, if you want to see the code for lesson 10, then you go to this branch drop-down, you look for 'lesson-10', select it, and then you can see all of that code right here.

Now, just one point I want to make, if you do use this repository or clone it to your desktop and then try to run the code, it might not work unless you run npm install first of all in the project directory. And that is just to install all of the dependencies for the project at that point in time. It's all explained on right here.

Okay, so there we go, my friends. That is your introduction to the course. So in the next video, let's get set up with React Native and start actually creating our app. Now, if you do enjoy the videos, my friends, please don't forget to share, subscribe, and like, and I'll see you in the very next tutorial.