react-native-firebase/codorials/authentication-with-firebase/project-structure.md

114 lines
3.0 KiB
Markdown
Raw Normal View History

2018-02-28 13:30:54 +00:00
# Project Structure
2018-03-05 10:50:25 +00:00
Although it may seem trivial, having a good initial project structure ensures your code will be clean and reusable.
2018-04-21 14:55:13 +00:00
The following step gives an opinionated guide to how this might look, which will work across both Android & iOS.
2018-02-28 13:30:54 +00:00
## Entry file
2018-03-05 10:50:25 +00:00
Every fresh React Native project a key file, an `index.js`, which currently renders a simple React component
with basic styling. Rather than keeping our business logic within this file, we're going to keep it contained in it's own
directory.
2018-02-28 13:30:54 +00:00
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>
2018-04-21 14:55:13 +00:00
<Text>Bootstrapped!</Text>
2018-02-28 13:30:54 +00:00
</View>
);
}
2018-04-21 14:55:13 +00:00
};
2018-02-28 13:30:54 +00:00
}
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!".
2018-04-21 14:55:13 +00:00
![Bootstrapped!](assets/app-bootstrapped.jpg =300x\*)
2018-02-28 13:30:54 +00:00
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 {
2018-04-21 14:55:13 +00:00
render() {
return (
<View>
<Text>Bootstrapped!</Text>
</View>
);
}
2018-02-28 13:30:54 +00:00
}
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() {
2018-04-21 14:55:13 +00:00
return <App />;
2018-02-28 13:30:54 +00:00
}
2018-04-21 14:55:13 +00:00
};
2018-02-28 13:30:54 +00:00
}
export default bootstrap;
```