https://github.com/ntamvl/react_native_counter_example
React Native Counter Example use create-react-native-app
https://github.com/ntamvl/react_native_counter_example
react react-native react-native-example redux
Last synced: about 1 month ago
JSON representation
React Native Counter Example use create-react-native-app
- Host: GitHub
- URL: https://github.com/ntamvl/react_native_counter_example
- Owner: ntamvl
- License: mit
- Created: 2017-06-13T03:40:44.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-19T07:36:41.000Z (almost 8 years ago)
- Last Synced: 2024-10-18T21:59:51.733Z (7 months ago)
- Topics: react, react-native, react-native-example, redux
- Language: JavaScript
- Size: 89.8 KB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Counter Example
Use `create-react-native-app` and `redux`
## Install `create-react-native-app`
Following https://facebook.github.io/react-native/docs/getting-started.html
Use npm to install the create-react-native-app command line utility:
```
npm install -g create-react-native-app
```
## Create App
```
cd && mkdir react_native_counter_example && cd react_native_counter_example && create-react-native-app .
```
## Create folders
```
mkdir -p src/{components,containers,store}
```
## Add package `react-redux`, `redux`
```
yarn add redux react-redux
```
## Create Counter component
Create file `src/components/Counter.js`
```JavaScript
import React, { Component } from 'react';
import {
Button,
StyleSheet,
Text,
View,
} from 'react-native';
const propTypes = {};
const defaultProps = {};
export default class Counter extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
{this.props.count}
);
}
}
const styles = StyleSheet.create({
counter: {
padding: 30,
alignSelf: 'center',
fontSize: 26,
fontWeight: 'bold',
},
});
```
## Create store
Create file `src/store/store.js`
```JavaScript
import { createStore } from 'redux'
export const counter = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
case 'RESET':
return 0;
default:
return state;
}
}
let store = createStore(counter);
export default store;
```
## Create Counter container
Create file `src/containers/CounterContainer.js`
```JavaScript
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Counter from '../components/Counter';
const mapStateToProps = state => ({
count: state
})
const mapDispatchToProps = (dispatch) => ({
increment: () => { dispatch({ type: 'INCREMENT' }) },
decrement: () => { dispatch({ type: 'DECREMENT' }) },
reset: () => { dispatch({ type: 'RESET' }) }
})
export default connect(mapStateToProps, mapDispatchToProps)(Counter)
```
## Edit file `App.js`
```JavaScript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import store from './src/store/store';
import CounterContainer from './src/containers/CounterContainer';
export default class App extends React.Component {
render() {
return (
Counter
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 30
}
});
```
## To run App
```
yarn start
```
OR
```
yarn run ios
```
**NOTE: If you see errors:**
```
Duplicate module name: fb-watchman
```
To Resolve, run this command:
```
yarn cache clean
```