From 021e754c8f83d5c9ae405efca018fcca00ffe45f Mon Sep 17 00:00:00 2001 From: Martin Konicek Date: Tue, 7 Feb 2017 10:18:38 -0800 Subject: [PATCH] CLI: Add README to app template, lint Reviewed By: mkonicek Differential Revision: D4522116 Ninja: oss only fbshipit-source-id: d17e0e8badcfe97eaea092e5d5274e02904a534d --- local-cli/templates/HelloNavigation/README.md | 41 +++++++++++++++++++ .../components/KeyboardSpacer.js | 6 ++- .../HelloNavigation/components/ListItem.js | 4 +- .../templates/HelloNavigation/lib/Backend.js | 11 ++--- .../views/HomeScreenTabNavigator.js | 3 +- .../HelloNavigation/views/MainNavigator.js | 2 + .../views/chat/ChatListScreen.js | 5 ++- .../HelloNavigation/views/chat/ChatScreen.js | 10 ++--- .../views/welcome/WelcomeScreen.js | 8 +--- .../views/welcome/WelcomeText.android.js | 2 + .../views/welcome/WelcomeText.ios.js | 2 + 11 files changed, 72 insertions(+), 22 deletions(-) create mode 100644 local-cli/templates/HelloNavigation/README.md diff --git a/local-cli/templates/HelloNavigation/README.md b/local-cli/templates/HelloNavigation/README.md new file mode 100644 index 00000000000..110a6050469 --- /dev/null +++ b/local-cli/templates/HelloNavigation/README.md @@ -0,0 +1,41 @@ +# App template for new React Native apps + +This is a simple React Native app template which demonstrates a few basics concepts such as navigation between a few screens, ListViews, and handling text input. + +Android Example + +iOS Example + +## Purpose + +The idea is to make it easier for people to get started with React Native. Currently `react-native init` creates a very simple app that contains one screen with static text. Everyone new to React Native then needs to figure out how to do very basic things such as: +- Rendering a list of items fetched from a server +- Navigating between screens +- Handling text input and the software keyboard + +This app serves as a template used by `react-native init` so it is easier for anyone to get up and running quickly by having an app with a few screens and a ListView ready to go. + +### Best practices + +Another purpose of this app is to define best practices such as the folder structure of a standalone React Native app and naming conventions. + +## Not using Redux + +This template intentionally doesn't use Redux. After discussing with a few people who have experience using Redux we concluded that adding Redux to this app targeted at beginners would make the code more confusing, and wouldn't clearly show the benefits of Redux (because the app is too small). There are already a few concepts to grasp - the React component lifecycle, rendeing lists, using async / await, handling the software keyboard. We thought that's the maximum amount of things to learn at once. It's better for everyone to see patterns in their codebase as the app grows and decide for themselves whether and when they need Redux. See also the post [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.f3q7kq4b3) by [Dan Abramov](https://twitter.com/dan_abramov). + +## Not using Flow (for now) + +Many people are new to React Native, some are new to ES6 and most people will be new to Flow. Therefore we didn't want to introduce all these concepts all at once in a single codebase. However, it might make sense to later introduce a separate version of this template that uses Flow annotations. + +## Provide feedback + +We need your feedback. Do you have a lot of experience building React Native apps? If so, please carefully read the code of the template and if you think something should be done differently, use issues in the repo [mkonicek/AppTemplateFeedback](https://github.com/mkonicek/AppTemplateFeedback) to discuss what should be done differently. + +## How to use the template + +``` +$ react-native init MyApp --version 0.42.0-rc.2 --template navigation +$ cd MyApp +$ react-native run-android +$ react-native run-ios +``` diff --git a/local-cli/templates/HelloNavigation/components/KeyboardSpacer.js b/local-cli/templates/HelloNavigation/components/KeyboardSpacer.js index e728cad33be..f720d65c15e 100644 --- a/local-cli/templates/HelloNavigation/components/KeyboardSpacer.js +++ b/local-cli/templates/HelloNavigation/components/KeyboardSpacer.js @@ -1,3 +1,5 @@ +'use strict'; + /* @flow */ import React, { PropTypes, Component } from 'react'; @@ -10,7 +12,7 @@ import { } from 'react-native'; type Props = { - offset?: number; + offset?: number, } type State = { @@ -41,7 +43,7 @@ type State = { */ const KeyboardSpacer = () => ( Platform.OS === 'ios' ? : null -) +); class KeyboardSpacerIOS extends Component { static propTypes = { diff --git a/local-cli/templates/HelloNavigation/components/ListItem.js b/local-cli/templates/HelloNavigation/components/ListItem.js index a51db840f7e..a3a99b0d2c1 100644 --- a/local-cli/templates/HelloNavigation/components/ListItem.js +++ b/local-cli/templates/HelloNavigation/components/ListItem.js @@ -1,3 +1,5 @@ +'use strict'; + import React, { Component } from 'react'; import { Platform, @@ -21,7 +23,7 @@ const Touchable = ({onPress, children}) => { ); } else { return ( - + {child} ); diff --git a/local-cli/templates/HelloNavigation/lib/Backend.js b/local-cli/templates/HelloNavigation/lib/Backend.js index e80ad3a0527..22cde143b63 100644 --- a/local-cli/templates/HelloNavigation/lib/Backend.js +++ b/local-cli/templates/HelloNavigation/lib/Backend.js @@ -1,3 +1,4 @@ +'use strict'; // This file just a dummy example of a HTTP API to talk to the backend. // The state of the "database" that would normally live on the server @@ -60,7 +61,7 @@ function _makeSimulatedNetworkRequest(getValue) { */ async function fetchChatList() { return _makeSimulatedNetworkRequest((resolve, reject) => { - resolve(backendStateForLoggedInPerson.chats.map(chat => chat.name)) + resolve(backendStateForLoggedInPerson.chats.map(chat => chat.name)); }); } @@ -73,7 +74,7 @@ async function fetchChat(name) { backendStateForLoggedInPerson.chats.find( chat => chat.name === name ) - ) + ); }); } @@ -82,11 +83,11 @@ async function fetchChat(name) { */ async function sendMessage({name, message}) { return _makeSimulatedNetworkRequest((resolve, reject) => { - const chat = backendStateForLoggedInPerson.chats.find( + const chatForName = backendStateForLoggedInPerson.chats.find( chat => chat.name === name ); - if (chat) { - chat.messages.push({ + if (chatForName) { + chatForName.messages.push({ name: 'Me', text: message, }); diff --git a/local-cli/templates/HelloNavigation/views/HomeScreenTabNavigator.js b/local-cli/templates/HelloNavigation/views/HomeScreenTabNavigator.js index b3819950da3..7ccfba46556 100644 --- a/local-cli/templates/HelloNavigation/views/HomeScreenTabNavigator.js +++ b/local-cli/templates/HelloNavigation/views/HomeScreenTabNavigator.js @@ -1,4 +1,5 @@ -import React, { Component } from 'react'; +'use strict'; + import { TabNavigator } from 'react-navigation'; import ChatListScreen from './chat/ChatListScreen'; diff --git a/local-cli/templates/HelloNavigation/views/MainNavigator.js b/local-cli/templates/HelloNavigation/views/MainNavigator.js index 20a5fb11b9b..949fb08a972 100644 --- a/local-cli/templates/HelloNavigation/views/MainNavigator.js +++ b/local-cli/templates/HelloNavigation/views/MainNavigator.js @@ -1,3 +1,5 @@ +'use strict'; + /** * This is an example React Native app demonstrates ListViews, text input and * navigation between a few screens. diff --git a/local-cli/templates/HelloNavigation/views/chat/ChatListScreen.js b/local-cli/templates/HelloNavigation/views/chat/ChatListScreen.js index 79a247c0b2c..c899f5dec74 100644 --- a/local-cli/templates/HelloNavigation/views/chat/ChatListScreen.js +++ b/local-cli/templates/HelloNavigation/views/chat/ChatListScreen.js @@ -1,3 +1,5 @@ +'use strict'; + import React, { Component } from 'react'; import { ActivityIndicator, @@ -39,7 +41,6 @@ export default class ChatListScreen extends Component { async componentDidMount() { const chatList = await Backend.fetchChatList(); - const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.setState((prevState) => ({ dataSource: prevState.dataSource.cloneWithRows(chatList), isLoading: false, @@ -59,7 +60,7 @@ export default class ChatListScreen extends Component { }); }} /> - ) + ); } render() { diff --git a/local-cli/templates/HelloNavigation/views/chat/ChatScreen.js b/local-cli/templates/HelloNavigation/views/chat/ChatScreen.js index 8199667e4e6..04a9c62efd6 100644 --- a/local-cli/templates/HelloNavigation/views/chat/ChatScreen.js +++ b/local-cli/templates/HelloNavigation/views/chat/ChatScreen.js @@ -1,3 +1,5 @@ +'use strict'; + import React, { Component } from 'react'; import { ActivityIndicator, @@ -43,7 +45,6 @@ export default class ChatScreen extends Component { }); return; } - const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.setState((prevState) => ({ messages: chat.messages, dataSource: prevState.dataSource.cloneWithRows(chat.messages), @@ -85,7 +86,7 @@ export default class ChatScreen extends Component { myMessage: '', } }); - this.refs.textInput.clear(); + this.textInput.clear(); } onMyMessageChange = (event) => { @@ -110,7 +111,6 @@ export default class ChatScreen extends Component { return ( { this.textInput = textInput; }} style={styles.textInput} - placeholder='Type a message...' + placeholder="Type a message..." text={this.state.myMessage} onSubmitEditing={this.onAddMessage} onChange={this.onMyMessageChange} diff --git a/local-cli/templates/HelloNavigation/views/welcome/WelcomeScreen.js b/local-cli/templates/HelloNavigation/views/welcome/WelcomeScreen.js index b3622f19915..4b993634d01 100644 --- a/local-cli/templates/HelloNavigation/views/welcome/WelcomeScreen.js +++ b/local-cli/templates/HelloNavigation/views/welcome/WelcomeScreen.js @@ -1,9 +1,10 @@ +'use strict'; + import React, { Component } from 'react'; import { Image, Platform, StyleSheet, - Text, } from 'react-native'; import ListItem from '../../components/ListItem'; @@ -35,11 +36,6 @@ export default class WelcomeScreen extends Component { } const styles = StyleSheet.create({ - container: { - backgroundColor: 'white', - flex: 1, - padding: 16, - }, icon: { width: 30, height: 26, diff --git a/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.android.js b/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.android.js index bf77b5101c7..7a12d97f8f9 100644 --- a/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.android.js +++ b/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.android.js @@ -1,3 +1,5 @@ +'use strict'; + import React, { Component } from 'react'; import { StyleSheet, diff --git a/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.ios.js b/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.ios.js index 8e040208abb..bf90253014f 100644 --- a/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.ios.js +++ b/local-cli/templates/HelloNavigation/views/welcome/WelcomeText.ios.js @@ -1,3 +1,5 @@ +'use strict'; + import React, { Component } from 'react'; import { StyleSheet,