Coding

React Native Tutorial for Beginners – Getting Started

  • 00:03:24 have a real native app
  • 00:03:26 because all the ui is going to get
  • 00:03:28 compiled
  • 00:03:29 to native code that's really important
  • 00:03:32 we're going to get a native app out of
  • 00:03:34 that
  • 00:03:35 the javascript part is going to stay
  • 00:03:37 javascript but all of the ui elements
  • 00:03:39 the buttons and so on will be the native
  • 00:03:42 equivalents depending on which platform
  • 00:03:44 we're running on
  • 00:03:45 that gives us better performance but it
  • 00:03:47 also makes the development a bit harder
  • 00:03:49 because we're not really working with
  • 00:03:50 just html css and javascript
  • 00:03:53 to be precise we won't work with css at
  • 00:03:56 all it's not supported
  • 00:03:57 we won't work with traditional html
  • 00:04:00 elements at all it's not in there you
  • 00:04:02 will see what we got instead
  • 00:04:03 and we can use javascript but only the
  • 00:04:05 features that are supported
  • 00:04:07 by the environment react native gives us
  • 00:04:09 now i'll come back to all these things
  • 00:04:10 throughout the video though
  • 00:04:12 so why don't we just get started and
  • 00:04:14 build our first react native app
  • 00:04:17 to get started with building react
  • 00:04:18 native apps i recommend you official
  • 00:04:20 docs to which you can find a link in the
  • 00:04:22 video description
  • 00:04:23 there's a getting started page and for
  • 00:04:25 now we'll go with the quick start
  • 00:04:26 they will soon go into a more elaborate
  • 00:04:29 project setup but let's start with the
  • 00:04:30 quick start
  • 00:04:31 now there you see one instruction one
  • 00:04:34 installation command
  • 00:04:35 that might look familiar to you if
  • 00:04:37 you've worked with react
  • 00:04:39 for react projects so not react native
  • 00:04:42 just react
  • 00:04:43 there is a package called create react
  • 00:04:45 app
  • 00:04:46 which makes it easy to get started with
  • 00:04:48 react projects and gives you a nice
  • 00:04:50 project with a nice build workflow out
  • 00:04:52 of the box
  • 00:04:54 now there's an equivalent for create for
  • 00:04:56 react native it's called create
  • 00:04:58 react native app and we can't just copy
  • 00:05:00 that command to install that
  • 00:05:01 tool on our machine now on mac and linux
  • 00:05:05 you probably need to add sudo in front
  • 00:05:07 of it to get the right permissions
  • 00:05:09 and then you're prompted to enter your
  • 00:05:11 password and now this will install this
  • 00:05:14 package globally on your machine once
  • 00:05:17 this is done
  • 00:05:18 you can create a new project by running
  • 00:05:20 create react native app as a command
  • 00:05:22 so here i navigate it into the folder
  • 00:05:24 where i want to create my project
  • 00:05:26 and then i'll name it share
  • 00:05:30 places you can choose any name you want
  • 00:05:34 this will create a new folder and
  • 00:05:35 install all the required dependencies
  • 00:05:38 here you can see it's using yarn and
  • 00:05:40 alternative to npm which i got installed
  • 00:05:42 check it out if you're facing any issues
  • 00:05:44 with npm and that setup process
  • 00:05:46 also make sure to not use npm version 5
  • 00:05:49 at least at the point i'm recording this
  • 00:05:51 it's buggy use version 4 instead
  • 00:05:54 and once all of that is finished we
  • 00:05:56 actually can start
  • 00:05:57 our app already we can navigate into the
  • 00:06:00 newly created folder
  • 00:06:02 and run npm start now this will
  • 00:06:05 build the project and spin up a
  • 00:06:07 development server so that's pretty cool
  • 00:06:09 you still get these web development like
  • 00:06:11 features
  • 00:06:12 where your native app will actually
  • 00:06:14 connect to that development server to
  • 00:06:16 get live updates and so on
  • 00:06:18 and now you can do something cool you
  • 00:06:20 can visit
  • 00:06:21 the app store on your real smartphone
  • 00:06:24 the real device you own
  • 00:06:26 and search for a app named expo expo
  • 00:06:29 client is the exact name
  • 00:06:31 and if you got it you can open it and
  • 00:06:33 scan that qr code you should see here
  • 00:06:36 and this will connect your development
  • 00:06:38 server and launch your app
  • 00:06:40 on your real device though and that's
  • 00:06:42 important
  • 00:06:43 only in a wrapper it doesn't really
  • 00:06:45 install it on your device it just wraps