ReactNativeBasics:APracticalBeginner’sGuide

What is React Native?

React Native is a framework that allows you to build native mobile apps using JavaScript and React.

Instead of building separate apps for Android and iOS, you write one codebase that works on both.

Key Advantages

• Cross-platform (Android + iOS)
• Reusable components
• Fast development (Hot Reloading)
• Large ecosystem

Core Concepts

1. Components

Everything in React Native is a component.

import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
}

2. Basic Built-in Components

React Native uses JavaScript objects instead of CSS.

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    color: 'blue',
  },
};

Usage:

<View style={styles.container}>
  <Text style={styles.text}>Styled Text</Text>
</View>

Layout with Flexbox

React Native uses Flexbox by default.

Common Properties

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <Text>Left</Text>
  <Text>Right</Text>
</View>

Handling User Input

import React, { useState } from 'react';
import { View, TextInput, Text } from 'react-native';

export default function App() {
  const [name, setName] = useState('');

  return (
    <View>
      <TextInput
        placeholder="Enter your name"
        onChangeText={setName}
      />
      <Text>Hello {name}</Text>
    </View>
  );
}

 State & Props

State

Used to manage dynamic data inside a component.

Props

Used to pass data between components.

function Greeting({ name }) {
  return <Text>Hello {name}</Text>;
}

Navigation (Basic Idea)

For multi-screen apps, React Native uses libraries like:

• React Navigation (most popular)

Example:

import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Screens go here */}
    </NavigationContainer>
  );
}

Project Structure (Recommended)

/project
  /components
  /screens
  /navigation
  /assets
  App.js

Useful Commands

Best Practices

• Keep components small and reusable
• Use proper folder structure
• Avoid inline styles in large apps
• Use hooks (useState, useEffect)
• Optimize performance (FlatList over ScrollView)

React Native vs React (Quick Comparison)

Final Thoughts

React Native is not magic—but it’s efficient. It rewards clean structure, reusable components, and disciplined coding.

Start small:

• Build a simple UI
• Add state
• Handle inputs
• Move to navigation

That’s the traditional path—and it still works.