React Native short tutorial
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.jswith the code above. -
Start the app:
npm startoryarn 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.createwith JavaScript objects and thestyleprop, while HTML/CSS uses<style>tags or external CSS files andclassattributes. -
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.