JSX and Components in React Native

# CHAPTER 6

JSX and Components in React Native #

1. Introduction #

2. Learning Objectives #

• Explain what JSX is and why it exists.

• Understand the 3 fundamental rules of writing JSX.

• Create custom Functional Components from scratch.

• Embed JavaScript variables and logic directly into your UI.

• Use Component Composition to build complex screens.

3. What is JSX? #

4. The 3 Golden Rules of JSX #

Rule 1: Return a Single Parent Element You cannot return two sibling elements (like a Title and a Subtitle) side-by-side. They MUST be wrapped inside a single parent tag.

// BAD (Will Crash)
return (
  <Text>Title</Text>
  <Text>Subtitle</Text>
);

// GOOD (Wrapped in a View)
return (
  <View>
    <Text>Title</Text>
    <Text>Subtitle</Text>
  </View>
);

Rule 2: Close All Tags In HTML, you can leave an image tag unclosed: <img src="url">. In JSX, EVERY tag must be explicitly closed, either with a closing tag </View> or a self-closing slash />.

// BAD
<Image source={require(&#039;./logo.png&#039;)}> 

// GOOD
<Image source={require(&#039;./logo.png&#039;)} />

Rule 3: Use camelCase for Properties HTML uses standard lowercase attributes. JSX requires camelCase. (e.g., onclick becomes onPress, tabindex becomes tabIndex).

5. Embedding JavaScript in JSX #

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

export default function UserProfile() {
  const username = "Alice";
  const points = 500;

  return (
    <View>
      {/* Injecting variables into text! */}
      <Text>Welcome back, {username}!</Text>
      {/* Injecting math logic into text! */}
      <Text>Score multiplied: {points * 2}</Text>
    </View>
  );
}

6. Functional Components #

// 1. A small reusable component
const CustomButton = () => {
  return (
    <View style={{ backgroundColor: &#039;blue&#039;, padding: 10 }}>
      <Text style={{ color: &#039;white&#039; }}>Click Me!</Text>
    </View>
  );
};

// 2. The Main Screen Component
export default function App() {
  return (
    <View>
      <Text>Welcome to my App</Text>
      {/* Rendering the custom component! */}
      <CustomButton /> 
    </View>
  );
}

7. Component Composition #

const Header = () => <Text>My Dashboard</Text>;
const Footer = () => <Text>Copyright 2024</Text>;

export default function DashboardScreen() {
  return (
    <View>
      <Header />
      <View>
         <Text>Main Content goes here.</Text>
      </View>
      <Footer />
    </View>
  );
}

8. Visual Learning: The JSX Compilation #

[ You Write (JSX) ]
<View>
  <Text>Hello</Text>
</View>

       | (Babel Compiler translates it automatically)
       v

[ React Reads (JavaScript) ]
React.createElement(
  View,
  null,
  React.createElement(Text, null, &#039;Hello')
)

9. Common Mistakes #

• Returning an Object Instead of UI: If a function looks like this:

10. Best Practices #

• File Separation: For absolute beginners, writing 5 components in one file is fine. For professionals, every Component should get its own file (e.g., CustomButton.js) and be exported and imported where needed.

11. Practice Exercises #

1. 1. Fix this invalid JSX:

1. 2. Write a Functional Component named Greeting that returns a <Text> containing the string "Hello World".

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the role of Babel in a React Native project. Why is it strictly necessary when writing JSX?

• Q: Describe Component Composition. Why is it architecturally superior to writing massive, 1000-line monolithic UI screens?

• Q: What is the specific rule regarding sibling elements in JSX, and why does the React engine enforce this constraint?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #