Building Your First App: A Beginner’s Guide for College Coders

Why Build a To-Do List App?

Before we jump into the code, let’s talk about why building a To-Do List app is such a great idea for beginners.

1. Simple yet functional: It’s a practical app with a clear goal — adding, editing, and deleting tasks.
2. Teaches the fundamentals: You’ll learn how to handle user input, manipulate data, and display it on the screen.
3. Scalable: Once you’ve completed the basic version, you can easily add new features like notifications, categories, or cloud syncing.

Now that you know why the To-Do List app is an excellent choice, let’s get started!

Step 1: Setting Up Your Development Environment

The first thing you need to do is set up your development environment. Here’s how to get started with React Native:

1. Install Node.js: React Native requires Node.js to run. You can download it from nodejs.org. Just follow the instructions for your operating system.

Install Expo CLI: Expo is a framework and platform built on top of React Native. It simplifies the app development process by providing tools to run your app without needing Android or iOS development environments.

To install Expo CLI, open your terminal (or command prompt) and run the following command:

npm install -g expo-cli

2. Create a new project: Once you’ve installed Expo, create a new project by running:

expo init TodoApp

Choose the blank template when prompted, and then navigate into your project directory:

cd TodoApp

3. Start the development server: Now, run the app on your device (either Android or iOS):

expo start

This will open a QR code in your terminal. Scan it with the Expo Go app on your phone to see the app in action.

Step 2: Building the App Interface

Your To-Do List app will need a simple, user-friendly interface. Let’s build the UI first.

1. Setting up basic structure: In your App.js file, you’ll import React and use React Native components like View, Text, and TextInput to build the structure.

                            import React, { useState } from 'react';
                            import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
                            
                            export default function App() {
                              const [task, setTask] = useState('');
                              const [tasks, setTasks] = useState([]);
                            
                              const addTask = () => {
                                if (task) {
                                  setTasks([...tasks, task]);
                                  setTask('');
                                }
                              };
                            
                              return (
                                <View style={styles.container}>
                                  <Text style={styles.header}>To-Do List</Text>
                                  <TextInput
                                    style={styles.input}
                                    placeholder="Enter a task"
                                    value={task}
                                    onChangeText={setTask}
                                  />
                                  <Button title="Add Task" onPress={addTask} />
                                  <FlatList
                                    data={tasks}
                                    renderItem={({ item }) => <Text style={styles.task}>{item}</Text>}
                                    keyExtractor={(item, index) => index.toString()}
                                  />
                                </View>
                              );
                            }
                            
                            const styles = StyleSheet.create({
                              container: {
                                flex: 1,
                                justifyContent: 'center',
                                alignItems: 'center',
                                padding: 20,
                              },
                              header: {
                                fontSize: 30,
                                marginBottom: 20,
                              },
                              input: {
                                height: 40,
                                borderColor: 'gray',
                                borderWidth: 1,
                                width: '100%',
                                paddingLeft: 10,
                                marginBottom: 10,
                              },
                              task: {
                                fontSize: 20,
                                marginVertical: 5,
                              },
                            });
                        

In this code:

• We use the useState hook to manage both the current task and the list of tasks.
• TextInput allows users to enter a task.
• FlatList displays the list of tasks, making it efficient for larger lists.

Step 3: Handling User Input

Handling user input is a key part of any app. In our app, the user can type a task in the input field and press the Add Task button to add it to the list.

Here’s how we do it:

• We store the input in the task state variable.
• When the button is pressed, the addTask function adds the task to the task array.
• After adding a task, we clear the input field by resetting the task state to an empty string.

Step 4: Deleting Tasks (Bonus Feature)

Now, let’s make the app a bit more interactive by allowing users to delete tasks.

Add the following code inside the FlatList component to display a delete button next to each task:

                        renderItem={({ item, index }) => (
                            <View style={styles.taskContainer}>
                                <Text style={styles.task}>{item}</Text>
                                <Button title="Delete" onPress={() => deleteTask(index)} />
                            </View>
                        )}
            
                        const deleteTask = (index) => {
                            setTasks(tasks.filter((task, i) => i !== index));
                        };
                    

In the deleteTask function, we filter out the task that the user wants to delete based on its index. This keeps the remaining tasks intact.

Step 5: Testing and Debugging

The most fun part comes after you’ve written the code — testing your app! Here are some tips:

• Test on both Android and iOS (if possible).
• Check edge cases, like adding an empty task or deleting tasks.
• Use Expo’s built-in debugging tools to track down any issues.

Step 6: Improving the App (Optional)

Once the basics are done, you can enhance the app in many ways, such as:

• Persisting tasks: Store tasks locally on the device using something like AsyncStorage.
• Adding categories: Let users organize tasks into different categories.
• Adding deadlines: Allow users to set deadlines for tasks and display them with a countdown.