The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Components and Props

Next ►
►

In this section, we will delve into the fundamental building blocks of a React Native application: components and props. Understanding these concepts is crucial for creating dynamic and reusable UI elements.

What are Components?

Components are the heart of any React Native application. They allow you to split the UI into independent, reusable pieces, and think about each piece in isolation.

Types of Components

  1. Functional Components: These are simple JavaScript functions that accept props as an argument and return React elements.
  2. Class Components: These are ES6 classes that extend from React.Component and have a render method that returns React elements.

Example of a Functional Component

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

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

export default Greeting;

Example of a Class Component

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

class Greeting extends Component {
  render() {
    return (
      <View>
        <Text>Hello, {this.props.name}!</Text>
      </View>
    );
  }
}

export default Greeting;

What are Props?

Props (short for properties) are read-only attributes that are passed from a parent component to a child component. They allow you to pass data and event handlers down to your child components.

Passing Props to a Component

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

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

export default App;

In the example above, the App component passes the name prop to the Greeting component.

Practical Example: Creating a Custom Button Component

Let's create a custom button component that accepts a title and an onPress event handler as props.

CustomButton.js

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

const CustomButton = (props) => {
  return (
    <TouchableOpacity style={styles.button} onPress={props.onPress}>
      <Text style={styles.buttonText}>{props.title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007BFF',
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
  },
});

export default CustomButton;

Using CustomButton in App.js

import React from 'react';
import { View, Alert } from 'react-native';
import CustomButton from './CustomButton';

const App = () => {
  const showAlert = () => {
    Alert.alert('Button Pressed!');
  };

  return (
    <View style={{ padding: 20 }}>
      <CustomButton title="Press Me" onPress={showAlert} />
    </View>
  );
};

export default App;

Exercises

Exercise 1: Create a Welcome Component

Create a functional component named Welcome that accepts a name prop and displays a welcome message.

Solution:

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

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

export default Welcome;

Exercise 2: Create a Profile Component

Create a class component named Profile that accepts name and age props and displays them.

Solution:

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

class Profile extends Component {
  render() {
    return (
      <View>
        <Text>Name: {this.props.name}</Text>
        <Text>Age: {this.props.age}</Text>
      </View>
    );
  }
}

export default Profile;

Common Mistakes and Tips

  • Forgetting to pass props: Ensure you pass the necessary props from the parent component to the child component.
  • Mutating props: Props are read-only. Do not attempt to modify them within the child component.
  • Default props: Use default props to ensure your component has default values if no props are passed.
CustomButton.defaultProps = {
  title: 'Default Title',
};

Conclusion

In this section, we covered the basics of components and props in React Native. We learned how to create both functional and class components, pass props, and create reusable components. Understanding these concepts is essential for building complex and maintainable React Native applications. In the next module, we will explore core components and styling in React Native.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved