Project structure overview in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main app component from the correct file.

React Native

import App from './[1]';

Drag options to blanks, or click blank then click option'

AMain

Bapp

Cmain

DApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'app' instead of 'App' causes import errors.

Trying to import from 'Main' when the file is named 'App.js'.

The main app component is usually in a file named App.js, so we import from './App'.

2fill in blank

medium

Complete the code to register the main app component with AppRegistry.

React Native

AppRegistry.registerComponent('[1]', () => App);

Drag options to blanks, or click blank then click option'

AappName

Bname

CMyApp

DMainApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a hardcoded string that does not match app.json causes the app not to load.

Using variable names like 'MainApp' without defining them.

The app name is usually imported from app.json as appName and used here to register the app.

3fill in blank

hard

Fix the error in the import statement for React Native components.

React Native

import { View, Text, [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

ATouchableOpacity

Bbutton

CButton

Dtouchableopacity

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase component names causes import errors.

Confusing similar component names.

React Native components use PascalCase names like TouchableOpacity. Lowercase names cause errors.

4fill in blank

hard

Fill both blanks to create a simple functional component that returns a Text element.

React Native

const [1] = () => {
  return <[2]>Hello!</[2]>;
};

Drag options to blanks, or click blank then click option'

AGreeting

BView

CText

DApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase component names.

Using View instead of Text to display text.

The component name should be Greeting and it returns a Text element to display text.

5fill in blank

hard

Fill all three blanks to export the component as default and import React.

React Native

import [1] from 'react';

const Greeting = () => <Text>Hello!</Text>;

export [2] Greeting;

// Also import [3] from react-native for UI components

Drag options to blanks, or click blank then click option'

AReact

Bdefault

CView

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import React causes JSX errors.

Using named export instead of default export here.

Not importing UI components like View or Text.

You import React to use JSX, export the component as default, and import View from react-native for UI layout.