React Native Project Setup

[00:00:00]
>> Kadi Kraman: Now to get started, we're going to start a new project. So open your terminal, and like I said, you need to have node installed. If you do node-v, you are looking for a long-term support version of nodes. That's always what you should be using so long-term support versions are even numbers.

[00:00:18]
So right now it's gonna be a 18, that's getting a bit old now, but 20, 22 in the future 24, etc. So I'll be using node 20 here. And the other thing you need is a package manager. So I'm going to be using Yarn.
>> Kadi Kraman: In particular, I'm gonna use Yarn Classics, so Yarn 1.22.

[00:00:39]
But you can use npm, so this comes pre-installed with Node. You can use yarn classic like I am. You can use yarn modern, pnpm, bun, etc. So any of these will work. And you can check the documentation here for any neurons we might have if you're using a different package manager than me.

[00:00:57]
In particular, Yarn Classic is getting a bit old now, but for React Native projects, a lot of people still prefer it. And the reason for it is that Yarn Modern, and it's the same problem with pmpm, they introduced this plug-in pay mode of node linking, where it basically gets rid of your node modules folder.

[00:01:13]
And for React Native projects, that's problematic, because a lot of the time, from the native iOS and Android directories, we link directly to files in the node modules, which obviously breaks with this model. There is a workaround, so if you have this node linker, in your Yarn RC or the same for pnpm, if you use the PMPRC and use the node linker hosted, then it, it'll work.

[00:01:35]
So you can still use these package managers, but, just FYI and that's why I'm currently using Yarn. So the command to start create a new React Native project is npx create-expo-app. So npx, you don't need to install npx, npx is something that you get by default when you install Node.

[00:01:55]
It's like a Node package executor. And it basically lets you execute packages that are available in the node packages without installing them globally on your machine. And whenever you're doing a new command, I like to run it with -Help initially. And this prints out some help information that usually tells you it's just a convention, but it usually tells you what you can do with this script.

[00:02:21]
So in particular here what's useful for us is you can see that you can pass in a template or dash t. So by default when you npx create expo app it uses the default template and the default template isn't blank as of stk 51. It comes with navigation pre-installed and some styling and a bunch of things to just get you started so you wouldn't start from blank and wouldn't be overwhelmed with choices.

[00:02:49]
>> Kadi Kraman: But in this workshop, we wanna start from scratch and build everything as we go on. And the second thing that we're interested in is this thing on the bottom here, which tells you how to create this package at this new project using your preferred package manager. So if you do npx create expo app it actually uses node by default and you get a package lock.

[00:03:08]
In my case I want to use yarn, so I'm going to copy this yarn, create expo app. Give it a name, so I'm gonna call it taskly and dash T which will make sure that we get the prompt to choose our template. So from here we have an option and let's choose the blank typescript template.