125 lines
3.1 KiB
Markdown
125 lines
3.1 KiB
Markdown
# Project Structure
|
|
|
|
Although it may seem trivial, having a good initial project structure ensures you code will be clean and reusable. The following step gives
|
|
an opinionated guide to how this might look, which will work across both Android & iOS.
|
|
|
|
## Entry file
|
|
|
|
Every fresh React Native project contains two key files, an `index.android.js` & a `index.ios.js` files which currently individually render a simple React component
|
|
with basic styling. Rather than having two separate files, we're going to create a single file so both Android & iOS use it.
|
|
|
|
We'll achieve this by creating a `src` directory where our own code for the app will live. Create the directory with an `index.js` file, so your
|
|
project structure resembles the following:
|
|
|
|
```
|
|
- node_modules/
|
|
- android/
|
|
- ios/
|
|
- src/
|
|
-- index.js
|
|
- index.js
|
|
```
|
|
|
|
Now we can reference our bootstrap file in the `index.js` file, so both our platform share the same entry point:
|
|
|
|
```js
|
|
// index.js
|
|
|
|
import { AppRegistry } from 'react-native';
|
|
import bootstrap from './src';
|
|
|
|
AppRegistry.registerComponent('RNFirebaseStarter', () => bootstrap());
|
|
```
|
|
|
|
## Bootstrapping your project
|
|
|
|
You may have noticed before, but the `bootstrap` import is a function. This allows us to setup or initialize any external modules before our
|
|
React based application kick starts (such as [react-native-i18n](https://github.com/AlexanderZaytsev/react-native-i18n)).
|
|
|
|
Lets go ahead and setup our bootstrap file:
|
|
|
|
```js
|
|
// src/index.js
|
|
|
|
import React, { Component } from 'react';
|
|
import { View, Text } from 'react-native';
|
|
|
|
function bootstrap() {
|
|
|
|
// Init any external libraries here!
|
|
|
|
return class extends Component {
|
|
|
|
render() {
|
|
return (
|
|
<View>
|
|
<Text>
|
|
Bootstrapped!
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default bootstrap;
|
|
```
|
|
|
|
Although this function simply returns a basic React component, later we'll be able to see the power of having a bootstrap file which
|
|
consumes our entire application.
|
|
|
|
Go ahead and boot up your app onto your emulator. You should simply be presented with a plain screen with the words "Bootstrapped!".
|
|
|
|
|
|
|
|
Although a good starting point, we want to separate we'll our business logic out of the bootstrap file, keeping it purely for app
|
|
initialization purposes. This can simply be done by creating a basic React component called `App.js`, which will also live in the `src` directory;
|
|
|
|
```js
|
|
// src/App.js
|
|
|
|
import React, { Component } from 'react';
|
|
import { View, Text } from 'react-native';
|
|
|
|
class App extends Component {
|
|
|
|
render() {
|
|
return (
|
|
<View>
|
|
<Text>
|
|
Bootstrapped!
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
|
|
Now we can reference this component within our bootstrap setup and return it from the bootstrap component:
|
|
|
|
```js
|
|
// src/index.js
|
|
|
|
import React, { Component } from 'react';
|
|
import App from './App';
|
|
|
|
function bootstrap() {
|
|
|
|
// Init any external libraries here!
|
|
|
|
return class extends Component {
|
|
|
|
render() {
|
|
return (
|
|
<App />
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
export default bootstrap;
|
|
```
|