Skip to content

Commit b873fd6

Browse files
committed
Update EmbededApp.md
Use ``` instead of indentation for code blocks
1 parent 9c8fdaf commit b873fd6

1 file changed

Lines changed: 74 additions & 46 deletions

File tree

docs/EmbededApp.md

Lines changed: 74 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -13,42 +13,60 @@ next: activityindicatorios
1313

1414
When you are ready to work with Cocoapods, add the following line to `Podfile`. If you don't have one, then create it under the root directory of your project.
1515

16-
pod 'React'
17-
pod 'React/RCTText'
18-
# Add any subspecs you want to use in your project
16+
```
17+
pod 'React'
18+
pod 'React/RCTText'
19+
# Add any subspecs you want to use in your project
20+
```
1921

2022
Remember to install all subspecs you need. The `<Text>` element cannot be used without `pod 'React/RCTText'`.
21-
23+
2224
Then install pods via shell
2325

24-
$ pod install --verbose
25-
26+
```
27+
$ pod install --verbose
28+
```
29+
2630
The installation process also requires [Node.js](http://nodejs.org).
2731

2832
## Create Your React Native App
2933

3034
First, enter React Native's pod root directory and create **index.ios.js** inside a directory `ReactComponent`.
3135

32-
$ cd Pods/React
33-
$ mkdir ReactComponent
34-
$ touch index.ios.js
35-
36+
```
37+
$ cd Pods/React
38+
$ mkdir ReactComponent
39+
$ touch index.ios.js
40+
```
41+
3642
Copy & paste following starter code for **index.ios.js**.
3743

38-
var React = require('react-native');
39-
40-
var {
41-
Text
42-
} = React;
43-
44-
class SimpleApp extends React.Component {
45-
render() {
46-
return <Text>This is a simple application.</Text>
47-
}
48-
}
49-
50-
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
51-
44+
```
45+
var React = require('react-native');
46+
47+
var {
48+
Text,
49+
View
50+
} = React;
51+
52+
var styles = React.StyleSheet.create({
53+
container: {
54+
flex: 1,
55+
backgroundColor: 'red'
56+
}
57+
});
58+
59+
class SimpleApp extends React.Component {
60+
render() {
61+
return <View style={styles.container}>
62+
<Text>This is a simple application.</Text>
63+
</View>;
64+
}
65+
}
66+
67+
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
68+
```
69+
5270
`SimpleApp` will be your **module name**, which will be used later on.
5371

5472
## Add Container View To Your App
@@ -59,21 +77,24 @@ You should now add container view for React Native component. It can be any **UI
5977

6078
However, let's subclass **UIView** for the sake of clean code. Let's name it **ReactView**. Open up **Yourproject.xcworkspace** and create a new class **ReactView** (You can name it whatever you like :)).
6179

62-
// ReactView.h
63-
64-
#import <UIKit/UIKit.h>
65-
@interface ReactView : UIView
66-
@end
80+
```
81+
// ReactView.h
6782
83+
#import <UIKit/UIKit.h>
84+
@interface ReactView : UIView
85+
@end
86+
```
6887

6988
Don't forget to add an outlet for it.
70-
71-
// ViewController.m
72-
73-
@interface ViewController ()
74-
@property (weak, nonatomic) IBOutlet ReactView *reactView;
75-
@end
76-
89+
90+
```
91+
// ViewController.m
92+
93+
@interface ViewController ()
94+
@property (weak, nonatomic) IBOutlet ReactView *reactView;
95+
@end
96+
```
97+
7798
Here I disabled **AutoLayout** for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.
7899

79100
## Add RCTRootView To Container View
@@ -82,22 +103,29 @@ Ready for the most interesting part? Now we shall create the **RCTRootView**, wh
82103

83104
In **ReactView.m**, we need to first initiate **RCTRootView** with the URI of your **index.ios.bundle**. **index.ios.bundle** will be created by packager and served by React Native server, which will be discussed later on.
84105

85-
NSString *urlString = @"http://localhost:8081/index.ios.bundle";
86-
NSURL *jsCodeLocation = [NSURL URLWithString:urlString];
87-
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
88-
moduleName: @"SimpleApp"
89-
launchOptions:nil];
106+
```
107+
NSString *urlString = @"http://localhost:8081/index.ios.bundle";
108+
NSURL *jsCodeLocation = [NSURL URLWithString:urlString];
109+
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
110+
moduleName: @"SimpleApp"
111+
launchOptions:nil];
112+
```
113+
90114
Then add it as a subview of the **ReactView**.
91115

92-
[self addSubview:rootView];
93-
rootView.frame = self.bounds;
94-
116+
```
117+
[self addSubview:rootView];
118+
rootView.frame = self.bounds;
119+
```
120+
95121
## Start Development Server
96122

97123
In root directory, we need to start React Native development server.
98124

99-
$ ./Pods/React/packager/packager.sh --root ./ReactComponents
100-
125+
```
126+
$ ./Pods/React/packager/packager.sh --root ./ReactComponents
127+
```
128+
101129
`--root` indicates the root of your React Native apps. Here we just have one **index.ios.js**. React Native development server will use packager to create a **index.ios.bundle**. Which can be access via `http://localhost:8081/index.ios.bundle`.
102130

103131
## Compile And Run

0 commit comments

Comments
 (0)