Правильный способ разработки реактивного приложения

Question

Я новичок-реагент. Мне интересно, есть ли «правильный» способ разработки адаптивного приложения? Поскольку документация по-прежнему очень недостаточна, я боюсь, что могу ее разработать очень неправильно, и я предпочитаю исправлять ошибку сейчас, а не после того, как проект расширяется. Из того, что я понимаю из своего предыдущего опыта, мы не должны комбинировать все страницы в одном файле .js, но как каждый компонент может взаимодействовать друг с другом?

я сейчас делаю, как это внутри index.android.js:

import Login from './Login'; 
import Register from './Register'; 
import Home from './Home'; 

class TheProject extends Component { 
    renderScene (route, navigator) { 
     _navigator = navigator; 
     switch (route.index) { 
      case 'Login': 
       return (
        <View style={styles.container}> 
         <Login navigator={navigator} /> 
        </View> 
       ); 
      case 'Register': 
       return (
        <View style={styles.container}> 
         <Register navigator={navigator} /> 
        </View> 
       ); 
     } 
    } 
    render() { 
     return (
      <Navigator 
       initialRoute={{index: 'Login'}} 
       renderScene={this.renderScene} 
      /> 
     ); 
    } 
} 

var styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'space-around', 
     backgroundColor: '#F0F0F0', 
     flexWrap:'wrap' 
    }, 
}); 

AppRegistry.registerComponent('TheProject', function() { return TheProject }); 
module.exports = TheProject; 

и в моем Login.js (other.js файл будет похож):

export default class Login extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      username: '', 
      password: '', 
     }; 
    } 
    registerOnPress() { 
     this.props.navigator.push({ 
      index: 'Register' 
     }); 
    } 
    loginOnPress() { 
     if (this.state.username != '' && this.state.password != '') { 
      Alert.alert('Success!', 'Successfully logged in.'); 
      this.props.navigator.push({ 
       index: 'Home' 
      }); 
     } else { 
      Alert.alert('Failed to log-in', 'Wrong username or password'); 
     } 
    } 
    render() { 
     return (
      <View style={styles.individualContainer}> 
       <View style={styles.content}> 
        <View style={styles.formField}> 
         <View style={styles.input}> 
          <Text style={styles.label}>Username : </Text> 
          <View style={styles.fieldBox}> 
           <TextInput 
            style={styles.field} 
            underlineColorAndroid={'transparent'} 
            onChangeText={(data) => this.setState({ username: data })} 
           /> 
          </View> 
         </View> 
         <View style={styles.input}> 
          <Text style={styles.label}>Password : </Text> 
          <View style={styles.fieldBox}> 
           <TextInput 
            style={styles.field} 
            underlineColorAndroid={'transparent'} 
            secureTextEntry={true} 
            onChangeText={(data) => this.setState({ password: data })} 
           /> 
          </View> 
         </View> 
        </View> 
        <View style={styles.input}> 
         <TouchableHighlight style={styles.buttonBox} onPress={this.loginOnPress.bind(this)}> 
          <Text style={styles.buttonText}>Login</Text> 
         </TouchableHighlight> 
        </View> 
        <View style={styles.input}> 
         <TouchableHighlight style={styles.buttonBox} onPress={this.registerOnPress.bind(this)}> 
          <Text style={styles.buttonText}>Register</Text> 
         </TouchableHighlight> 
        </View> 
       </View> 
      </View> 
     ); 
    } 
} 

Я знаю, есть много способов развития, но я на правильном пути? Я довольно размытый, когда речь заходит о монтировании и размонтировании компонентов.

Answer 1

Ваш вопрос очень расплывчатый, сформулированный таким образом, что единственный реальный ответ - «нет единого правильного ответа».

Предлагаю посмотреть список нужных стартеров и список Examples.

Связь между компонентами довольно прямолинейна и покрыта Facebook's documentation on the subject.

Обязательно не разрабатывайте все приложение в одном файле.

Имейте в виду, что вам не нужно «Реагировать на родную документацию», чтобы написать реакцию native в начале. Сначала вы должны понять основы React, потому что, как только вы это сделаете, вы заметите, что эти основы применяются одинаково, независимо от того, пишете ли вы веб-приложение или родное приложение, единственное, что отличается от используемых компонентов.

Answer 2

Сначала я собирался голосовать за закрытие этого вопроса, но это как-то увлекательное и технологий, связанных, если мы просто смотреть через правильные очки :)

1. На первых, следует отметить, у вас есть много вложенных компонентов <View>. Это может быть реструктурировано, когда в качестве компонента будут применяться как имя пользователя, так и пароль + textinput в качестве компонента - получение текстовой метки и onChangeText в качестве реквизита.

2. То же самое происходит с кнопками входа и регистрации, создайте их как отдельный компонент, где вы определяете название кнопки и loginOnPress/registerOnPress выполняет функции реквизита.

3. Не забывайте использовать propTypes при необходимости. Это поможет вам и другим разработчикам отслеживать, что происходит в разных компонентах и ​​как они связаны друг с другом. Например: Login.propTypes = { navigator: PropType.func.isRequired}

4. Использование потока (http://flowtype.org) с вашим проектом для типов и аннотаций.