React Native vs React Web

1// React Web - DOM-based rendering
2import React, { useState } from 'react';
3import './styles.css';
4
5// Web Component using HTML elements and CSS
6const WebComponent = () => {
7  const [isHovered, setIsHovered] = useState(false);
8  const [clickCount, setClickCount] = useState(0);
9
10  return (
11    <div className="container">
12      <h1 className="title">React Web Application</h1>
13      
14      {/* HTML Elements */}
15      <div 
16        className="card"
17        onMouseEnter={() => setIsHovered(true)}
18        onMouseLeave={() => setIsHovered(false)}
19        style={{
20          transform: isHovered ? 'scale(1.05)' : 'scale(1)',
21          transition: 'transform 0.3s ease'
22        }}
23      >
24        <img 
25          src="/image.jpg" 
26          alt="Web image"
27          className="card-image"
28        />
29        <p className="card-text">
30          This runs in a web browser using the DOM
31        </p>
32      </div>
33
34      {/* Web-specific APIs */}
35      <button 
36        onClick={() => {
37          setClickCount(prev => prev + 1);
38          // Web APIs
39          window.localStorage.setItem('clicks', String(clickCount + 1));
40          document.title = `Clicked ${clickCount + 1} times`;
41        }}
42        className="button"
43      >
44        Click me (Web): {clickCount}
45      </button>
46
47      {/* CSS Animations */}
48      <div className="animated-box">
49        CSS animations work natively
50      </div>
51
52      {/* Web-only features */}
53      <iframe 
54        src="https://example.com" 
55        width="100%" 
56        height="300"
57      />
58      
59      <input 
60        type="file" 
61        accept="image/*"
62        onChange={(e) => console.log(e.target.files)}
63      />
64    </div>
65  );
66};
67
68// CSS file (styles.css)
69/*
70.container {
71  max-width: 1200px;
72  margin: 0 auto;
73  padding: 20px;
74}
75
76.card {
77  background: white;
78  border-radius: 8px;
79  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
80  padding: 16px;
81  cursor: pointer;
82}
83
84.card:hover {
85  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
86}
87
88.animated-box {
89  animation: pulse 2s infinite;
90}
91
92@keyframes pulse {
93  0% { opacity: 1; }
94  50% { opacity: 0.5; }
95  100% { opacity: 1; }
96}
97
98@media (max-width: 768px) {
99  .container {
100    padding: 10px;
101  }
102}
103*/

1// React Native - Native component rendering
2import React, { useState, useRef } from 'react';
3import {
4  View,
5  Text,
6  StyleSheet,
7  TouchableOpacity,
8  Image,
9  ScrollView,
10  Animated,
11  Platform,
12  Dimensions,
13  Alert
14} from 'react-native';
15import AsyncStorage from '@react-native-async-storage/async-storage';
16
17// Native Component using Native elements
18const NativeComponent = () => {
19  const [clickCount, setClickCount] = useState(0);
20  const scaleAnim = useRef(new Animated.Value(1)).current;
21  const { width } = Dimensions.get('window');
22
23  const handlePress = () => {
24    // Haptic feedback (iOS)
25    if (Platform.OS === 'ios') {
26      // Would use react-native-haptic-feedback
27    }
28    
29    // Animate
30    Animated.sequence([
31      Animated.timing(scaleAnim, {
32        toValue: 0.95,
33        duration: 100,
34        useNativeDriver: true
35      }),
36      Animated.timing(scaleAnim, {
37        toValue: 1,
38        duration: 100,
39        useNativeDriver: true
40      })
41    ]).start();
42  };
43
44  return (
45    <ScrollView style={styles.container}>
46      <Text style={styles.title}>React Native Application</Text>
47      
48      {/* Native Components */}
49      <Animated.View 
50        style={[
51          styles.card,
52          { transform: [{ scale: scaleAnim }] }
53        ]}
54      >
55        <Image 
56          source={{ uri: 'https://example.com/image.jpg' }}
57          style={styles.cardImage}
58          resizeMode="cover"
59        />
60        <Text style={styles.cardText}>
61          This runs on iOS and Android natively
62        </Text>
63      </Animated.View>
64
65      {/* Native-specific APIs */}
66      <TouchableOpacity
67        onPress={async () => {
68          setClickCount(prev => prev + 1);
69          // Native APIs
70          await AsyncStorage.setItem('clicks', String(clickCount + 1));
71          Alert.alert('Button Pressed', `Clicked ${clickCount + 1} times`);
72        }}
73        style={styles.button}
74        activeOpacity={0.8}
75      >
76        <Text style={styles.buttonText}>
77          Click me (Native): {clickCount}
78        </Text>
79      </TouchableOpacity>
80
81      {/* Platform-specific rendering */}
82      <View style={styles.platformBox}>
83        <Text style={styles.platformText}>
84          Running on {Platform.OS} {Platform.Version}
85        </Text>
86      </View>
87
88      {/* Native-only features */}
89      {Platform.OS === 'ios' && (
90        <Text style={styles.iosOnly}>
91          iOS-specific feature
92        </Text>
93      )}
94    </ScrollView>
95  );
96};
97
98const styles = StyleSheet.create({
99  container: {
100    flex: 1,
101    backgroundColor: '#f5f5f5'
102  },
103  title: {
104    fontSize: 24,
105    fontWeight: 'bold',
106    textAlign: 'center',
107    marginVertical: 20,
108    color: '#333'
109  },
110  card: {
111    backgroundColor: 'white',
112    borderRadius: 8,
113    padding: 16,
114    marginHorizontal: 20,
115    marginVertical: 10,
116    // React Native shadow
117    ...Platform.select({
118      ios: {
119        shadowColor: '#000',
120        shadowOffset: { width: 0, height: 2 },
121        shadowOpacity: 0.1,
122        shadowRadius: 4
123      },
124      android: {
125        elevation: 4
126      }
127    })
128  },
129  cardImage: {
130    width: '100%',
131    height: 200,
132    borderRadius: 8,
133    marginBottom: 10
134  },
135  button: {
136    backgroundColor: '#007AFF',
137    paddingHorizontal: 20,
138    paddingVertical: 12,
139    borderRadius: 8,
140    marginHorizontal: 20,
141    alignItems: 'center'
142  },
143  buttonText: {
144    color: 'white',
145    fontSize: 16,
146    fontWeight: '600'
147  },
148  platformBox: {
149    backgroundColor: '#e0e0e0',
150    padding: 10,
151    margin: 20,
152    borderRadius: 4
153  }
154});

1// React Web - Rich styling with CSS
2import React from 'react';
3import styled from 'styled-components';
4
5// Styled Components
6const Container = styled.div`
7  display: flex;
8  flex-direction: column;
9  align-items: center;
10  padding: 2rem;
11  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12  min-height: 100vh;
13`;
14
15const Card = styled.div`
16  background: white;
17  border-radius: 12px;
18  padding: 2rem;
19  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
20  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
21  
22  &:hover {
23    transform: translateY(-5px);
24    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
25  }
26  
27  @media (max-width: 768px) {
28    padding: 1rem;
29    width: 90%;
30  }
31`;
32
33const GradientButton = styled.button`
34  background: linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%);
35  border: none;
36  border-radius: 3px;
37  color: white;
38  padding: 0.75rem 2rem;
39  font-size: 1rem;
40  font-weight: bold;
41  cursor: pointer;
42  position: relative;
43  overflow: hidden;
44  
45  &::before {
46    content: '';
47    position: absolute;
48    top: 0;
49    left: -100%;
50    width: 100%;
51    height: 100%;
52    background: rgba(255, 255, 255, 0.2);
53    transition: left 0.5s;
54  }
55  
56  &:hover::before {
57    left: 100%;
58  }
59`;
60
61// Complex animations with CSS
62const AnimatedLogo = styled.div`
63  width: 100px;
64  height: 100px;
65  background: url('/logo.svg') center/contain no-repeat;
66  animation: spin 3s linear infinite;
67  
68  @keyframes spin {
69    from { transform: rotate(0deg); }
70    to { transform: rotate(360deg); }
71  }
72`;
73
74// Grid Layout
75const GridContainer = styled.div`
76  display: grid;
77  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
78  gap: 2rem;
79  width: 100%;
80  max-width: 1200px;
81  
82  @supports (display: grid) {
83    .grid-item {
84      grid-column: span 1;
85    }
86    
87    .grid-item.featured {
88      grid-column: span 2;
89      grid-row: span 2;
90    }
91  }
92`;
93
94const WebStylingExample = () => {
95  return (
96    <Container>
97      <AnimatedLogo />
98      
99      <Card>
100        <h2>Advanced CSS Features</h2>
101        <ul>
102          <li>CSS Grid & Flexbox</li>
103          <li>CSS Variables</li>
104          <li>Complex animations</li>
105          <li>Pseudo-elements</li>
106          <li>Media queries</li>
107          <li>Hover effects</li>
108        </ul>
109        
110        <GradientButton>
111          Hover for effect
112        </GradientButton>
113      </Card>
114      
115      <GridContainer>
116        <div className="grid-item">Item 1</div>
117        <div className="grid-item featured">Featured</div>
118        <div className="grid-item">Item 3</div>
119      </GridContainer>
120    </Container>
121  );
122};

1// React Native - StyleSheet API
2import React from 'react';
3import {
4  View,
5  Text,
6  StyleSheet,
7  TouchableOpacity,
8  Animated,
9  Easing,
10  Dimensions,
11  Platform
12} from 'react-native';
13import LinearGradient from 'react-native-linear-gradient';
14
15const { width } = Dimensions.get('window');
16
17const NativeStylingExample = () => {
18  const spinValue = new Animated.Value(0);
19  
20  // Spin animation
21  Animated.loop(
22    Animated.timing(spinValue, {
23      toValue: 1,
24      duration: 3000,
25      easing: Easing.linear,
26      useNativeDriver: true
27    })
28  ).start();
29  
30  const spin = spinValue.interpolate({
31    inputRange: [0, 1],
32    outputRange: ['0deg', '360deg']
33  });
34
35  return (
36    <LinearGradient
37      colors={['#667eea', '#764ba2']}
38      style={styles.container}
39    >
40      <Animated.View
41        style={[
42          styles.animatedLogo,
43          { transform: [{ rotate: spin }] }
44        ]}
45      />
46      
47      <View style={styles.card}>
48        <Text style={styles.title}>React Native Styling</Text>
49        
50        <View style={styles.list}>
51          <Text style={styles.listItem}>• Flexbox layout (default)</Text>
52          <Text style={styles.listItem}>• StyleSheet API</Text>
53          <Text style={styles.listItem}>• Animated API</Text>
54          <Text style={styles.listItem}>• Platform-specific styles</Text>
55          <Text style={styles.listItem}>• Limited styling options</Text>
56          <Text style={styles.listItem}>• No hover effects</Text>
57        </View>
58        
59        <TouchableOpacity activeOpacity={0.8}>
60          <LinearGradient
61            colors={['#FE6B8B', '#FF8E53']}
62            start={{ x: 0, y: 0 }}
63            end={{ x: 1, y: 1 }}
64            style={styles.gradientButton}
65          >
66            <Text style={styles.buttonText}>Press me</Text>
67          </LinearGradient>
68        </TouchableOpacity>
69      </View>
70      
71      {/* Flexbox Grid Alternative */}
72      <View style={styles.grid}>
73        <View style={styles.gridItem}>
74          <Text>Item 1</Text>
75        </View>
76        <View style={[styles.gridItem, styles.featuredItem]}>
77          <Text>Featured</Text>
78        </View>
79        <View style={styles.gridItem}>
80          <Text>Item 3</Text>
81        </View>
82      </View>
83    </LinearGradient>
84  );
85};
86
87const styles = StyleSheet.create({
88  container: {
89    flex: 1,
90    alignItems: 'center',
91    padding: 20
92  },
93  animatedLogo: {
94    width: 100,
95    height: 100,
96    backgroundColor: 'white',
97    borderRadius: 50
98  },
99  card: {
100    backgroundColor: 'white',
101    borderRadius: 12,
102    padding: 20,
103    marginTop: 20,
104    width: width - 40,
105    ...Platform.select({
106      ios: {
107        shadowColor: '#000',
108        shadowOffset: { width: 0, height: 10 },
109        shadowOpacity: 0.2,
110        shadowRadius: 15
111      },
112      android: {
113        elevation: 10
114      }
115    })
116  },
117  title: {
118    fontSize: 24,
119    fontWeight: 'bold',
120    marginBottom: 15,
121    textAlign: 'center'
122  },
123  list: {
124    marginBottom: 20
125  },
126  listItem: {
127    fontSize: 16,
128    marginVertical: 5,
129    color: '#333'
130  },
131  gradientButton: {
132    paddingVertical: 12,
133    paddingHorizontal: 30,
134    borderRadius: 25,
135    alignItems: 'center'
136  },
137  buttonText: {
138    color: 'white',
139    fontSize: 16,
140    fontWeight: 'bold'
141  },
142  grid: {
143    flexDirection: 'row',
144    flexWrap: 'wrap',
145    marginTop: 20,
146    width: width - 40,
147    justifyContent: 'space-between'
148  },
149  gridItem: {
150    backgroundColor: 'white',
151    padding: 20,
152    borderRadius: 8,
153    width: (width - 60) / 2 - 5,
154    marginBottom: 10,
155    alignItems: 'center'
156  },
157  featuredItem: {
158    width: width - 40
159  }
160});

1// React Web - React Router
2import React from 'react';
3import {
4  BrowserRouter as Router,
5  Routes,
6  Route,
7  Link,
8  useNavigate,
9  useLocation,
10  useParams,
11  Navigate,
12  Outlet
13} from 'react-router-dom';
14
15// Layout Component
16const Layout = () => {
17  const location = useLocation();
18  
19  return (
20    <div className="app-layout">
21      <nav className="navbar">
22        <Link to="/" className="nav-link">
23          Home
24        </Link>
25        <Link to="/products" className="nav-link">
26          Products
27        </Link>
28        <Link to="/profile" className="nav-link">
29          Profile
30        </Link>
31      </nav>
32      
33      {/* Breadcrumbs */}
34      <div className="breadcrumbs">
35        {location.pathname.split('/').filter(Boolean).map((path, index) => (
36          <span key={path}>
37            {index > 0 && ' > '}
38            <Link to={`/${path}`}>{path}</Link>
39          </span>
40        ))}
41      </div>
42      
43      <main className="main-content">
44        <Outlet />
45      </main>
46    </div>
47  );
48};
49
50// Protected Route
51const ProtectedRoute = ({ children }) => {
52  const isAuthenticated = useAuth();
53  const location = useLocation();
54  
55  if (!isAuthenticated) {
56    return <Navigate to="/login" state={{ from: location }} replace />;
57  }
58  
59  return children;
60};
61
62// Product Detail Page
63const ProductDetail = () => {
64  const { id } = useParams();
65  const navigate = useNavigate();
66  const location = useLocation();
67  
68  return (
69    <div>
70      <button onClick={() => navigate(-1)}>
71        ← Back
72      </button>
73      
74      <h1>Product {id}</h1>
75      
76      {/* Query params */}
77      <p>Current filter: {new URLSearchParams(location.search).get('filter')}</p>
78      
79      {/* Programmatic navigation */}
80      <button onClick={() => navigate('/products', { replace: true })}>
81        All Products
82      </button>
83      
84      {/* Navigate with state */}
85      <button onClick={() => navigate('/checkout', { 
86        state: { productId: id } 
87      })}>
88        Buy Now
89      </button>
90    </div>
91  );
92};
93
94// App with routing
95const WebApp = () => {
96  return (
97    <Router>
98      <Routes>
99        <Route path="/" element={<Layout />}>
100          <Route index element={<Home />} />
101          <Route path="products">
102            <Route index element={<Products />} />
103            <Route path=":id" element={<ProductDetail />} />
104          </Route>
105          <Route 
106            path="profile" 
107            element={
108              <ProtectedRoute>
109                <Profile />
110              </ProtectedRoute>
111            } 
112          />
113          <Route path="login" element={<Login />} />
114          <Route path="*" element={<NotFound />} />
115        </Route>
116      </Routes>
117    </Router>
118  );
119};
120
121// Deep linking with URL
122// https://app.com/products/123?filter=electronics
123// Automatically handled by React Router

1// React Native - React Navigation
2import React from 'react';
3import {
4  NavigationContainer,
5  useNavigation,
6  useRoute,
7  useFocusEffect,
8  DrawerActions
9} from '@react-navigation/native';
10import { createNativeStackNavigator } from '@react-navigation/native-stack';
11import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
12import { createDrawerNavigator } from '@react-navigation/drawer';
13import { 
14  View, 
15  Text, 
16  TouchableOpacity,
17  Platform 
18} from 'react-native';
19import Icon from 'react-native-vector-icons/Ionicons';
20
21// Type definitions
22type RootStackParamList = {
23  Home: undefined;
24  Products: { category?: string };
25  ProductDetail: { id: string };
26  Profile: undefined;
27  Login: { from?: string };
28};
29
30const Stack = createNativeStackNavigator<RootStackParamList>();
31const Tab = createBottomTabNavigator();
32const Drawer = createDrawerNavigator();
33
34// Product Detail Screen
35const ProductDetailScreen = () => {
36  const navigation = useNavigation();
37  const route = useRoute();
38  const { id } = route.params;
39  
40  // Focus effect (like useEffect but for navigation)
41  useFocusEffect(
42    React.useCallback(() => {
43      console.log('Screen focused');
44      return () => console.log('Screen unfocused');
45    }, [])
46  );
47  
48  return (
49    <View style={styles.container}>
50      {/* Native back gesture on iOS, button on Android */}
51      <TouchableOpacity 
52        onPress={() => navigation.goBack()}
53        style={styles.backButton}
54      >
55        <Icon name="arrow-back" size={24} />
56        <Text>Back</Text>
57      </TouchableOpacity>
58      
59      <Text style={styles.title}>Product {id}</Text>
60      
61      {/* Navigate with params */}
62      <TouchableOpacity
63        onPress={() => 
64          navigation.navigate('Products', { category: 'electronics' })
65        }
66        style={styles.button}
67      >
68        <Text>View Electronics</Text>
69      </TouchableOpacity>
70      
71      {/* Reset navigation stack */}
72      <TouchableOpacity
73        onPress={() => 
74          navigation.reset({
75            index: 0,
76            routes: [{ name: 'Home' }],
77          })
78        }
79        style={styles.button}
80      >
81        <Text>Go to Home (Reset Stack)</Text>
82      </TouchableOpacity>
83    </View>
84  );
85};
86
87// Tab Navigator
88const TabNavigator = () => {
89  return (
90    <Tab.Navigator
91      screenOptions={({ route }) => ({
92        tabBarIcon: ({ focused, color, size }) => {
93          let iconName;
94          
95          if (route.name === 'Home') {
96            iconName = focused ? 'home' : 'home-outline';
97          } else if (route.name === 'Products') {
98            iconName = focused ? 'grid' : 'grid-outline';
99          } else if (route.name === 'Profile') {
100            iconName = focused ? 'person' : 'person-outline';
101          }
102          
103          return <Icon name={iconName} size={size} color={color} />;
104        },
105        tabBarActiveTintColor: '#007AFF',
106        tabBarInactiveTintColor: 'gray',
107        // Platform-specific styling
108        tabBarStyle: Platform.select({
109          ios: {
110            backgroundColor: 'white',
111          },
112          android: {
113            backgroundColor: '#f8f8f8',
114            elevation: 8,
115          },
116        }),
117      })}
118    >
119      <Tab.Screen name="Home" component={HomeScreen} />
120      <Tab.Screen name="Products" component={ProductsStack} />
121      <Tab.Screen name="Profile" component={ProfileScreen} />
122    </Tab.Navigator>
123  );
124};
125
126// Drawer Navigator (typically for tablets or specific UX)
127const DrawerNavigator = () => {
128  const navigation = useNavigation();
129  
130  return (
131    <Drawer.Navigator
132      screenOptions={{
133        drawerStyle: {
134          backgroundColor: '#f5f5f5',
135          width: 240,
136        },
137        headerLeft: () => (
138          <TouchableOpacity
139            onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
140            style={{ marginLeft: 15 }}
141          >
142            <Icon name="menu" size={24} />
143          </TouchableOpacity>
144        ),
145      }}
146    >
147      <Drawer.Screen name="Main" component={TabNavigator} />
148      <Drawer.Screen name="Settings" component={SettingsScreen} />
149      <Drawer.Screen name="About" component={AboutScreen} />
150    </Drawer.Navigator>
151  );
152};
153
154// Main App with deep linking
155const linking = {
156  prefixes: ['myapp://', 'https://myapp.com'],
157  config: {
158    screens: {
159      Home: '',
160      Products: 'products',
161      ProductDetail: 'products/:id',
162      Profile: 'profile',
163      Login: 'login',
164    },
165  },
166};
167
168const NativeApp = () => {
169  return (
170    <NavigationContainer linking={linking}>
171      <Stack.Navigator
172        screenOptions={{
173          // iOS-style navigation
174          headerStyle: {
175            backgroundColor: Platform.OS === 'ios' ? 'white' : '#f5f5f5',
176          },
177          headerShadowVisible: false,
178          // Enable gestures
179          gestureEnabled: true,
180          // Custom animation
181          animation: Platform.OS === 'ios' ? 'slide_from_right' : 'fade',
182        }}
183      >
184        <Stack.Screen 
185          name="Main" 
186          component={DrawerNavigator}
187          options={{ headerShown: false }}
188        />
189        <Stack.Screen 
190          name="ProductDetail" 
191          component={ProductDetailScreen}
192          options={({ route }) => ({
193            title: `Product ${route.params.id}`,
194            // iOS back button customization
195            headerBackTitle: 'Back',
196          })}
197        />
198        <Stack.Screen 
199          name="Login" 
200          component={LoginScreen}
201          options={{
202            // Modal presentation on iOS
203            presentation: 'modal',
204          }}
205        />
206      </Stack.Navigator>
207    </NavigationContainer>
208  );
209};
210
211// Deep linking example:
212// myapp://products/123
213// Opens ProductDetailScreen with id: '123'