레이블이 start인 게시물을 표시합니다. 모든 게시물 표시
레이블이 start인 게시물을 표시합니다. 모든 게시물 표시

9.11.2020

How to start your React Native project


 


What is React Native?


React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, IOS, Web and UWP by enabling developers to use React along with native platform capabilities. - wikipedia

First, you need these on your labtop


  • node(higher than v.12)
  • npm(higher than v.6)
  • If you want to run a simulator on your labtop,
    • Xcode(if you're using Mac)
    • Android studio(If you're using Windows or Linux)
  • An Iphone or android phone(you need install Expo application, I recommend this method)
  • npm install -g expo-cli

Two ways to make React Native project


  1. Expo
    • It's like a create-react-app for React Native version. Basic environment settings come along with itself.
    • PROS
      • convenient
      • no need to do all those complex settings
      • you can text on Iphone(If you have the actual Iphone) without buying a Mac.
    • CONS
      • It's hard to use files and packages made with native languages. (you have to eject if you want to use them)
  2. React Native CLI
    • If you use a React Native CLI method, you can customize your project setting.
    • PROS
      • You can use packages that using native files.
      • It's pretty much up to you, so you can optimize your environment settings as you like.
    • CONS
      • It is very very complicate to setup things right.
      • If you don't have Mac, it is difficult to run your app in an IOS environment.

P.S. If your app don't need to use native files, I recommend you to use Expo over React Native CLI. It will save so much of your time.

Make a project file using Expo


  1. First, you need to sign up on an Expo website.
  2. Then, open a terminal, go to your directory that you want to create a Expo project.
  3. Type expo init [new project name] into your terminal.
  4. Expo will require you to select things such as "choose between blank or minimal or TypeScript version etc...", so make your choice.
  5. Now, It depends on what device you want to run a test.
    • IOS DEVICE
      • Go into your project directory by cd [new project name].
      • expo login and type your username and password.
      • Then, npm start or expo start .
      • Get your IOS device and go to expo application and login.
      • If your IOS device and your laptop are using the same wifi, then your new project name will come up to your IOS device.
    • ANDROID DEVICE
      • Go to your project directory like IOS DEVICE did.
      • Type npm start or expo start into your terminal.
      • Then, your expo web page will be automatically open on your default browser.
      • On the left-bottom, there will be a QR code.
      • Get your ANDROID DEVICE and go to expo application, login, and finally scan the QR code with your device.
    • SIMULATOR
      • Like ANDROID DEVICE, just type npm start or expo start.
      • Then, it will open a browser, you can find button for SIMULATOR above the QR code.
      • Like I said at first, you need to install Xcode or Android studio and make sure that your simulator is working before you do the expo.


If there's any wrong information, please let me know : D I will fix it.
Share: