https://github.com/michaelvilleneuve/react-native-boilerplate
🚀 A boilerplate to quickly setup a React Native project with Redux, Router, NativeBase, Icons and ESLint
https://github.com/michaelvilleneuve/react-native-boilerplate
boilerplate code-push react-native redux router
Last synced: about 2 months ago
JSON representation
🚀 A boilerplate to quickly setup a React Native project with Redux, Router, NativeBase, Icons and ESLint
- Host: GitHub
- URL: https://github.com/michaelvilleneuve/react-native-boilerplate
- Owner: Michaelvilleneuve
- Created: 2017-01-18T10:17:30.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-25T09:32:59.000Z (about 8 years ago)
- Last Synced: 2025-01-30T03:14:24.016Z (4 months ago)
- Topics: boilerplate, code-push, react-native, redux, router
- Language: JavaScript
- Homepage:
- Size: 3.07 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
REACT NATIVE BOILERPLATE
===
Because I couldn't find any correct and lightweight boilerplate to start with React Native, I decided to build a minimal app that contains all the required libraries to correctly start a project.
---
## Libraries
- React Native (of course) 🚀🚀 https://facebook.github.io/react-native/
- Redux 🎉 (To handle app state) http://redux.js.org/
- ReduxThunk (To handle Redux async actions) https://github.com/gaearon/redux-thunk
- CodePush (To push update OTA) https://github.com/Microsoft/react-native-code-push
- React-native-router-flux (To manage routing within the app 🛣) https://github.com/aksonov/react-native-router-flux
- NativeBase (To have basic cross platform components, and icon fonts 👏👍) http://nativebase.io
- ESLint (To make developers code better and unified JS) http://eslint.org/
## Default Components and code
This boilerplate really provides the minimum setup.
The src folder contains all the actual code. For the purpose of the example, and because most app will need it,
I left a login form so you can understand the code and keep the architecture.
## How do I launch the project ?
1. npm install
2. npm install -G react-native-rename
3. react-native-rename yournewname
3. react-native link
4. Either run 👉 react-native run-ios
5. Or 👉 react-native run-android
## How do I start coding ?
Well, if you need a login form, you can basically start adding your own components into src/components, and plug them to the src/Router.
If not, you can trash src/actions/AuthActions, src/reducers/AuthReducer, src/components/LoginForm, and the references to theses files in src/actions/index, src/actions/types, src/components/Router, src/components/reducers/index.
If you don't now how to organize redux actions/reducers, have a look at how it works for the form before trashing anything.
In general, your programming flow will be the following :
- Add a scene in src/Router and link it to a new component
- Create the component in src/components
- Write the component JSX code
- Import redux in your new component
```javascript
import { connect } from 'react-redux';
```
- Map global state to access it as props
```javascript
const mapStateToProps = ({ theKeyOfTheAction }) => {
// theKeyOfTheAction can be any key defined in reducers/index
const { yourProps, blaBlaProps } = theKeyOfTheAction;
return { yourProps, blaBlaProps };
};
export default connect(mapStateToProps, { yourActions, blaBla })(LoginForm);
```
- Create your actions in src/actions
- Reference them in src/actions/types
- Pass back your new state from src/reducers if needed