Log in forma

LoginForm

Kako je ova aplikacija jako jednostavna, i prikazivaće samo log in formu i kada je koristik prijavljen nešto drugo, baš zbog te promene i potrebe log in forme za "nestajanjem" nakon prijave, radi lakše kontrole svega toga napravićemo posebnu komponentu LoginForm.js. Napravimo fajl u direktorijumu components i unutar njega ćemo ubacitikomponente koje su nam potrebne (posmatrajući gore skiciran app), a to su Button, Card i CardSection komponente. LoginForm će biti Class Based komponenta.

import React, { Component } from 'react';
import Button from './Button';
import Card from './Card';
import CardSection from './CardSection';

class LoginForm extends Component {
  render() {
    return (
      <Card>
        <CardSection />
        <CardSection />

        <CardSection>
          <Button text='Log in' />
        </CardSection>
      </Card>
    );
  }
}

export default LoginForm;

Imamo tri CardSection komponenti, dve za dva input polja i jedno koje u sebi već sadrži Button komponentu koja sadrži tekst "Log in".
Sada ćemo ubaciti LoginForm komponentu u App komponentu. Pored LoginForm-e na vrh svega ćemo ubaciti i Header komponentu.

import React, { Component } from 'react';
import firebase from 'firebase';
import { View } from 'react-native';
import Header from './components/Header';
import LoginForm from './components/LoginForm';

class App extends Component {
  componentWillMount() {
    firebase.initializeApp({
      apiKey: 'AIzaSyCBgNLfb6lkoxqEBdmlVBm487tr2QU3ugo',
      authDomain: 'auth-ec3f8.firebaseapp.com',
      databaseURL: 'https://auth-ec3f8.firebaseio.com',
      storageBucket: 'auth-ec3f8.appspot.com',
      messagingSenderId: '680495307201'
    });
  }

  render() {
    return (
      <View>
        <Header headerText='Authentication' />
        <LoginForm />
      </View>
    );
  }
}

export default App;

Kada uradite reload simulatora, videćete dva prazna CardSection-a koja su za input-e i na dnu dugme sa tekstom Log in.