React native Windows Development environment Construction (i)

Reactnative is divided into server-side and mobile-loader programs, Android version has 3 kinds of code: JS Code, Java code and C + + code, mainly is to write JS code, if the framework is not enough to write native Java code to expand, C + + The code is mainly related to the JS engine, which is seldom used.

First install the node. js server side, download node. js and install it on the node. JS site.
https://nodejs.org/en/

To install git, you need to download the relevant files from git to GitHub when you execute the command.

As follows:
Http://www.git-scm.com/downloads
After installation, GIT commands are available on the command line.

Install REACT-NATIVE-CLI, command-line react-native tools
Use git to download reactnative project code
git clone https://github.com/facebook/react-native.git

Switch to the REACT-NATIVE-CLI directory
CD REACT-NATIVE/REACT-NATIVE-CLI

Installing REACT-NATIVE-CLI
NPM install-g

After installation, you can have the react-native command on the command line.

Perform
React-native Init Awesomeproject
Wait a while (slower) to create a react-native project
Create complete node Node_modules\react-native\packager\packager.js startup service, I have a bug in the test with Windows and need to modify a file.

In node_modules/react-native/packager/react-packager/src/dependencyresolver/dependencygraph/ Resolutionrequest.js _resolvenodedependency (Frommodule, Tomodulename) method, the

for (Let Currdir = Path.dirname (Frommodule.path);
Currdir!== '/';
Currdir = Path.dirname (Currdir)) {

Revision changed to

for (Let Currdir = Path.dirname (Frommodule.path);
Path.dirname (currdir)! = Currdir;
Currdir = Path.dirname (Currdir)) {

Re-run the command after modification: node node_modules\react-native\packager\packager.js

Open Http://localhost:8081/index.android.bundle?platform=android in the browser, if it can be accessed to indicate that the server side is ready, when accessed in the browser, just the command line shows the progress.

Google Kernel browser opens http://localhost:8081/debugger-ui, after downloading the plugin, according to the prompts can debug the application.

Run the Android APK program
Compile apk compared to the trouble, after the introduction, for the sake of convenience here to provide a compiled apk, using this apk before the creation of the INIT project using the name consistent: Awesomeproject.
apk

After installing the APK, press the menu key to select "Dev Settings", set the IP address, reload, you will see the Welcome interface.
If you don't have a menu key, shake your phone and the menu will appear.

Modify the code in the Index.android.js and relaod again, you will see that the interface will change.

Of course, this does not develop a complete application, but it also requires the ability to compile loader to publish and extend the application, as described later.

For information on how to write JS code, refer to the API documentation and sample programs.

In addition, I will continue to update reactnative related content, the latest content please follow my public number Zhaojietec

What's the problem with my qq:1115500401?

React native Windows Development environment Construction (i)