ReactNavtive framework tutorial (1 ),

ReactNavtive framework tutorial (1 ),

Original article: http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript

Note: All images are placed in the Baidu album space. If you cannot see the images, copy the image URL and paste it into the address bar for viewing.

Start

The ReactNative framework can be obtained at GitHub. You can use the git clone command or directly download the zip package to obtain it.

ReactNative uses Node. js. If Node. js is not installed on your machine, install it first. First install Homebrew. Then run the brew command to install Node. js:

Brew install node

Install watchman to monitor file changes ):

Brew install watchman

Then install the CLI of React Native:

Npm install-g react-native-cli

Npm will download and install CLI immediately. Npm is a tool similar to CocoPods or Carthage.

Go to the folder where you want to develop the React Native App and run the following command:

React-native init PropertyFinder

This creates an empty React Native project.

In the React Native project folder, The node_modules folder contains the React Native framework file. There is alsoIndex. ios. jsFile, which is also created by CLI.

There is also an Xcode project file and an iOS folder, which has some iOS code to guide the ReactNavtive App.

Open the Xcode project file, build & run. The following interface is displayed when the simulator is started:

At the same time, Xcode opens a terminal window and displays the following information:

========================================================== ====================================== | Running packager on port 8081. | Keep this packager running while developing on any JS | Projects. Feel free to close this tab and run your own | Packager instance if you prefer. | Https://github.com/facebook/react-native | ========================================================== ======================================   Looking for JS files in /Users/colineberhardt/Temp/TestProject   React packager ready.

This is the React Navtive Packager, which runs in the node container.

Do not close this window because it causes Xcode to terminate the App and re-run it.

Note:: Before getting started with specific code (mainly js Code in this tutorial), we recommend the Sublime Text editing tool, because Xcode is not suitable for compiling js Code. Of course, you can also use atom, brackets, and Other lightweight tools.

Hello React Native

Use your favorite Text Editor (such as Sublime Text) to openIndex. ios. js, Delete all content. Then add the following statement:

'Use strict ';

This will enable the rigorous mode, which will improve error processing and disable some js syntax features, which will make JavaScript better.

Note:For More information about the rigorous Mode, see Jon Resig's article: "ECMAScript5 Strict Mode, JSON, and More ".

Then add the following sentence:

VarReact = require ('react-native ');

This will loadReact-nativeModule and save it to the React object. React Native uses the same as Node. jsRequireFunction to load the module, similar to the import Statement in Swift.

Note:For more information about the concept of the JavaScript module, see AddyOsmani.

Then, input the following statement:

VarStyles = React. StyleSheet. create ({ Text :{ Color: 'black ', BackgroundColor: 'white ', FontSize: 30, Margin: 80 } });

This defines a css style, which will be applied when the "Hello World" string is displayed.

In React Native, we can use the Cascading Style Sheet (CSS) syntax to format the UI Style.

Next, enter the following code:

ClassPropertyFinderAppExtendsReact. Component { Render (){ ReturnReact. createElement (React. Text, {style: styles. text}, "Hello World! "); } }

Here we define a JavaScript class. The concept of JavaScript classes appears in ECMAScript 6. As JavaScript is an ever-evolving language, web developers must maintain backward compatibility with browsers. Because ReactNative is based on JavaScriptCore, we can use its modern syntax without worrying about compatibility with older browsers.

Note:If you are a Web developer, I suggest using the new JavaScript syntax. There are some tools such as Babel that can transform modern JavaScript syntax into traditional JavaScript syntax, so as to be compatible with older browsers.

PropertyFinderAppClass inherited fromReact. ComponenThe latter is the basis in the React UI. Components includes some immutable attributes, variable attributes, and some rendering methods. Of course, in this simple App, we use a render method.

Unlike the UIKit class, the Components of ReactNative are lightweight objects. The framework converts ReactComponents to the corresponding local UI object.

Finally, enter the following code:

React. AppRegistry. registerComponent ('propertyfinder ',Function(){ReturnPropertyFinderApp });

AppRegistryRepresents the App entry and root component. Save the file and return to Xcode. Make sure that the current Scheme isPropertyFinderAnd then run the App in the simulator. You will see the following results:

As you can see, the simulator renders JavaScript code as a local UI component and you won't see any traces of your browser.

You can confirm it as follows:

In Xcode, select Debug \ ViewDebugging \ Capture View HierarchyTo view the local view tree. You cannot find any UIWebView instance.

Open in XcodeAppDelegate. m, FindApplication: didfinishlaunchingwitexceptions:Method.

In this method,RCTRootViewThe object is responsible for loading JavaScript apps and rendering related views.

App 1,RCTRootViewThe content of the following URL is loaded:

Http: /localhost: 8081/index. ios. bundle

Do you still remember the terminal window popped up when the App is started? The packager and server running in the terminal window process the preceding request.

You can use Safari to open the above URL and you will see some JavaScript code. In the ReactNative framework code, you will find the "Hello World" code.

When the App is opened, the code is loaded and executed. In our App, The PropertyFinderApp component will be loaded, and then the corresponding local UI component will be created.