Move same code into App.js and setup eslint and flow.

vinceyuan · Mar 23, 2017 · 4ed12de · 4ed12de
1 parent 15ee58d
commit 4ed12de
Show file tree

Hide file tree

Showing 6 changed files with 604 additions and 109 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,26 @@
+{
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "parser": "babel-eslint",
+  "plugins": [
+    "react",
+    "react-native"
+  ],
+  "globals": {
+    "clearInterval": true,
+    "clearTimeout": true,
+    "console": false,
+    "fetch": true,
+    "navigator": false,
+    "setTimeout": true,
+    "setInterval": true,
+    "require": true,
+  },
+  "rules": {
+    "no-console": 1,
+    "no-unused-vars": 1,
+    "react-native/no-unused-styles": 1,
+    "react-native/split-platform-components": 1,
+    "react-native/no-inline-styles": 1,
+    "react-native/no-color-literals": 0,
+  }
+}
diff --git a/index.android.js b/index.android.js
@@ -1,53 +1,11 @@
 /**
- * Sample React Native App
- * https://github.com/facebook/react-native
  * @flow
  */
 
-import React, { Component } from 'react';
 import {
   AppRegistry,
-  StyleSheet,
-  Text,
-  View
 } from 'react-native';
 
-export default class ReactNativeDebugDemo extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
+import App from './src/App';
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('ReactNativeDebugDemo', () => ReactNativeDebugDemo);
+AppRegistry.registerComponent('ReactNativeDebugDemo', () => App);
diff --git a/index.ios.js b/index.ios.js
@@ -1,53 +1,11 @@
 /**
- * Sample React Native App
- * https://github.com/facebook/react-native
  * @flow
  */
 
-import React, { Component } from 'react';
 import {
   AppRegistry,
-  StyleSheet,
-  Text,
-  View
 } from 'react-native';
 
-export default class ReactNativeDebugDemo extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
+import App from './src/App';
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('ReactNativeDebugDemo', () => ReactNativeDebugDemo);
+AppRegistry.registerComponent('ReactNativeDebugDemo', () => App);
diff --git a/package.json b/package.json
@@ -3,6 +3,8 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
+		"eslint": "./node_modules/.bin/eslint 'src/**/*.js'",
+    "flow": "./node_modules/.bin/flow check",
 		"start": "node node_modules/react-native/local-cli/cli.js start",
 		"test": "jest"
 	},
@@ -12,11 +14,16 @@
 	},
 	"devDependencies": {
 		"babel-jest": "19.0.0",
+		"babel-eslint": "^6.1.2",
 		"babel-preset-react-native": "1.9.1",
+    "eslint": "^3.3.1",
+    "eslint-plugin-react": "^6.1.2",
+    "eslint-plugin-react-native": "^2.0.0",
 		"jest": "19.0.2",
-		"react-test-renderer": "~15.4.1"
+		"react-test-renderer": "~15.4.1",
+		"flow-bin": "^0.38.0"
 	},
 	"jest": {
 		"preset": "react-native"
 	}
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,46 @@
+// @flow
+
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
+
+export default class App extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>
+          Welcome to React Native!
+        </Text>
+        <Text style={styles.instructions}>
+          To get started, edit index.android.js
+        </Text>
+        <Text style={styles.instructions}>
+          Double tap R on your keyboard to reload,{'\n'}
+          Shake or press menu button for dev menu
+        </Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+});