React Native CLI

React Native – Part 2 🐹

# 2 react-native-cli

Suitable

  • For those who want to
    • involve native source code, either third-party or self-customized
    • integrate React Native into existing app
  • For those who are experience in React Native

Prerequisite

Other than NodeJS and NPM.
We need these to build native source code to run on specific platform.
XCode to build iOS app, Android Studio to build Android app.

  • Android Studio (Android development)
  • XCode (iOS development)
// Specify the component you want to register, 
// App is just an example.
// This line is not required, if using Expo
AppRegistry.registerComponent("App", () => App);

This is another prerequisite in React Native project, It is automatically generated, if the project is initialized by react-native-cli. If we are ejecting from create-react-native-app, then we need to add this to our entry file, eg: index.js.

For more details regarding installation can refer here.

React Native – Part 1 (create-react-native-app)

React Native - Create React Native App

React Native – Part 1 🐹

This post is in bilingual (Chinese and English). 
This is not a tutorial post for how to install React Native.
But, a simple comparing which method you should go for install React Native for newcomer. 

此文并非教学文,只是想让新手们了解,哪一种方式更适合新手去摸索React Native。

Prerequisite

  • NodeJS and NPM/Yarn
    • NPM will be installed together with NodeJS
    • Yarn or NPM either one will do
    • Go for LTS version, if you not which version to pick

必备
NodeJS与NPM,NodeJS中文网

npm install -g create-react-native-app
npm install -g react-native-cli

Both commands above, will install the package to our system, so that we can execute it within the system.

以上的指令,会将组件安装于系统范围,而非项目范围。让开发人员可以在系统范围内,执行指令。

** Windows user might need this package windows-build-tools

Methods to install React Native

# 1 create-react-native-app

Using create-react-native-app to initialize a project

Suitable

  • For those who want to
    • learn the basic before go deeper
    • create a cross-platform app without any customized native source code
    • create a prototype
    • experiment purpose
create-react-native-app [project-name]

create-react-native-app provided the most simplest solution to try out the react-native without deaaling with XCode or Android Studio (unless those who want try it on simulator).

create-react-native-app 是当前比较方便和省时的方式。因为这个方式提供手机应用Expo。让人们可以在实体手机上做测试。免去了设置 XCode和Android Studio. 参考以下的链接。

Example

  • The entry file is App.js. 
  • .gitignore is autogenerated with pre-fill 

Test it on your device – using Expo !

Provided Expo SDK to develop React Native.

Downside

We can’t link/bridge any customized native code.
(Unless we eject our project) 
So, for those who just want to try out the react native for fun.
create-react-native-app is better solution.

这个方式的坏处是,不能运用 IOS和Android 的定制原代码。
不过,就纯粹接触,create-react-native-app可说是不二选择。

React Native – Part 2 (react-native-cli)