React Native environment setup and project creation (Mac)

[[169846]]

(I) Build the basic environment (necessary)

Using React Native to develop iOS applications requires OSX system, Xcode, Homebrew, node, npm, and you can also choose to use watchman and Flow.

1. Install Homebrew

Homebrew, referred to as brew, is a package manager for Mac systems, used to install NodeJS and some other necessary tool software.

How to use Homebrew:

1) Search software: brew search software name, such as brew search wget

2) Install software: brew install software name, such as brew install wget

3) Uninstall software: brew remove software name, such as brew remove wget

Open the terminal and run the following statement (you need to enter a password in the middle) to install:

 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  

The operation effect is as follows:

Homebrew installation.png

You can use the following statement to check whether the installation is successful and the installed Homebrew version:

 brew -v

Under normal circumstances, the installation can be successful. If the installation fails due to network problems, run the following statement to clean up and then reinstall:

 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"   
 
 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  

2. Install Node.js using Homebrew

React Native requires NodeJS 4.0 or higher. At the time of this post, Homebrew installed version 6.x by default, which fully meets the requirements.

The terminal runs the following statement:

 brew install node

The operation effect is as follows:

Install Node.js.png

3. Install React Native command line tool (react-native-cli)

React Native's command line tool is used to perform tasks such as creating, initializing, and updating projects, and running packagers.

The terminal runs the following statement:

 npm install -g react-native-cli

The operation effect is as follows:

Install react-native-cli.png

If an error occurs (possibly due to insufficient permissions), use the following statement to install:

 sudo npm install -g react-native-cli

Supplement: (Due to domestic network problems, the npm repository can be replaced with a domestic mirror)

 //Replace the npm repository with a domestic mirror: 
 
 npm config set registry https://registry.npm.taobao.org --global   
 
 npm config set disturl https://npm.taobao.org/dist --global  

4. Xcode

This is the most basic iOS development app, and should generally be installed. If not, it is recommended that you search and install it directly in the App Store.

(II) Recommended installation tools

1. Watchman

Watchman is a tool provided by Facebook to monitor file system changes. Installing this tool can improve development performance (packager can quickly capture file changes and achieve real-time refresh).

Terminal run statement installation:

 brew install watchman

The operation effect is as follows:

Install Watchman.png

2. Flow

Flow is a static JS type checking tool that can easily find possible type errors in the code.

Annotation: The strange colon question marks you see in many examples, as well as the type-like writing in method parameters, are all syntax of this flow tool. This syntax does not belong to the ES standard, but is Facebook's own code standard.

Terminal run statement installation:

 brew install flow

The operation effect is as follows:

Install Flow.png

3. IDE for React Native Development

You can edit it directly with your favorite editor.

React Native officially recommends three IDEs for writing React Native applications:

1) Atom and Nuclide

2) WebStorm

3) Sublime Text

4) VSCode + React Native Tools

For a closer look and usage, please refer to another article I wrote:

IDE for React Native Development

(III) Create *** projects

1. Initialize and create a project

Command line to create a project:

 react-native init AwesomeProject

The running screenshots are as follows:

react-native init AwesomeProject.png

This may be a long waiting process, probably because the project dependency package itself is very large, so the download speed is relatively slow. Anyway, I tried it in the middle of the night, in order to write a screenshot, haha, I watched an episode of anime in another world, and then I came back and found that the project was created successfully. . (ps: I have tried to create a project or execute this command when integrating native on another computer before, but I got impatient and ca it again, maybe it really requires patience haha)

If the creation is successful, it is as follows:

Create a successful screenshot.png

Generate project file set.png

2. Run the project

Run the project from the command line

 //Depends on the situation, anyway, enter the project root directory 
 
 cd AwesomeProject 
 
 // Run the iOS project 
 
 react-native run-ios

Next is a series of reactions. The screenshot is as follows, and the project is successfully run:

Pop-up running service window.png

Virtual machine running successfully screenshot.png

Replenish:

If debugging the Android version: (need to install the Android SDK, configure the environment, etc.)

 // Run the Android project 
 
 react-native run-android

3. In addition to command line operation, you can also run it directly like native iOS

Method 1: Open the AwesomeProject folder in Nuclide and run

Method 2: Double-click the ios/AwesomeProject.xcodeproj file and then click the Run button in Xcode. (Most commonly used, for iOS developers)

4. Simple modification and debugging

Open index.ios.js in your favorite editor and modify a few lines.

Simply press ⌘-R in the iOS Emulator to refresh the app and see your latest changes!