React Native HelloWorld

React Native HelloWorld

' Use strict ';

This line of code is used to turn on Strict mode,strict Mode error handling can be improved, javascript some language flaws can also be avoided. In short, JavaScript works better in this mode!

var React = require (' react-native ');

The code is to load the React-native module and assign it to the variable react. React Native uses the same module load mode as node. JS: Require, which can be equated to "link libraries" or "import Libraries" in Swift.

var styles = React.StyleSheet.create ({  text: {    color: ' Black ',    backgroundcolor: ' White ',    fontsize:30 ,    margin:80  }});

The code above defines a style applied to the "Hello World" text. If you've ever been in touch with web development, you've probably already discovered: React Native uses CSS to define the style of the application interface.

Class Propertyfinderapp extends React.component {  render () {    return react.createelement (React.text, {style: Styles.text}, "Hello world!");}  }

　　

Class is introduced in ES6, and even though JavaScript has progressed, Web developers are stuck in a browser-compatible situation and can't use the new features of JS. React native Run in JavaScriptCore is, that is, you can use the new features of JS, no need to worry about compatible with anything at all.

Note: If you are a Web developer, I would encourage you to use modern JavaScript and then use a tool like Babel to generate compatibility JavaScript to support old browsers with poor compatibility.

Propertyfinderapp inherits the React.component (React UI's base module). Components contain immutable properties, variable state variables, and methods that are exposed to rendering. This will make your application relatively simple, only one rendering method can be.

React Native components are not UIKit classes, they can only be said to some extent equivalent. The framework simply transforms the React component tree into a native UI.

Last step, add this line to the end of the file:

React.AppRegistry.registerComponent (' Propertyfinderapp ', function () {return propertyfinderapp});

　　

Appregistry defines the portal for the app and provides the root component.

Save the Propertyfinderapp.js and go back to Xcode. Make sure the Propertyfinder plan is checked and set up the appropriate IPhone simulator, then build and run your project. In a few seconds, you should be able to see that the "Hello World" app is running:

React Native HelloWorld