Creating the TasksList component

Going back to the proposed file structure from earlier, your project should look like this:

Let's start by writing our first component--the TasksList module.

The first thing we will need to do is import our dependency on React:

import React, { Component } from 'react'; 

Then, we'll import just the building blocks we need from the React Native (react-native) library:

import { 
  ListView, 
  Text 
} from 'react-native'; 

Now, let's write the component. The syntax for creating a new component in ES6 is as follows:

export default class TasksList extends Component { 
  ... 
} 

From here, let's give it a constructor function to fire during its creation:

export default class TasksList extends Component { 
  constructor (props) { 
    super (props); 
    const ds = new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2 
    }); 

    this.state = { 
     dataSource: ds.cloneWithRows([ 
        'Buy milk', 
        'Walk the dog', 
        'Do laundry', 
        'Write the first chapter of my book' 
      ]) 
    }; 
  } 
} 

Our constructor sets up a dataSource property in the TasksList state as equal to an array of hardcoded strings. Again, our first goal is to simply render a list on the screen.

Next up, we'll utilize the render method of the TasksList component to do just that:

  render () { 
    return ( 
      <ListView 
        dataSource={ this.state.dataSource } 
        renderRow={ (rowData) =>  
          <Text> { rowData } </Text> } 
      /> 
    ); 
  } 

Consolidated, the code should look like this:

// Tasks/app/components/TasksList/index.js 

import React, { Component } from 'react'; 

import { 
  ListView, 
  Text 
} from 'react-native'; 

export default class TasksList extends Component { 
  constructor (props) { 
    super (props); 

    const ds = new ListView.DataSource({ 
      rowHasChanged: (r1, r2) => r1 !== r2 
    }); 

    this.state = { 
      dataSource: ds.cloneWithRows([ 
        'Buy milk', 
        'Walk the dog', 
        'Do laundry', 
        'Write the first chapter of my book' 
      ]) 
    }; 
  } 

  render () { 
    return ( 
      <ListView 
        dataSource={ this.state.dataSource } 
        renderRow={ (rowData) => 
          <Text>{ rowData }</Text> } 
      /> 
    ); 
  } 
} 

Great! That should do it. However, we need to link this component over to our application's entry point. Let's hop over to index.ios.js and make some changes.