React Native Module 2: Core Concepts & Components | Complete Guide

Module 2: Core Concepts and Components

Course Overview: This module introduces the core building blocks of React Native development. You will learn JSX syntax, functional and class components, props, state management, and event handling. By the end of this module, you will be able to create interactive and dynamic mobile applications using React Native components.

✅ JSX Syntax and Usage

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. React Native uses JSX to define the UI of components in a declarative way.

Instead of manually creating elements with React.createElement, JSX allows a more intuitive approach:

// Without JSX
const element = React.createElement('Text', {style: {color: 'blue'}}, 'Hello World');

// With JSX
const element = <Text style={{color: 'blue'}}>Hello World</Text>;

Key points about JSX in React Native:

• JSX must have a single root element per component.
• Style properties are written in camelCase (e.g., backgroundColor, fontSize).
• JSX can include JavaScript expressions inside {}.

Example:

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

const Greeting = () => {
  const name = 'Umar';
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, {name}!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 20,
    color: '#007bff'
  }
});

export default Greeting;

In this example, JSX allows us to combine layout (View) and text (Text) seamlessly, making code readable and maintainable.

✅ Functional and Class Components

React Native supports two types of components: functional components and class components. Both can render UI and manage state (with hooks in functional components).

Functional Components

Functional components are JavaScript functions that return JSX.

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

const HelloWorld = () => {
  return <Text>Hello World!</Text>;
};

export default HelloWorld;

Advantages of functional components:

• Simple and easy to read
• Works seamlessly with React Hooks for state and lifecycle
• Encourages functional programming patterns

Class Components

Class components extend React.Component and have a render() method.

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

class HelloWorld extends Component {
  render() {
    return (
      <View>
        <Text>Hello World from Class Component!</Text>
      </View>
    );
  }
}

export default HelloWorld;

Class components are still useful for legacy code and when you want to use lifecycle methods without hooks, such as componentDidMount or componentWillUnmount.

✅ Props and State Management

Props and state are the fundamental ways to manage data in React Native components.

Props (Properties)

Props are used to pass data from parent to child components. They are immutable within the child component.

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

const Greeting = (props) => {
  return <Text>Hello, {props.name}!</Text>;
};

const App = () => {
  return (
    <View>
      <Greeting name="Umar" />
      <Greeting name="Rahman" />
    </View>
  );
};

export default App;

Props are perfect for making reusable components. Each instance of Greeting can display different data.

State

State is mutable data local to a component. Changing state triggers a re-render of the component.

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

Key points about state:

• Managed locally in functional components via useState or class this.state.
• Updating state re-renders the component.
• Do not modify state directly; always use the setter function (setCount in this case).

✅ Event Handling and Forms

React Native handles user interactions using events such as onPress, onChangeText, and others.

Button Press Example

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

const App = () => {
  const showAlert = () => {
    Alert.alert("Button Pressed!", "You clicked the button.");
  };

  return (
    <View>
      <Button title="Click Me" onPress={showAlert} />
    </View>
  );
};

export default App;

Text Input Example

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

const App = () => {
  const [name, setName] = useState('');

  return (
    <View>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={text => setName(text)}
        style={{borderWidth: 1, padding: 8, margin: 10}}
      />
      <Text>Hello, {name}!</Text>
    </View>
  );
};

export default App;

Key points:

• Use onPress for buttons and touchable elements.
• Use onChangeText for TextInput changes.
• Forms can combine multiple inputs and a submit button with event handlers.
• State management is critical for interactive forms.

✅ Summary

Module 2 covers the core concepts of React Native development:

• JSX syntax allows writing HTML-like code inside JavaScript.
• Functional and Class components are two ways to structure UI.
• Props are immutable data passed from parent to child components.
• State is mutable, local data that triggers re-renders.
• Event handling and forms allow user interaction and input handling.

By mastering these concepts, you can create dynamic and interactive mobile apps using React Native.