Standardize on using AwesomeProject for AppRegistry calls.
Summary: We've noticed that many newcomers paste sample code straight into a project created using `react-native init AwesomeProject`, but the sample code assumes the user is creating a new project for each example. This PR makes it so that these samples can be pasted into the same project from the Getting Started. Closes https://github.com/facebook/react-native/pull/14264 Differential Revision: D5149746 Pulled By: hramos fbshipit-source-id: cae95ab5b7baf64ddd9fe12d342ad05f785bb381
This commit is contained in:
parent
ffa76d02dc
commit
b1ecb84c97
|
@ -63,7 +63,7 @@ class ImageBrowserApp extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
AppRegistry.registerComponent('ImageBrowserApp', () => ImageBrowserApp);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => ImageBrowserApp);
|
||||
```
|
||||
|
||||
`RCTRootView` also provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.
|
||||
|
|
|
@ -41,7 +41,7 @@ export default class PizzaTranslator extends Component {
|
|||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);
|
||||
```
|
||||
|
||||
In this example, we store `text` in the state, because it changes over time.
|
||||
|
|
|
@ -348,7 +348,7 @@ const styles = StyleSheet.create({
|
|||
});
|
||||
|
||||
// Module name
|
||||
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => RNHighScores);
|
||||
```
|
||||
|
||||
> `RNHighScores` is the name of your module that will be used when you add a view to React Native from within your iOS application.
|
||||
|
@ -625,7 +625,7 @@ var styles = StyleSheet.create({
|
|||
},
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => HelloWorld);
|
||||
```
|
||||
|
||||
##### 3. Configure permissions for development error overlay
|
||||
|
|
|
@ -347,7 +347,7 @@ class MapViewExample extends React.Component {
|
|||
}
|
||||
|
||||
// Module name
|
||||
AppRegistry.registerComponent('MapViewExample', () => MapViewExample);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => MapViewExample);
|
||||
```
|
||||
|
||||
## Styles
|
||||
|
|
|
@ -29,7 +29,7 @@ export default class Bananas extends Component {
|
|||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('Bananas', () => Bananas);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => Bananas);
|
||||
```
|
||||
|
||||
Notice that `{pic}` is surrounded by braces, to embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX.
|
||||
|
@ -63,7 +63,7 @@ export default class LotsOfGreetings extends Component {
|
|||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);
|
||||
```
|
||||
|
||||
Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.
|
||||
|
|
|
@ -53,7 +53,7 @@ export default class BlinkApp extends Component {
|
|||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);
|
||||
```
|
||||
|
||||
In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like [Redux](http://redux.js.org/index.html) to control your data flow. In that case you would use Redux to modify your state rather than calling `setState` directly.
|
||||
|
|
|
@ -43,7 +43,7 @@ const styles = StyleSheet.create({
|
|||
});
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
|
||||
```
|
||||
|
||||
One common pattern is to make your component accept a `style` prop which in
|
||||
|
|
|
@ -22,7 +22,7 @@ export default class BoldAndBeautiful extends Component {
|
|||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('BoldAndBeautiful', () => BoldAndBeautiful);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => BoldAndBeautiful);
|
||||
```
|
||||
|
||||
Behind the scenes, React Native converts this to a flat `NSAttributedString` or `SpannableString` that contains the following information:
|
||||
|
@ -54,7 +54,7 @@ export default class BlueIsCool extends Component {
|
|||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('BlueIsCool', () => BlueIsCool);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => BlueIsCool);
|
||||
```
|
||||
|
||||
> In order to use this feature, you must give the view a `width` and a `height`.
|
||||
|
|
|
@ -30,7 +30,7 @@ export default class HelloWorldApp extends Component {
|
|||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);
|
||||
```
|
||||
|
||||
If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `index.ios.js` or `index.android.js` file to create a real app on your local machine.
|
||||
|
|
|
@ -46,7 +46,7 @@ export default class ListViewBasics extends Component {
|
|||
}
|
||||
|
||||
// skip this line if using Create React Native App
|
||||
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);
|
||||
AppRegistry.registerComponent('AwesomeProject', () => ListViewBasics);
|
||||
```
|
||||
|
||||
One of the most common uses for a `ListView` is displaying data that you fetch from a server. To do that, you will need to [learn about networking in React Native](docs/network.html).
|
||||
|
|
|
@ -58,7 +58,7 @@ export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component
|
|||
|
||||
// skip these lines if using Create React Native App
|
||||
AppRegistry.registerComponent(
|
||||
'IScrolledDownAndWhatHappenedNextShockedMe',
|
||||
'AwesomeProject',
|
||||
() => IScrolledDownAndWhatHappenedNextShockedMe);
|
||||
```
|
||||
|
||||
|
|
Loading…
Reference in New Issue