ldco2016 / albums Goto Github PK

We now have our list of items which are rendering to the screen from the API endpoint.

We did get a warning message at the bottom of the simulator.

This is a React gotcha where we show components that are in an array and that is exactly what we are doing in this line:

renderAlbums() {
    return this.state.albums.map(album => (
      <AlbumDetail key={album.title} album={album} />
    ));
  }

Inside of the AlbumList.js component and then rendering it inside of our jsx like so:

renderAlbums() {
    return this.state.albums.map(album => (
      <AlbumDetail key={album.title} album={album} />
    ));
  }

  render() {
    // result of adding state code
    console.log(this.state);

    return (
      <ScrollView>
        {this.renderAlbums()}
      </ScrollView>
    );
  }
}

Each component inside an array of components must have a key property associated it with it. The whole purpose of this is a performance concern. Its how React ensures that it renders a list of components in an intelligent manner. With the key property, React will know which component to update at any given time. The only requirement of a key property is that it be unique against all the other elements in the array. In this case, we used a key of the albums title like so, AlbumDetail key={album.title}.

So a unique key has been added to the AlbumDetail component, you can also see that it has taken one album as a prop like so, <AlbumDetail key={album.title} album={album} />, and its going to render lots of information single album.

Inside of AlbumDetail.js I will add my boilerplate. This is just a functional component because we do not need lifecycle methods and we do not need access to state.

// Import a library to help create a component
import React from 'react';
import { Text, View } from 'react-native';

const AlbumDetail = () => {
  
};
export default AlbumDetail;

This will then need to be imported to AlbumList.js:

// Import a library to help create a component
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import axios from 'axios';
import AlbumDetail from './AlbumDetail';

By the way, this block of code I referenced earlier is utilizing a self-closing component:

renderAlbums() {
    return this.state.albums.map(album => (
      <AlbumDetail key={album.title} album={album} />
    ));
  }

So if this was not a self-closing tag, then it means I would be passing in a Text tag, but instead I have the AlbumDetail component and so I am utilizing a very particular type of communication from a parent to a child, which is the props system in React. So I have passed the album down to AlbumDetail as a prop. The name of the variable does not have to match the name of the prop, it just so happens it does here.

To ensure I am actually making use of that album or consuming that prop I am going to generate some amount of jsx inside of my AlbumDetail component like so:

// Import a library to help create a component
import React from 'react';
import { Text, View } from 'react-native';

const AlbumDetail = () => {
  return (
     <View>
        <Text></Text>
     </View>
  );
};
export default AlbumDetail;

So I need to receive the prop that I passed down from AlbumList inside of AlbumDetail. Receiving the props object looks like so:

const AlbumDetail = (props) => {
  return (
     <View>
        <Text></Text>
     </View>
  );
};
export default AlbumDetail;

On that props object I will have access to props.album.title like so:

const AlbumDetail = (props) => {
  return (
     <View>
        <Text>{props.album.title}</Text>
     </View>
  );
};
export default AlbumDetail;

So where did I get album inside of props.album.title? Is because inside of AlbumList inside of:

renderAlbums() {
    return this.state.albums.map(album => (
      <AlbumDetail key={album.title} album={album} />
    ));
  } 

I said, pass this prop called album.

How do design and build this component?

There are two different and distinct methodologies.

The following diagram is one way to put this together:

So in one component I could render the entire card and end up with some jsx that looks like what you see on the right hand side of the above diagram.

So, one single mega-component that has all the styling associated with the overall card.

Below, you will find an alternative layout.

It may look identical, but this is two reusable components inside the AlbumDetail component. There is the <Card> component and the <CardItem>. The purpose of these two components is to have some amount of built-in styling.

So I am making a new component called Card.js with the usual boilerplate:

import React from 'react';
import { View } from 'react-native';

const Card = (props) => {
  return (
    <View>
    </View>
  );
};

export default Card;

In React Native we do not have the benefit of separate css files, its a bit more common to make standalone components whose sole purpose is to add styling to the application like so:

import React from 'react';
import { View } from 'react-native';

const Card = (props) => {
  return (
    <View style={styles.containerStyle}>
      {props.children}
    </View>
  );
};

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10
  }
};

export default Card;

borderWidth: 1 - this says put a border around the component and give it a pixel width of 1.
borderRadius: 2 - this says give it rounded corners, the border that is.
borderColor: '#ddd - light-grey border.
borderBottomWidth: 0 - hide the border entirely.
shadowColor: '#000' - to give it pop or elevation.
shadowOffset: { width: 0, height: 2 } - specifies what side I want it to be on, some shadowing to the bottom.
shadowOpacity: 0.1 - to make it see-through, lightens it up. Gives it a nice, light-grey color to it.
shadowRadius: 2 - at the corners of shadow, round them out to match the border radius.

The margin setting behave exactly the same as in css. Left and right gives some spacing between the device and whats rendered. I want spacing between cards so they are not stacked on top of each other.