React Native: Short Tutorial

0:00

React Native

1. React Native: A Short Tutorial

What is React Native?
- An open-source framework developed by Facebook (now Meta).
- It allows developers to build native mobile applications (iOS and Android) using JavaScript and the React library.
- Instead of using web views (rendering HTML/CSS inside a native container), React Native renders native UI components.
What is it Used For?
- Building truly cross-platform mobile applications (iOS and Android) from a single codebase.
- Creating apps that look and feel native to each platform, leveraging native device features (camera, GPS, sensors, etc.).
- Developing high-performance mobile apps using web technologies.
Key Advantages:
- Cross-Platform: Write code once, deploy to both iOS and Android (reducing development time and cost).
- Native Performance: Renders native components, offering better performance than web views.
- React Ecosystem: Leverages familiar React concepts (components, state, props).
- Hot Reloading: Speeds up

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, FlatList, TouchableOpacity } from 'react-native';

const App = () => {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

    const addTodo = () => {
        if (newTodo.trim()) {
            // Only add if the input is not empty and not just whitespace
            setTodos([...todos, { id: Date.now().toString(), text: newTodo.trim() }]);
            setNewTodo(''); // Clear the input field
        }
    };

    const removeTodo = id => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    const renderItem = ({ item }) => (
        <View style={styles.todoItem}>
            <Text style={styles.todoText}>{item.text}</Text>
            <TouchableOpacity onPress={() => removeTodo(item.id)} style={styles.removeButton}>
                <Text style={styles.removeText}>Remove</Text>
            </TouchableOpacity>
        </View>
    );

    return (
        <View style={styles.container}>
            <Text style={styles.title}>My TODO App</Text>
            <View style={styles.inputContainer}>
                <TextInput
                    style={styles.input}
                    placeholder="Enter a new todo"
                    value={newTodo}
                    onChangeText={setNewTodo}
                />
                <Button title="Add" onPress={addTodo} />
            </View>
            <FlatList
                data={todos}
                renderItem={renderItem}
                keyExtractor={item => item.id}
                style={styles.list}
                ListEmptyComponent={<Text style={styles.emptyText}>No todos yet! Add one above.</Text>}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#f5f5f5',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
        textAlign: 'center',
    },
    inputContainer: {
        flexDirection: 'row',
        marginBottom: 20,
    },
    input: {
        flex: 1,
        height: 40,
        borderColor: '#ccc',
        borderWidth: 1,
        padding: 8,
        marginRight: 5,
        backgroundColor: '#fff',
    },
    list: {
        flex: 1,
    },
    todoItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#fff',
        padding: 10,
        marginBottom: 10,
        borderWidth: 1,
        borderColor: '#eee',
        borderRadius: 5,
    },
    todoText: {
        flex: 1,
        fontSize: 16,
    },
    removeButton: {
        backgroundColor: '#ff4d4d',
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 5,
    },
    removeText: {
        color: '#fff',
        fontWeight: 'bold',
    },
    emptyText: {
        textAlign: 'center',
        marginTop: 50,
        fontSize: 16,
        color: '#888',
    },
});

export default App;

To Run This App:

Make sure you have Node.js and npm/yarn installed.
Install the Expo CLI: npm install -g expo-cli
Create a new Expo project: npx expo init MyTodoApp
Navigate into the project directory: cd MyTodoApp
Replace the contents of App.js with the code above.
Start the app: npm start or yarn start
Use the Expo Go app on your phone to scan the QR code, or run it in a simulator/emulator.

3. React Native vs. HTML/CSS Comparison Table

React Native Component	HTML/CSS Equivalent	React Native Example	HTML/CSS Example
`<View>`	`<div>`, `<span>`	`<View style={styles.container}> ... </View>`	`<div class="container"> ... </div>`, `<span>...</span>`
`<Text>`	`<p>`, `<h1>`, `<span>`, etc.	`<Text style={styles.title}>Hello, World!</Text>`	`<p class="title">Hello, World!</p>`, `<h1>Hello, World!</h1>`
`<Image>`	`<img>`	`<Image source={require('./assets/logo.png')} style={styles.logo} />`	`<img src="logo.png" alt="Logo" />`
`<Button>`	`<button>`	`<Button title="Click Me" onPress={handlePress} />`	`<button onclick="handleClick()">Click Me</button>`
`<TextInput>`	`<input type="text">`	`<TextInput style={styles.input} placeholder="Enter text" />`	`<input type="text" placeholder="Enter text">`
`<FlatList>`	`<ul>`, `<ol>`	`<FlatList data={items} renderItem={renderItem} keyExtractor={(item) => item.id} />`	`<ul><li>Item 1</li><li>Item 2</li></ul>`
`<ScrollView>`	`<div>` with `overflow: auto`	`<ScrollView> ... </ScrollView>`	`<div style="overflow: auto;"> ... </div>`
`<TouchableOpacity>`	`<div>` with `onclick`, `<button>`	`<TouchableOpacity onPress={handlePress}><Text>Pressable</Text></TouchableOpacity>`	`<button onclick="handlePress()">Pressable</button>`
`StyleSheet.create`	`<style>` tag	`const styles = StyleSheet.create({ container: { flex: 1 } });`	`<style>.container { flex: 1; }</style>`
`style` prop	`class` or `style` attribute	`<View style={styles.container}> ... </View>`	`<div class="container" style="flex: 1;"> ... </div>`
`onPress` prop	`onclick` attribute	`<Button onPress={handlePress} />`	`<button onclick="handlePress()">...</button>`
`onChangeText` prop	`oninput` attribute	`<TextInput onChangeText={setText} />`	`<input oninput="setText(event.target.value)">`
`value` prop	`value` attribute	`<TextInput value={text} />`	`<input value="text">`
`keyExtractor`	`key` attribute (for lists)	`<FlatList keyExtractor={(item) => item.id} ... />`	`<ul><li key="123">...</li></ul>`

Key Differences:

Styling: React Native uses StyleSheet.create with JavaScript objects and the style prop, while HTML/CSS uses <style> tags or external CSS files and class attributes.
Components: React Native uses specific React components (<View>, <Text>, <Image>, etc.), while HTML/CSS uses standard HTML tags (<div>, <p>, <img>, etc.).
Event Handling: React Native uses camelCase prop names (onPress, onChangeText), while HTML/CSS uses lowercase attribute names (onclick, oninput).
Lists: React Native uses <FlatList> or <SectionList> for efficient rendering of large lists, while HTML/CSS uses <ul> or <ol> with <li> elements.

React Native

1. React Native: A Short Tutorial

What is React Native?

An open-source framework developed by Facebook (now Meta).
It allows developers to build native mobile applications (iOS and Android) using JavaScript and the React library.
Instead of using web views (rendering HTML/CSS inside a native container), React Native renders native UI components.

What is it Used For?

Building truly cross-platform mobile applications (iOS and Android) from a single codebase.
Creating apps that look and feel native to each platform, leveraging native device features (camera, GPS, sensors, etc.).
Developing high-performance mobile apps using web technologies.

Key Advantages:

Cross-Platform: Write code once, deploy to both iOS and Android (reducing development time and cost).
Native Performance: Renders native components, offering better performance than web views.
React Ecosystem: Leverages familiar React concepts (components, state, props).
Hot Reloading: Speeds up

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, FlatList, TouchableOpacity } from 'react-native';

const App = () => {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

    const addTodo = () => {
        if (newTodo.trim()) {
            // Only add if the input is not empty and not just whitespace
            setTodos([...todos, { id: Date.now().toString(), text: newTodo.trim() }]);
            setNewTodo(''); // Clear the input field
        }
    };

    const removeTodo = id => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    const renderItem = ({ item }) => (
        <View style={styles.todoItem}>
            <Text style={styles.todoText}>{item.text}</Text>
            <TouchableOpacity onPress={() => removeTodo(item.id)} style={styles.removeButton}>
                <Text style={styles.removeText}>Remove</Text>
            </TouchableOpacity>
        </View>
    );

    return (
        <View style={styles.container}>
            <Text style={styles.title}>My TODO App</Text>
            <View style={styles.inputContainer}>
                <TextInput
                    style={styles.input}
                    placeholder="Enter a new todo"
                    value={newTodo}
                    onChangeText={setNewTodo}
                />
                <Button title="Add" onPress={addTodo} />
            </View>
            <FlatList
                data={todos}
                renderItem={renderItem}
                keyExtractor={item => item.id}
                style={styles.list}
                ListEmptyComponent={<Text style={styles.emptyText}>No todos yet! Add one above.</Text>}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#f5f5f5',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
        textAlign: 'center',
    },
    inputContainer: {
        flexDirection: 'row',
        marginBottom: 20,
    },
    input: {
        flex: 1,
        height: 40,
        borderColor: '#ccc',
        borderWidth: 1,
        padding: 8,
        marginRight: 5,
        backgroundColor: '#fff',
    },
    list: {
        flex: 1,
    },
    todoItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#fff',
        padding: 10,
        marginBottom: 10,
        borderWidth: 1,
        borderColor: '#eee',
        borderRadius: 5,
    },
    todoText: {
        flex: 1,
        fontSize: 16,
    },
    removeButton: {
        backgroundColor: '#ff4d4d',
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 5,
    },
    removeText: {
        color: '#fff',
        fontWeight: 'bold',
    },
    emptyText: {
        textAlign: 'center',
        marginTop: 50,
        fontSize: 16,
        color: '#888',
    },
});

export default App;

To Run This App:

Make sure you have Node.js and npm/yarn installed.

Install the Expo CLI: npm install -g expo-cli

Create a new Expo project: npx expo init MyTodoApp

Navigate into the project directory: cd MyTodoApp

Replace the contents of App.js with the code above.

Start the app: npm start or yarn start

Use the Expo Go app on your phone to scan the QR code, or run it in a simulator/emulator.

3. React Native vs. HTML/CSS Comparison Table

React Native Component

HTML/CSS Equivalent

React Native Example

HTML/CSS Example

<View>

<div>, <span>

<View style={styles.container}> ... </View>

<div class="container"> ... </div>, <span>...</span>

<Text>

<p>, <h1>, <span>, etc.

<Text style={styles.title}>Hello, World!</Text>

<p class="title">Hello, World!</p>, <h1>Hello, World!</h1>

<Image>

<img>

<Image source={require('./assets/logo.png')} style={styles.logo} />

<img src="logo.png" alt="Logo" />

<Button>

<button>

<Button title="Click Me" onPress={handlePress} />

<button onclick="handleClick()">Click Me</button>

<TextInput>

<input type="text">

<TextInput style={styles.input} placeholder="Enter text" />

<input type="text" placeholder="Enter text">

<FlatList>

<ul>, <ol>

<FlatList data={items} renderItem={renderItem} keyExtractor={(item) => item.id} />

<ul><li>Item 1</li><li>Item 2</li></ul>

<ScrollView>

<div> with overflow: auto

<ScrollView> ... </ScrollView>

<div style="overflow: auto;"> ... </div>

<TouchableOpacity>

<div> with onclick, <button>

<TouchableOpacity onPress={handlePress}><Text>Pressable</Text></TouchableOpacity>

<button onclick="handlePress()">Pressable</button>

StyleSheet.create

<style> tag

const styles = StyleSheet.create({ container: { flex: 1 } });

<style>.container { flex: 1; }</style>

style prop

class or style attribute

<View style={styles.container}> ... </View>

<div class="container" style="flex: 1;"> ... </div>

onPress prop

onclick attribute

<Button onPress={handlePress} />

<button onclick="handlePress()">...</button>

onChangeText prop

oninput attribute

<TextInput onChangeText={setText} />

<input oninput="setText(event.target.value)">

value prop

value attribute

<TextInput value={text} />

<input value="text">

keyExtractor

key attribute (for lists)

<FlatList keyExtractor={(item) => item.id} ... />

<ul><li key="123">...</li></ul>

Key Differences:

Styling: React Native uses StyleSheet.create with JavaScript objects and the style prop, while HTML/CSS uses <style> tags or external CSS files and class attributes.

Components: React Native uses specific React components (<View>, <Text>, <Image>, etc.), while HTML/CSS uses standard HTML tags (<div>, <p>, <img>, etc.).

Event Handling: React Native uses camelCase prop names (onPress, onChangeText), while HTML/CSS uses lowercase attribute names (onclick, oninput).

Lists: React Native uses <FlatList> or <SectionList> for efficient rendering of large lists, while HTML/CSS uses <ul> or <ol> with <li> elements.

React Native

Python: Concurrency Models Explained

Database Normalization: A Real-World Walkthrough

Angular: Beginner Tutorial

Job Role: Python Developer

Job Role: Java Developer

Job Role: Java Spring Boot Developer

Previous

Current

Next

React Native