Section 2 displays the page title, Section 2 displays the page title

Section 2 displays the page title, Section 2 displays the page title

# Code
When the project was just created, there was only one js file, index. android. js. The Code is as follows:

Import React ,{
AppRegistry,
Component,
Text} from 'react-native ';

Class Note extends Component {
Render (){
Return (
<Text>
Write notes
</Text>
);
};
};
AppRegistry. registerComponent ('note', () => note );

# React Native Program Execution Process
1. index. android. js is the entry file, which is executed from here.
2. Because React is componentized, we must first create a root component. Here is the Note
3. We need to register the root component
4. After the program is started, the root component is displayed first. Here, "write notes" is displayed in the upper-left corner of the screen"

# Es2015 Module System
Import React ,{
AppRegistry,
Component,
Text} from 'react-native ';
The role of this part is to import some features of the react-native package. Here, React is imported by default, and only one react can be imported. Other braces may be
Classes, functions, and variables, as long as we use them, we need to import them in advance.
To call the functions provided by other modules in the js file, you must import them first.

# React component Concept
Class Note extends Component {

This is to create a Component that inherits from Component and implements the render function.
We have created this component, which can be used in jsx in the future using <Note> </Note> and the react native encapsulated
<Text> components are similar, which is why React is componentized.
A brief description of the React concept: the first core concept of React is virtual Dom. No matter which platform the virtual Dom abstracts the hierarchical structure of the interface,
The attributes and status of each component. When the status changes, React compares the difference with the previous status, and then only Render needs to modify the part, not all
. React is a Web technology that has separated React-Dom. The latter is to componentize and Render html tags. In turn, React Native
Only components related to android and ios are encapsulated. Therefore, the React core architecture can work on the mobile platform after a set of component Render is implemented.
Similarly, if we use the window api to render components on the win32 platform, this technology can also be used for desktop development and is native and used.
Js windows applications. Currently, a third party has implemented Render on mac.

# JSX
This component can work normally only by implementing the Render function. The function is used to present itself.
The content returned by the function body is the jsx syntax, which is the simplest form:
<Text>
Write notes
</Text>

Why is it simplified? Because the original React statement is as follows:
Render (){
Return (
React. createElement ('text', null, 'notetaking ')
)}
The last parameter of createElement may also be nested to call createElement, which makes the code very messy.
Therefore, facebook provides jsx

Before running, convert it to the form of createElement.

# Register the root component:
AppRegistry. registerComponent ('note', () => note );
React Native provides AppRegistry, which is used to register the first rendered component, known as the root component.
The first parameter is the name, and the second () => Note is the double arrow function of Es2015, similar to the lambda function in other languages,
It is equivalent to func (return Note); if one or more parameters exist, process them in brackets.
Note is a class. The method here actually creates an instance of the Note class and calls the constructor of the Note class.

# Separate the Note component:
Generally, a project does not have only one source file.
We create the src directory, create a note. js file in it, and then port the component here. Add necessary references to the component class.
Add the default export: export default.
Delete the code and import related to this component in index. android. js, and add the import to '. \ src \ Note.