Getting started with React Native Development and reactnative

Getting started with React Native Development and reactnative

Directory:

I. Preface 2. What is React Native 3. Development Environment establishment 4. Preparation knowledge 5. Simplest React Native mini-program 6. Summary 7. References 1. Preface although simple a little bit about React, however, learning React Native is much easier. So before learning React Native, you 'd better learn React first. I learned more about iOS development, so the main platform involved is iOS. 2. What is React NativeReact Native is a JavaScript framework used to develop real Native and render iOS and Android mobile apps. The biggest difference between React and React is that React uses browsers as rendering platforms, while React Native uses mobile devices as rendering platforms. Similar to React on the Web Platform, React Native is also used for JSX development. This programming language integrates JavaScript and XML-like Markup languages. React Native calls the Native rendering interface developed by OC or Java through bridging in the background. Therefore, the application sink uses the real Native Mobile UI component instead of the traditional WebView rendering method, this gives you the same appearance and experience as other mobile apps. React Native has the same declaration cycle as React. When the attribute (props) or state (state) changes, React Native will re-render the view. React Native does not run on the main thread. It can execute these asynchronous calls without affecting the user experience. How React Native works: React Native also uses JSX syntax. 3. Build the development environment first, you should install Homebrew. It is a general package management tool for Mac systems. It can be used to install related dependencies of React Native. Assume that you have installed Homebrew. Step 1: Open the terminal and enter the following command:

1、brew intsall node
2、brew install watchman
3. Brew install flow

If you encounter problems during installation, you may need to update brew and related dependency packages:

1、brew update2、brew upgrade

Step 2: If you have installed node, you can use npm (node Package Manager) to install the React Native command line tool. Open the terminal and enter:

npm install -g react-native-cli

This step will install React Native globally on the system. If the above two steps have been completed, the development environment has been set up. 4. Preparation knowledge. assume that you have a certain understanding of React (For details, refer to here) and have a certain understanding of Node. 5. The simplest React Native applet. Here we will create a Hello, World! . Enter the following command line in the command line to generate a new template project including React Native, iOS, and Android: react-native init HelloWorld. the creation process may be slow, wait a moment. After the initialization is complete, we can see that after the initialization is complete, there is a text message indicating how to run the app on iOS and how to run the app on Android. Open the index. ios. js file under the generated directory and modify the class Helloworld as follows:

export default class Helloworld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World!
        </Text>
      </View>
    );
  }
}
 

Then we can execute it on the terminal. The running result is as follows: Helloworld is the simplest React Native applet. Next let's take a look at our init helloworld project code. 1. Check the changes in Appdelegate.

#import "AppDelegate.h"

#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvidersharedSettings] jsBundleURLForBundleRoot:@"index.ios"fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootViewalloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"Helloworld"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColoralloc] initWithRed:1.0fgreen:1.0fblue:1.0falpha:1];

  self.window = [[UIWindowalloc] initWithFrame:[UIScreenmainScreen].bounds];
  UIViewController *rootViewController = [UIViewControllernew];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.windowmakeKeyAndVisible];
  returnYES;
}

@end

In fact, we can see that the original React Native only overrides the Root View of the rootViewController of Appdelegate. Then there is a Libraries folder in the Xcode Project, which contains several projects, which are actually the projects developed by FeceBook itself. Some classes and other public modules should be defined. 2. register the top-level component to open index. ios. js, as shown below:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class Helloworld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Helloworld', () => Helloworld);

 

In the last sentence, registerComponent built the Helloworld component so that we can use it in the AppDelegate. m file. In most cases, we do not need to modify the template code. Where:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

The import React is used to import React. Note: ES6 standard is used here (ECMAScript6, because ES6 is used by default, so I will take ES6 as a simple example ). InfoQ has a brief introduction. The usage of React Native is a little strange, that is, you need to import every component or module required. StyleSheet is actually the CSS of some widgets. All styles in React Native use style objects instead of traditional style sheets. The standard approach is to use the StyleSheet library for style Writing. We can use command + R to re-run the program, and use command + D to evoke development tools. 6. Based on the study of books and blogs, I finally ran out of the first React Native Applet: Hello, world! Now it's just the simplest getting started, just a simple understanding of React Native. If you want to learn more, go to the React Native official website. VII. References 1. React Native official documentation 2. React Native Development Guide attachment: source code: https://github.com/scottzg/reactnative-helloworld/tree/masterif you have any questions, please contact us at any time.